vue3 computed 和 watch 的差异

差异"/>

vue3 computed 和 watch 的差异

目录

前言

用法

computed

watch

代码

理解

高质量的使用

Vue.js作为一种现代化的前端框架，提供了丰富的特性来帮助开发者构建高效和响应式的用户界面。在这其中，computed 和 watch 是两个非常重要的选项，它们都用于处理数据的变化，但它们的用法、原理以及适用的场景都有很大的差异。接下来，我们将详细介绍这两者的区别，以及如何在Vue中高效地使用它们。

前言

在Vue应用中，数据的响应式变化是其核心特性之一。computed 和 watch 都提供了一种机制来观察和响应Vue实例上数据的变化。然而，它们的使用方式、原理以及适用的场景都有明显的差异。computed 通常用于计算派生状态，而 watch 更适用于观察数据的变化并执行异步操作或较大的计算。理解它们之间的区别，可以帮助我们更合理地设计我们的应用，使其更加高效和易于维护。

用法

computed

computed 是基于它们的依赖进行缓存的。只有在相关依赖发生改变时它们才会重新求值。这意味着只要依赖保持不变，多次访问 computed 属性将立即返回之前的计算结果，而不必再次执行函数。

computed 的常见用法是在模板内进行复杂计算：

new Vue({data: {a: 1,b: 2},computed: {sum: function () {return this.a + this.b;}}
});

在上面的例子中，sum 是一个计算属性，依赖于 data 对象中的 a 和 b。只要 a 或 b 改变，sum 就会自动更新。

watch

watch 提供了一种方式，允许我们执行异步操作 (访问一个API，限制执行频率)，并在我们观察的数据发生变化时，执行更多的操作。

new Vue({data: {question: '',answer: 'Questions usually contain a question mark. ;)'},watch: {// 如果 `question` 发生改变，这个函数就会运行question: function (newQuestion) {this.answer = 'Waiting for you to stop typing...'this.getAnswer()}},methods: {getAnswer: _.debounce(function () {if (this.question.indexOf('?') === -1) {this.answer = 'Questions usually contain a question mark. ;)'return}this.answer = 'Thinking...'// 略},// 这是我们为用户停止输入等待的毫秒数500)}
})

在这个例子中，我们使用 watch 选项来观察 question 数据的变化，并执行一些异步操作或者较大计算。

代码

下面是一个具体的例子，展示了 computed 和 watch 的用法：

<template><div><input v-model="number"><p>原始数字：{{ number }}</p><p>数字的平方（computed）：{{ squaredNumber }}</p><button @click="findSquareRoot">计算数字的平方根（watch）</button><p>数字的平方根（watch）：{{ squareRoot }}</p></div>
</template><script>
export default {data() {return {number: 0,squareRoot: 0};},computed: {squaredNumber() {return this.number * this.number;}},watch: {number(newValue) {this.findSquareRoot();}},methods: {findSquareRoot() {this.squareRoot = Math.sqrt(this.number);}}
}
</script>

在这个例子中，我们有一个文本输入框，用户可以输入数字。我们使用 computed 属性来计算这个数字的平方，并使用 watch 来计算这个数字的平方根。

理解

computed 和 watch 的核心区别在于它们如何跟踪依赖和触发更新。

• computed 更适合用在模板中需要进行复杂计算的场景，它会缓存计算结果，只有当其依赖发生变化时才会重新计算。这使得 computed 非常高效。

• watch 则更适用于观察某个值的变化并执行异步操作或开销较大的操作。它不会缓存结果，每次触发都会执行指定的回调函数。

高质量的使用

为了确保我们高效地使用 computed 和 watch，我们需要遵循一些最佳实践：

1. 合理选择：根据具体场景合理选择使用 computed 还是 watch。如果你需要基于某个状态的派生状态，使用 computed；如果你需要在某个状态变化时执行异步或开销较大的操作，使用 watch。

2. 避免复杂的 computed 属性：虽然 computed 属性是缓存的，但是不代表你可以在 computed 属性中执行非常复杂的操作。过于复杂的 computed 属性会使得组件的可维护性变差。

3. 合理利用 watch 的配置项：watch 提供了一些配置项，比如 deep 和 immediate。deep 允许你在观察对象时深度观察其内部的变化，而 immediate 允许你在添加观察者时立即触发回调。

通过遵循这些最佳实践，我们可以确保我们的Vue应用运行得更加顺畅，并且更易于维护。