🙂博主:锅盖哒
🙂文章核心: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
,我们需要遵循一些最佳实践:
-
合理选择:根据具体场景合理选择使用
computed
还是watch
。如果你需要基于某个状态的派生状态,使用computed
;如果你需要在某个状态变化时执行异步或开销较大的操作,使用watch
。 -
避免复杂的
computed
属性:虽然computed
属性是缓存的,但是不代表你可以在computed
属性中执行非常复杂的操作。过于复杂的computed
属性会使得组件的可维护性变差。 -
合理利用
watch
的配置项:watch
提供了一些配置项,比如deep
和immediate
。deep
允许你在观察对象时深度观察其内部的变化,而immediate
允许你在添加观察者时立即触发回调。
通过遵循这些最佳实践,我们可以确保我们的Vue应用运行得更加顺畅,并且更易于维护。文章来源:https://www.toymoban.com/news/detail-719986.html
文章来源地址https://www.toymoban.com/news/detail-719986.html
到了这里,关于vue3 computed 和 watch 的差异的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!