VUE之computed和watch应用与区别

目录：

• computed
• watch

computed

计算结果并返回，只有当被计算的值发生改变时才会触发
(即：计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算)

new Vue({
el: '#id',
template: `<div>
<span>Name: {{name}}<span>
</div>`,
data: {
firstName: 'Leo',
lastName: 'Alan'
},
computed: {
name () {
return `${this.firstName} + ${this.lastName}`
}
}
})

watch

监听某一个值，当被监听的值发生变化时，执行对应的操作
(与computed的区别是，watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等，而computed适用于计算已有的值并返回结果)

new Vue({
el: '#id',
template: `<div>
// ...
</div>`,
data: {
firstName: 'Leo',
lastName: 'Alan',
obj1: {
a: 0
}
},
watch: {
// 监听firstName,当firstName发生变化时就会执行该函数
firstName () {
// 执行需要的操作...
// 注:初始化不会执行，只有当被监听的值(firstName)发生变化时才会执行
},

// 监听lastName
lastName: {
handler (newName, oldName) {
// 执行需要的操作...
},
immediate: true // true: 初始化时就会先执行一遍该监听对应的操作
},

obj1: {
handler () {
// 执行需要的操作...
},
deep: true // 该属性默认值为false.
// 当被监听的值是对象,只有deep为true时,对应属性的值(obj1.a)发生变化时才能触发监听事件，但是这样非常消耗性能
},

// 监听对象具体的属性， deep就不需要设置为true了
'obj1.a': {
handler () {
// 执行需要的操作...
}
}

}
})

注意： 不要在computed和watch中修改被依赖(或者被监听)的值，这样可能会导致无限循环