Vue.js 是一款流行的前端框架，其提供了许多方便的功能，其中包括了 watch 和 computed。这两个功能都是用于监听数据变化的，但是它们的实现方式和使用场景有所不同。在本篇文章中，我们将探讨 watch 和 computed 的性能比较，并介绍它们在 Vue.js 中的应用指南。
watch
watch 是一个 Vue.js 实例的一个属性，用于监听数据的变化。当数据发生变化时，watch 会自动执行相应的回调函数。watch 的实现方式是通过监听数据的变化来触发回调函数。
下面是一个 watch 的例子：
watch: { inputValue: function (newValue, oldValue) { console.log('inputValue changed from ' + oldValue + ' to ' + newValue) } }
在上面的例子中，我们监听了一个名为 inputValue 的数据变化，并定义了一个回调函数。当 inputValue 的值发生变化时，该回调函数就会被触发。
虽然 watch 可以监听任意数据的变化，但是它的性能并不是很好。因为 watch 每次都会监听整个数据对象，所以在数据量较大的情况下，watch 的性能会受到很大的影响。
computed
computed 也是一个 Vue.js 实例的一个属性，它用于计算一个新的属性值。computed 的实现方式是通过监听数据的变化来触发计算属性的 getter 函数。
下面是一个 computed 的例子：
computed: { reversedValue: function () { return this.inputValue.split('').reverse().join('') } }
在上面的例子中，我们定义了一个名为 reversedValue 的计算属性，它通过对 inputValue 进行计算得到一个新的值。computed 会自动监听 inputValue 的变化，并在需要的时候重新计算 reversedValue 的值。
与 watch 不同，computed 只会在需要的时候重新计算属性值，因此它的性能要比 watch 好得多。如果我们需要对一个数据进行复杂的计算，那么使用 computed 会比使用 watch 更加高效。
应用指南
在实际开发中，我们应该根据具体的场景选择使用 watch 还是 computed。
如果我们需要监听一个数据的变化，并在变化时执行一些操作，那么使用 watch 是比较合适的。例如，我们可以使用 watch 监听一个输入框的变化，并在输入框内容变化时向服务器发送请求。
如果我们需要对一个数据进行复杂的计算，并在计算结果发生变化时更新视图，那么使用 computed 是比较合适的。例如，我们可以使用 computed 计算一个列表的排序结果，并在排序结果发生变化时重新渲染列表。
除了 watch 和 computed，Vue.js 还提供了许多其他的功能，例如 methods 和 props。在实际开发中，我们应该根据具体的场景选择合适的功能，并结合使用，以达到最佳的性能和开发效率。
示例代码
下面是一个使用 watch 和 computed 的示例代码：
-- -------------------- ---- ------- ---- --------- ------ ----------- --------------------- ----------- ------ -- ------------- ------ ------ -------- --- ----- --- ------- ----- - ----------- -- -- ------ - ----------- -------- ---------- --------- - ----------------------- ------- ---- - - -------- - - -- - - --------- - -- --------- - -------------- -------- -- - ------ -------------------------------------------- - - -- ---------展开代码
在上面的示例代码中，我们定义了一个输入框和一个用于显示反转后的输入框内容的文本框。使用 watch 监听输入框内容的变化，并使用 computed 计算反转后的输入框内容。当输入框内容发生变化时，watch 会触发回调函数，而 computed 会重新计算反转后的输入框内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d172dea941bf7134314688
