Vue中watch和computed的区别

watch - 适合监听发生变化的属性值&＃xff0c;重在发生变化&＃xff0c;第一次监听会返回 undefined
computed - 不进行触发条件也会监听到属性值

1. 监听某个属性&＃xff0c;被监听的属性值发生变化就会执行函数
   函数执行后&＃xff0c;可以获取到 newVal 和 oldVal

&＃39;userInfo.userType&＃39;: (newVal, oldVal) {doSome()
}


2. 监听整个对象&＃xff0c;每个属性值的变化都会执行handler
   属性值发生变化后&＃xff0c;handler执行后获取的 newVal 值和 oldVal 值是一样的

userInfo: {// 每个属性值发生变化就会调用这个函数handler(newVal, oldVal) {console.log(&＃39;oldVal:&＃39;, oldVal)console.log(&＃39;newVal:&＃39;, newVal)},// 立即处理 进入页面就触发immediate: true,// 深度监听 属性的变化deep: true
}


Watch
watch用于观察和监听页面上的vue实例&＃xff0c;当你需要在数据变化响应时&＃xff0c;执行异步操作&＃xff0c;或高性能消耗的操作&＃xff0c;那么watch为最佳选择
computed
可以关联多个实时计算的对象&＃xff0c;当这些对象中的其中一个改变时都会触发这个属性
具有缓存能力&＃xff0c;所以只有当数据再次改变时才会重新渲染&＃xff0c;否则就会直接拿取缓存中的数据。