vue中,computed用法和介绍
在Vue.js中,computed
是一个特性,它允许你创建基于其他属性动态计算的属性。computed
属性的主要优势在于,它们会被缓存,因此只有其依赖项改变时才会重新计算。
以下是一个例子:
new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName;
}
}
});
在上述例子中,我们定义了一个computed
属性fullName
,并且它根据firstName
和lastName
的值进行计算。当你在模板中使用{{ fullName }}
,它将显示两个名字的组合。
注意的是,computed
属性也可以包含setter方法:
new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName;
},
set: function (newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
});
在这个例子中,当你尝试设置fullName
的值时(比如说this.fullName = 'Baz Quux'
),它将触发set函数,该函数将newValue
分割,并对firstName
和lastName
进行更新。
computed
属性是Vue.js中强大的特性之一,用于处理复杂的逻辑和高效地更新界面。