一、前言
Vue.js 是一款轻量级前端框架，提供了许多方便的功能来开发交互式的用户界面。其中，Vue 的计算属性（Computed）和监听属性（Watch）是两个很有用的功能，本文将详细介绍它们的原理和使用方法。
二、计算属性（Computed）
Vue 的计算属性是指依赖其他属性计算得出的属性。它能够自动追踪依赖的属性，并在依赖发生变化时进行更新。计算属性可以看作是数据的一种衍生属性，它的定义通常如下：
computed: {
propertyName: function() {
// 依赖的数据的处理逻辑
return processedData;
}
}
计算属性的特点在于：不会重复计算，只有依赖的数据发生变化时才会重新计算。因此，计算属性非常适合处理复杂的逻辑和大量的数据运算。
三、监听属性（Watch）
Vue 的监听属性是指观察和响应 Vue 实例上的数据变动。通过监听属性，我们可以在数据变化时执行特定的函数或逻辑。监听属性的定义通常如下：
watch: {
propertyName: function(newVal, oldVal) {
// 数据变化时的处理逻辑
}
}
监听属性的特点在于：是异步执行的，即便数据变化非常频繁，监听函数也只会在下一个事件循环中执行。另外，监听属性还可以携带更多的参数，例如深度监听、立即执行等。
四、原理解析
4.1 计算属性的原理
计算属性使用起来非常方便，但是它的原理并不复杂。Vue 在初始化实例时会将计算属性转化为 getter 和 setter，并将 getter 作为属性的值。
当计算属性依赖的属性发生变化时，getter 函数会被重新执行，计算属性的值也会重新计算。而且，为了提高性能，Vue 还会进行缓存，只有当依赖的属性发生变化时才会重新计算。
4.2 监听属性的原理
监听属性的原理和计算属性类似，也是通过 getter 和 setter 来实现。当监听属性发生变化时，setter 函数会被调用，从而执行相应的处理逻辑。
不同之处在于，监听属性可以监听任意数据的变化，而不仅仅是计算属性。这意味着可以在监听函数中进行复杂的逻辑处理、Ajax 请求等操作。
五、实践示例
下面是一个实践示例，展示了如何在 Vue 中使用计算属性和监听属性。
<template>
<div>
<p>原始数据：{{ originData }}</p>
<p>计算属性：{{ computedData }}</p>
<p>监听属性：{{ watchedData }}</p>
<button @click="changeData">修改数据</button>
</div>
</template>
<script>
export default {
data() {
return {
originData: 'Hello World',
newData: 'Hello Vue'
};
},
computed: {
computedData() {
return this.originData + '!!!';
}
},
watch: {
originData(newVal, oldVal) {
console.log('originData 发生变化：', newVal, oldVal);
this.watchedData = newVal;
}
},
methods: {
changeData() {
this.originData = this.newData;
}
}
};
</script>
在这个示例中，我们定义了一个 originData 变量作为原始数据，并在模板中展示了原始数据、计算属性和监听属性。
当我们点击按钮修改数据时，originData 发生变化，计算属性和监听属性会相应地发生变化。在控制台中打印输出了监听属性的变化情况。
六、总结
本文详细介绍了 Vue 计算属性和监听属性的原理和使用方法。计算属性适用于处理复杂的逻辑和数据运算，它能够自动追踪依赖的属性并进行缓存；监听属性适用于观察和响应数据的变化，可以进行更复杂的处理逻辑。通过熟练掌握这两个功能，可以更加高效地开发 Vue 应用。
本文来自极简博客，作者：每日灵感集，转载请注明原文链接：Vue Computed 与 Watch 原理
