computed
在computed中定义的每一个计算属性,都会被缓存起来,只有当计算属性里面依赖的一个或多个属性变化了(一对多),才会重新计算当前计算属性的值。
watch
是属性监听器,一般用来监听属性的变化,并做一些操作
<div>
<button @click="ClickName"></button>
</div>
<script>
var vm = new Vue({
data: function () {
return {
firstName: 'lu',
lastName: '小鹿'
}
},
methods: {
ClickName() {
this.fullName = "新的fullName"
}
},
// computed
computed: {
getName() {
return this.firstName + "+" + this.lastName // 默认只有gettter属性
},
fullName: {
get() {
return this.firstName + this.lastName
},
// 只有当computed监测的fullName值变化的时候 set才回被调用
set(newValue) {
// newValue是"lu小鹿"
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
deep: true, // 深度监听对象变化时执行的逻辑
immediate: true // 初始化时立即执行一次回调
}
},
// watch
watch: {
getName(newValue, oldVal) {
},
// 深度监听
getName2: {
handler(newValue, oldVal) {
this.fullName = newValue
},
deep: true,
immediate: true
},
// 案例使用
'$route.path': function (newValue, oldValue) {
if (newValue == "/login") {
console.log('进入登录页面')
} else if (newValue == '/') {
console.log("/")
}
}
}
})
</script>
上面的例子会觉得好像computed的setter属性与watch的功能有点类似;它并不能完全替代 watch 的作用。watch 提供了更广泛和灵活的数据变化响应机制,适用于更复杂的数据处理逻辑和异步操作;用 computed 的 setter 适合当你需要确保某个值在修改时满足特定条件或触发某些操作,但它并不适合用来执行异步操作或复杂逻辑,因为 setter 函数应该尽量保持简单和快速。