计算属性 computed
computed 选项定义计算属性。
计算属性类似于 methods 选项中的函数。
比较：
- 计算属性：会进行缓存，只在相关响应式依赖发生改变的时候才会重新求值。
- 函数：每次都会执行函数体进行计算。
需求：输入数学与英语的分数，采用 methods 与 computed 分别计算出总得分。
使用函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性和监听器</title>
</head>
<body>
<div id="app">
数学：<input type="text" v-model="mathScore">
英语：<input type="text" v-model="englishScore">
<!-- v-model调用函数时不要少了小括号（） -->
总得分：<input type="text" v-model="sumScore()">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
mathScore: 80,
englishScore: 90,
},
methods: {
sumScore: function () {
console.log("sumScore函数被调用了。。。")
// this 指向的是vm实例
// 减0是为了字符串转为数字运算
return (this.mathScore - 0) + (this.englishScore - 0)
},
},
})
</script>
</body>
</html>
使用计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性和监听器</title>
</head>
<body>
<div id="app">
数学：<input type="text" v-model="mathScore">
英语：<input type="text" v-model="englishScore">
<!-- v-model调用函数时不要少了小括号（） -->
总得分(函数)：<input type="text" v-model="sumScore()">
<!-- 计算属性后面不需要加小括号 -->
总得分(计算属性)：<input type="text" v-model="sumScore1">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
/**
* 1. 函数没有缓存，每次都会调用。
* 2. 计算属性有缓存，只有当计算属性体内的属性值发生改变之后才会被调用。
* 3. 函数只支持单项的。
* 4. 计算属性默认只有getter函数，而没有setter函数，所以只支持单项。
* 如果想要进行双向，则需要自定义setter函数。
*/
var vm = new Vue({
el: '#app',
data: {
mathScore: 80,
englishScore: 90,
},
// 函数
methods: {
sumScore: function () {
console.log("sumScore函数被调用了。。。")
// this 指向的是vm实例
// 减0是为了字符串转为数字运算
return (this.mathScore - 0) + (this.englishScore - 0)
},
},
// 计算属性
computed: {
sumScore1:function(){
// 计算属性有缓存，如果计算属性体内的属性值没有发生改变，则不会发生改变，只要属性值发生改变的时候才会重新计算。
console.log("计算属性被调用")
return (this.mathScore - 0) + (this.englishScore - 0)
}
},
})
</script>
</body>
</html>
- 函数没有缓存，每次都会调用。
- 计算属性有缓存，只有当计算属性体内的属性值发生改变之后才会被调用。
- 函数只支持单项的。
- 计算属性默认只有getter函数，而没有setter函数，所以只支持单项。如果想要进行双向，则需要自定义setter函数。
计算属性（双向绑定）
计算属性默认只有getter，不过在需要的时候你也可以提供一个setter。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性和监听器</title>
</head>
<body>
<div id="app">
数学：<input type="text" v-model="mathScore"><br>
英语：<input type="text" v-model="englishScore"><br>
<!-- v-model调用函数时不要少了小括号（） -->
总得分(函数-单项绑定)：<input type="text" v-model="sumScore()"><br>
<!-- 计算属性后面不需要加小括号 -->
总得分(计算属性-单项绑定)：<input type="text" v-model="sumScore1"><br>
总得分(计算属性-双向绑定)：<input type="text" v-model="sumScore2"><br>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
/**
* 1. 函数没有缓存，每次都会调用。
* 2. 计算属性有缓存，只有当计算属性体内的属性值发生改变之后才会被调用。
* 3. 函数只支持单项的。
* 4. 计算属性默认只有getter函数，而没有setter函数，所以只支持单项。
* 如果想要进行双向，则需要自定义setter函数。
*/
var vm = new Vue({
el: '#app',
data: {
mathScore: 80,
englishScore: 90,
},
// 函数
methods: {
sumScore: function () {
console.log("sumScore函数被调用了。。。")
// this 指向的是vm实例
// 减0是为了字符串转为数字运算
return (this.mathScore - 0) + (this.englishScore - 0)
},
},
// 计算属性
computed: {
// 这个是单项绑定，默认只有getter方法。
sumScore1:function(){
// 计算属性有缓存，如果计算属性体内的属性值没有发生改变，则不会发生改变，只要属性值发生改变的时候才会重新计算。
console.log("计算属性被调用")
return (this.mathScore - 0) + (this.englishScore - 0)
},
sumScore2:{ // 有了set和get之后就可以进行双向数据绑定
// 获取数据
get:function(){
console.log("sumScore2.get 计算属性被调用")
return (this.mathScore - 0) + (this.englishScore - 0)
},
// 设置数据
set:function(newValue){ // newValue 是 sumScore2 更新之后的新值。
// 当 sumScore2 这个计算属性值发生改变之后，则会调用这个方法。
console.log("sumScore2.set 计算属性被调用")
var avgValue = newValue / 2
this.mathScore = avgValue
this.englishScore = avgValue
}
}
},
})
</script>
</body>
</html>
监听器 watch
当属性数据发生变化的时候，对应属性的回调函数会自动调用，在函数内部进行计算。
通过 watch 选项或者是 vm 实例的 $watch 来监听指定的属性。
需求：
- 通过 watch() 选项来监听数学分数，当数学分数更新后回调函数中重新计算总分。
- 通过 $watch() 来监听英语分数，当英语更新后重新计算总分数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性和监听器</title>
</head>
<body>
<div id="app">
数学：<input type="text" v-model="mathScore"><br>
英语：<input type="text" v-model="englishScore"><br>
<!-- v-model调用函数时不要少了小括号（） -->
总得分(函数-单项绑定)：<input type="text" v-model="sumScore()"><br>
<!-- 计算属性后面不需要加小括号 -->
总得分(计算属性-单项绑定)：<input type="text" v-model="sumScore1"><br>
总得分(计算属性-双向绑定)：<input type="text" v-model="sumScore2"><br>
<!-- 通过 watch() 选项来监听数学分数，当数学分数更新后回调函数中重新计算总分。 -->
总得分(监听器)：<input type="text" v-model="sumScore3"><br>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
/**
* 1. 函数没有缓存，每次都会调用。
* 2. 计算属性有缓存，只有当计算属性体内的属性值发生改变之后才会被调用。
* 3. 函数只支持单项的。
* 4. 计算属性默认只有getter函数，而没有setter函数，所以只支持单项。
* 如果想要进行双向，则需要自定义setter函数。
*/
var vm = new Vue({
el: '#app',
data: {
mathScore: 80,
englishScore: 90,
// 利用监听器计算出来的总得分
sumScore3: 0,
},
// 函数
methods: {
sumScore: function () {
console.log("sumScore函数被调用了。。。")
// this 指向的是vm实例
// 减0是为了字符串转为数字运算
return (this.mathScore - 0) + (this.englishScore - 0)
},
},
// 计算属性
computed: {
// 这个是单项绑定，默认只有getter方法。
sumScore1: function () {
// 计算属性有缓存，如果计算属性体内的属性值没有发生改变，则不会发生改变，只要属性值发生改变的时候才会重新计算。
console.log("计算属性被调用")
return (this.mathScore - 0) + (this.englishScore - 0)
},
sumScore2: { // 有了set和get之后就可以进行双向数据绑定
// 获取数据
get: function () {
console.log("sumScore2.get 计算属性被调用")
return (this.mathScore - 0) + (this.englishScore - 0)
},
// 设置数据
set: function (newValue) { // newValue 是 sumScore2 更新之后的新值。
// 当 sumScore2 这个计算属性值发生改变之后，则会调用这个方法。
console.log("sumScore2.set 计算属性被调用")
var avgValue = newValue / 2
this.mathScore = avgValue
this.englishScore = avgValue
}
}
},
// 监听器
watch: {
// 通过 watch() 选项来监听数学分数，当数学分数更新后回调函数中重新计算总分。
mathScore: function (newValue, oldValue) {
// newValue 更新后的值
// oldValue 更新前的值
this.sumScore3 = (newValue - 0) + (this.englishScore - 0)
}
},
})
</script>
</body>
</html>