Vue 中 computed 和 watch 的原理？
Vue是一个流行的JavaScript框架，具有响应式数据绑定和渐进式渲染的特点。Vue中的计算属性(computed)和观察者(watch)是两个重要的数据绑定功能，本文将详细探讨它们的原理及使用方法。
- 计算属性(computed)
在Vue中，计算属性是一个函数，用于根据已有的数据和条件来生成新的数据。计算属性的原理是基于Vue中的依赖追踪，即当一个计算属性依赖的数据发生变化时，计算属性会自动重新计算，然后更新视图。
在Vue的实例中，定义计算属性的方式如下：
new Vue({
data: {
message: 'Hello Vue.js'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
在上面的代码中，我们定义了一个计算属性reversedMessage，它依赖于message的值，并将其反转。接下来，当我们在模板中引用reversedMessage时，Vue会自动追踪message的变化，并重新计算reversedMessage的值。
<div id="app">
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
</div>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
在上面的代码中，当我们改变message的值时，reversedMessage会自动更新。
vm.message = 'Hello World'
- 观察者(watch)
Vue中的观察者是一个函数，用于当被观察的数据发生变化时执行特定的操作。观察者的原理是基于Vue中的响应式系统，即当一个被观察的数据发生变化时，Vue会通知依赖它的组件或属性。
在Vue的实例中，定义观察者的方式如下：
new Vue({
data: {
message: 'Hello Vue.js'
},
watch: {
message: function (newVal, oldVal) {
console.log('message changed from', oldVal, 'to', newVal)
}
}
})
在上面的代码中，我们定义了一个观察者watch，它监视message的值的变化。当message的值发生变化时，观察器会自动调用函数，并将新旧值作为参数传递。
例如，在下面的示例中，当我们改变message的值时，观察器会自动调用函数，并输出相关信息。
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js'
},
watch: {
message: function (newVal, oldVal) {
console.log('message changed from', oldVal, 'to', newVal)
}
}
})
vm.message = 'Hello World'
上述示例输出的控制台信息为：message changed from Hello Vue.js to Hello World。
综上所述，Vue中的计算属性和观察者都是非常重要的数据绑定功能，可以帮助开发人员更加高效地管理和维护数据。计算属性是基于依赖追踪的原理，可以自动响应数据变化并重新计算，而观察者则是基于响应式系统的原理，可以自动调用函数并执行特定操作。对于Vue开发人员来说，正确使用这两个功能可以大大提高开发效率和代码质量。
