1. 计算属性的作用及使用
计算属性(Computed)的作用
- 当模板內的JS表达式复杂到让我们难以维护时，我们应当要引入计算属性。
<div id="app"> {{text.split('').reverse().join('')}} </div> - 对于任何复杂逻辑，都应当使用计算属性。
在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果就可以。计算属性还可以依赖多个Vue实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。
计算属性(Computed)与 method方法的区别
- 计算属性
1)包含getter和setter
2)基于依赖缓存
3)依赖数据改变=>触发setter和 getter=>计算属性改变
4)可以依赖其他计算属性
5)可以依赖其他实例数据 - methods方法
本质是实例上定义的普通函数,组件重新渲染,就会调用,性能相对差一点 - 如何选择
是否需要缓存,比如遍历大数组和做大量计算,使用计算属性
计算属性Computed使用场景：当一个数据受多个数据影响。在多个依赖数据中，任何一个改变都会导致“受影响”数据的改变时，则需要计算属性了
2. watch的作用及使用
Watch使用场景:一个数据影响多个数据。有 多个 受依赖数据改变而改变的“受影响”数据，则需要watch
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>苹果手机单价：<input type="text" v-model="price1">数量：<input type="text" v-model="number1"></p>
<p>华为手机单价：<input type="text" v-model="price2">数量：<input type="text" v-model="number2"></p>
<p>锤子手机单价：<input type="text" v-model="price3">数量：<input type="text" v-model="number3"></p>
<div>直接计算：{{price1 * number1 + price2 * number2 + price3 * number3}}</div>
<div>计算属性计算：{{totalPrice}}</div>
<div>methods计算：{{caclTotalPrice()}}</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
price1: '',
number1: 0,
price2: '',
number2: 0,
price3: '',
number3: 0,
appleInfo: {
price: '',
number: 1
}
},
computed: {
totalPrice: function() {
let {price1, number1, price2, number2, price3, number3} = this
return price1 * number1 + price2 * number2 + price3 * number3;
}
},
watch: {
price1: function(newVal, oldVal) {
console.log("watch====>", newVal, oldVal)
},
appleInfo: {
handler: function(newVal, oldVal) {
console.log('watch appleInfo====>', newVal, oldVal)
},
deep: true,// true为深度监听,默认false
immediate: true// 首次绑定的时候要不要执行handler，true为执行
}
},
methods: {
caclTotalPrice() {
let {price1, number1, price2, number2, price3, number3} = this
return price1 * number1 + price2 * number2 + price3 * number3;
}
}
})
</script>
</body>
</html>
