vue3computed和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，我们需要遵循一些最佳实践：

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

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

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

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