共计 1751 个字符，预计需要花费 5 分钟才能阅读完成。
计算属性 computed：
- 反对缓存，只有依赖数据产生扭转，才会从新进行计算
- 不反对异步，当 computed 内有异步操作时有效，无奈监听数据的变动
- computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于 data 中申明过或者父组件传递的 props 中的数据通过计算失去的值
- 如果一个属性是由其余属性计算而来的，这个属性依赖其余属性，是一个多对一或者一对一，个别用 computed
- 如果 computed 属性属性值是函数，那么默认会走 get 办法；函数的返回值就是属性的属性值；在 computed 中的，属性都有一个 get 和一个 set 办法，当数据变动时，调用 set 办法。
var vm = new Vue({
el: '#app',
data: {message: 'hello'},
template: `
<div> <p> 我是原始值: "{{message}}"</p> <p> 我是计算属性的值: "{{computedMessage}}"</p> // computed 在 DOM 里间接应用不须要调用 </div> `,
computed: {// 计算属性的 getter computedMessage: function () {// `this` 指向 vm 实例 return this.message.split('').reverse().join('')
}
}
})后果：
我是原始值: “Hello”
我是计算属性的值: “olleH”
如果不应用计算属性，那么 message.split(”).reverse().join(”) 就会间接写到 template 里，那么在模版中放入太多申明式的逻辑会让模板自身过重，尤其当在页面中应用大量简单的逻辑表达式解决数据时，会对页面的可维护性造成很大的影响
而且计算属性如果依赖不变的话，它就会变成缓存，computed 的值就不会从新计算
所以，如果数据要通过简单逻辑来得出后果，那么就举荐应用计算属性
侦听属性 watch
- 不反对缓存，数据变，间接会触发相应的操作。
- watch 反对异步；监听的函数接管两个参数，第一个参数是最新的值；第二个参数是输出之前的值；
- 当一个属性发生变化时，须要执行对应的操作；一对多；
- 监听数据必须是 data 中申明过或者父组件传递过去的 props 中的数据，当数据变动时，触发其余操作，函数有两个参数：
new Vue({
data: {
n: 0,
obj: {a: "a"}
},
template: `
<div> <button @click="n += 1">n+1</button> <button @click="obj.a +='hi'">obj.a +'hi'</button> <button @click="obj = {a:'a'}">obj = 新对象 </button> </div> `,
watch: {n() {console.log("n 变了");
},
obj:{handler: function (val, oldVal) {console.log("obj 变了")
},
deep: true // 该属性设定在任何被侦听的对象的 property 扭转时都要执行 handler 的回调，不管其被嵌套多深 },
"obj.a":{handler: function (val, oldVal) {console.log("obj.a 变了")
},
immediate: true // 该属性设定该回调将会在侦听开始之后被立刻调用 }
}
}).$mount("#app");不应该应用箭头函数来定义 watcher 函数，因为箭头函数没有 this，它的 this 会继承它的父级函数，然而它的父级函数是 window，导致箭头函数的 this 指向 window，而不是 Vue 实例
- deep 管制是否要看这个对象外面的属性变动
- immediate 管制是否在第一次渲染是执行这个函数
vm.$watch() 的用法和 watch 回调相似
- vm.$watch(‘data 属性名 ’, fn, {deep: .., immediate: ..})
vm.$watch("n", function(val, newVal){console.log("n 变了");
},{deep: true, immediate: true})总结
- 如果一个数据须要通过简单计算就用 computed
- 如果一个数据须要被监听并且对数据做一些操作就用 watch
正文完
