computed
计算属性的意思，它会根据你所以来的数据动态显示新的计算结果。
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
计算属性的结果会被缓存，只有依赖的响应式property变化才会重新计算。
- 示例
new Vue({
data() {
return {
user: {
name: "potato",
price: "33"
}
};
},
computed: {
displayName(){
return this.user.name+':'+this.user.price
}
},
template: `
<div>
{{user.name}}:{{user.price}}
<hr>
{{displayName}}
</div>
`
}).$mount("#app");
显示的值均为potato：33
使用目的
因为如果模板中放着很多逻辑式会让模板本身过于笨重，会对页面可维护性造成影响。computed刚好适用于这种情况。
watch
观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式，用一个函数取代。
- 示例
let vm = new Vue({
data: {
n: 0,
obj: {
a: "a"
}
},
template: `
<div>
{{n}}
<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: {
obj:{
handler: function () {
console.log("obj 变了")
},
deep: true
// deep 属性设定在任何被侦听的对象的property改变时都要执行handler的回调，不论其被嵌套多深
},
"obj.a": function() {
console.log("obj.a 变了");
}
}
}).$mount("#app");
vm.$watch('n',function(){console.log('n出现了')},{immediate:true})
// immediate 属性设定该回调将会在侦听开始之后被立即调用
- deep 是否监听对象内的变化
- immediate 是否在第一次渲染执行这个函数 注意事项
不应该使用箭头函数来定义 watcher函数。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例。
searchQuery: newValue => this.updateAutocomplete(newValue)
this.updateAutocomplete === undefined // true
参考来自 Vue-文档
