文章目录
- watch 实现
- computed 实现
watch 实现
<div id="root">
姓：<input type="text" v-model="firstName"><br/><br/>
名：<input type="text" v-model="lastName"><br/><br/>
全名：<span>{{fullName}}</span>
</div>
new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三',
fullName: '张-三'
},
watch: {
firstName(val) {
this.fullName = val + this.lastName
},
lastName(val) {
this.fullName = this.firstName + val
}
}
})
computed 实现
<div id="root">
姓：<input type="text" v-model="firstName"><br/><br/>
名：<input type="text" v-model="lastName"><br/><br/>
全名：<span>{{fullName}}</span>
</div>
new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三',
},
computed: {
fullName() {
return this.firstName + '-' + this.lastName
}
}
})
现在看起来是计算属性更方便，但某些情况只有监视属性才能做到，比如当修改姓或名后延迟一秒种改变
watch: {
firstName(val) {
setTimeout(() => {
this.fullName = val + '-' + this.lastName
}, 1000);
},
lastName(val) {
this.fullName = this.firstName + '-' + val
}
}
而计算属性不可以，因为计算属性是靠返回值的，不能开启异步任务
另外还有一个细节，这里的定时器是箭头函数，因为定时器是js管理的，而不是vm，如果写普通函数，setTimeout 里的 this 是 window，如果写成箭头函数，就没有了自己的 this，会向外找，就变成了 vm
firstName(val) {
setTimeout(() => {
this.fullName = val + '-' + this.lastName
}, 1000);
},
computed 和 watch 之间的区别
1、computed 能完成的功能，watch 都可以完成
2、watch 能完成的功能，computed 不一定能完成，例如: watch 可以进行异步操作
两个重要的小原则
1、所被Vue管理的函数，最好写成普通函数，这样 this 的指向才是 vm 或组件实例对象
⒉、所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、promise的回调函数等），最好写成箭头函数，这样 this 的指向才是 vm 或组件实例对象。
