<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
数学：<input type="text" v-model="mathScore" name="" id="">
英语：<input type="text" v-model="englishScore" name="" id=""><br>
得分(函数-单项绑定)：<input type="text" name="" id="" v-model="sumScore()"><br>
得分(计算属性-单项绑定)：<input type="text" name="" id="" v-model="sumScore1"><br>
得分(计算属性-双项绑定)：<input type="text" name="" id="" v-model="sumScore2"><br>
得分(监听器-watch方式)：<input type="text" name="" id="" v-model="sumScore3"><br>
得分(监听器-$watch方式)：<input type="text" name="" id="" v-model="sumScore3">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script src="./node_modules/vue/dist/vue.js"></script> -->
<script>
/*
1.函数没有缓存,每次都会调用函数
2.计算属性有缓存，只有当计算属性体内的属性数据更改后才能被调用
*/
var vm = new Vue({
el: "#app",
data: {
mathScore: 80,
englishScore: 90,
sumScore3: 0 //通过监听器算出来的得分
},
//函数
methods: {
sumScore: function () {
console.log("函数被调用");
return (this.mathScore - 0) + (this.englishScore - 0);
}
},
//计算属性
computed: {
sumScore1: function () { //计算属性有缓存，如果计算属性没有被更改的情况下，计算属性不会重新调用
console.log("sumScore1 计算属性被调用");
return (this.mathScore - 0) + (this.englishScore - 0);
},
sumScore2: { //有了setter和getter之后就可以实现双向绑定
//获取数据
get: function () {
console.log('sumScore2计算属性getter被调用');
return (this.mathScore - 0) + (this.englishScore - 0);
},
//设置数据，当sumScore2计算属性更新之后，则会调用set方法
set: function (newVale) {
var avgScore = newVale / 2;
this.mathScore = avgScore;
this.englishScore = avgScore;
console.log('sumScore2计算属性setter被调用');
}
}
},
//监听器
//需求：通过watch选项监听数学分数，当数学更新后回调函数中重新计算得分sumScore3
watch: {
mathScore: function (newVlaue, oldValue) {
this.sumScore3 = (newVlaue - 0) + (this.englishScore - 0);
}
}
})
vm.$watch("englishScore", function (newVlaue) {
this.sumScore3 = (newVlaue - 0) + (this.mathScore - 0);
})
vm.$watch("sumScore3", function (newVlaue) {
var avgScore = newVlaue / 2;
this.englishScore = avgScore;
this.mathScore = avgScore;
})
</script>
</body>
</html>