vue中的computed和watch区别

最新推荐文章于 2024-09-06 09:13:39 发布

转载最新推荐文章于 2024-09-06 09:13:39 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lvshaonan/p/8655466.html

文章标签：

#javascript #ViewUI

本文对比了Vue.js中的计算属性(computed)与观察者(watch)的使用方式及特点。计算属性能够根据依赖的数据变化自动更新，并且具有缓存特性，只有在其依赖项发生变化时才重新计算。观察者则适用于执行更复杂的操作，如数据获取等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue.js官方文档中看到computed和watch获取全名的一个例子：

 1 var var vm = new Vue({
 2   el: '#demo',
 3   data: {
 4     firstName: 'Foo',
 5     lastName: 'Bar',
 6     fullName: 'Foo Bar'
 7   },
 8   watch: {
 9     firstName: function (val) {
10       this.fullName = val + ' ' + this.lastName
11     },
12     lastName: function (val) {
13       this.fullName = this.firstName + ' ' + val
14     }
15   }
16 })

 1 var var vm = new Vue({
 2   el: '#demo',
 3   data: {
 4     firstName: 'Foo',
 5     lastName: 'Bar'
 6   },
 7   computed: {
 8     fullName: function () {
 9       return this.firstName + ' ' + this.lastName
10     }
11   }
12 })