1.计算属性
模板不仅可以是简单的声明式逻辑,也可以是较为复杂的表达式。
<div id="element"> <!--简单声明--> {{message}} <!--复杂表达式,表示变量message的翻转字符串--> {{message.split(‘‘).reverse().join(‘‘)}} </id>
如果表达式过于复杂,将不利于直接理解。当需要在模板中多次引用message的翻转字符串时,操作也会变得繁琐。
所以,对于任何复杂逻辑,都应当使用计算属性。下面是基础例子:
<div id="element"> <p>message: {{message}}</p> <p>revered message:{{reversedMessage}}</p> </div>
var vm = new Vue({ el: ‘element‘, data:{ message: ‘Hello‘ }, computed:{ //计算属性的getter reversedMessage: function(){ // this 指向 vm 实例 return this.message.split(‘‘).reverse().join(‘‘); } } })
可以像绑定普通属性一样在模板中绑定计算属性。Vue知道vm.reversedMessage依赖于vm.message,因此当vm.message发生改变时,所有依赖vm.reversedMessage的绑定也会更新。
2.计算属性缓存vs方法
事实上,还可以通过在表达式中调用方法来达到同样的效果:
<div id="element"> <p>revered message:{{reversedMessage()}}</p> </div>
var vm = new Vue({ el: ‘element‘, data:{ message: ‘Hello‘ }, methods:{ reversedMessage: function(){ return this.message.split(‘‘).reverse().join(‘‘); } } })
在这里,我们将reversedMessage定义为一个方法而不是一个计算属性。两种方式的最终结果最终是完全相同的。然而,不同的是,计算属性是基于它们的依赖进行缓存的,只在相关依赖发生改变时它们才会重新求值。这就意味着只要message还没有发生改变,多次访问reversedMessage计算属性会立即返回之前的计算结果,而不必再次执行函数。
相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
3.计算属性vs侦听属性
Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动:侦听属性。
var vm = new Vue({ el: ‘#demo‘, data: { firstName: ‘Foo‘, lastName: ‘Bar‘, fullName: ‘Foo Bar‘ }, watch: { firstName: function (val) { this.fullName = val + ‘ ‘ + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ‘ ‘ + val } } })
开发人员很容易滥用watch,通常更好的做法是使用计算属性而不是命令式的watch回调。
var vm = new Vue({ el: ‘#demo‘, data: { firstName: ‘Foo‘, lastName: ‘Bar‘ }, computed: { fullName: function () { return this.firstName + ‘ ‘ + this.lastName } } })
4.计算属性的setter
计算属性默认只有getter,不过在需要时你也可以提供一个:
var vm = new Vue({ el: ‘#demo‘, data{ firstName:" ", lastName:" ", }, computed: { fullName:{ //getter get: function(){ return this.firstName + ‘ ‘ + this.lastName; }, //setter set: function(newValue){ var names = newValue.split(‘ ‘); this.firstName = names[0]; this.lastName = names[names.length - 1]; } } } })
现在,运行vm.fullName = ‘John Doe‘ 时,setter会被调用,vm.firstName和vm.lastName也会相应地被更新。
原文地址:https://www.cnblogs.com/lilihaishiluan/p/9877339.html
时间: 2024-10-14 09:17:54