计算属性 vs 侦听属性
功能：计算属性是用来解决模板语法冗余的, 侦听器是用来侦听data中某一数据的变化(功能不同)
- 1. 计算属性有缓存机制, 侦听器没有
- 2. 计算属性不支持异步操作, 侦听器支持
- 3. 计算属性可以给vue新增属性, 侦听器必须是data中已有的属性
- 4. (可选)计算属性只要使用了就会立即执行一次, 侦听器默认只有当数据第一次改变才会执行, 需要设置immediate属性来控制是否立即执行一次
computed和watch之间的区别
- computed能完成的功能，watch都可以完成
- watch 能完成的功能，computed不一定能完成，例如watch可以进行异步操作
两个重要的小原则
- 所有被Vue管理的函数，最好写成普通函数，这样 this的指向才是vm或组件实例对象
- 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成箭头函数，这样this的指向才是vm或组件实例对象
computed 优先案例
<div id="app">
<input type="text" placeholder="firstName" v-model="firstName"><br />
<input type="text" placeholder="lastName" v-model="lastName"><br />
{{fullName}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '三',
fullName: '张 三'
},
watch: {
firstName(val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
</script>
上面代码是命令式且重复的。将它与计算属性的版本进行比较：（推荐写法）
<div id="app">
<input type="text" placeholder="firstName" v-model="firstName"><br />
<input type="text" placeholder="lastName" v-model="lastName"><br />
{{fullName}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '三'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
watch 异步操作，computed无法实现 案例
<div id="app">
<input type="text" placeholder="firstName" v-model="firstName"><br />
<input type="text" placeholder="lastName" v-model="lastName"><br />
延迟显示值：{{fullName}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '三',
fullName: '张 三'
},
watch: {
//修改后，延迟1秒处理
firstName(val) {
//this=vm
setTimeout(() => {
//this =>外层继承(vm)
this.fullName = this.firstName + ' ' + val
}, 1000);
},
lastName: function (val) {
setTimeout(() => {
this.fullName = this.firstName + ' ' + val
}, 1000);
}
}
})
</script>
