vue属性_computed(计算属性)methods(方法)

1.计算属性

2.计算方法

3.深入理解计算属性

当需要使用大量逻辑时，若直接放在模板中会使得模板过重且难以维护，如下例

<div id="app">{{ message.split('').reverse().join('')}}
</div>

var vm = new Vue({el: '#app',data: {message: "It's a joke!"}
});

【结果】这里是想要显示变量message的反转字符串，而且，一旦我们想要在模板中多次使用翻转字符串时，会更加麻烦，所以，当我们处理复杂逻辑时，应该使用计算属性

1.计算属性

计算属性是Vue配置对象中的属性，使用方式如下：

<div id="app"><!-- 计算属性的值可以像data数据一样，直接使用 -->{{ reverseMsg }}
</div>

var vm = new Vue({el: '#app',data: {message: "It's a joke!"},computed:{reverseMsg: function () {//返回的值就是计算属性的值return this.message.split('').reverse().join('');}}
});

可以看到，reverseMsg 的值取决于message的值，所以当message更改时，reverseMsg 的值也会随之更改

2.计算方法

计算属性的功能也可以用方法实现，如下例

<div id="app">{{ reverseMsg() }}
</div>

var vm = new Vue({el: '#app',data: {msg: "It's a joke!"},methods: {reverseMsg: function(){return this.msg.split('').reverse().join('');}}
});

【注】虽然在表达式中调用方法和计算属性效果相同，但是二者有本质的区别：计算属性是基于响应式依赖进行缓存的，计算属性的值一直存于缓存中，只要它依赖的data数据不改变，每次访问计算属性，都会立即返回缓存结果，而不是再次执行函数。而方法则是每次触发重新渲染，调用方法总会再次执行函数。

当使用方法时，每一次页面重新渲染，对应的方法就会重新执行一次，如：

<div id="app"><p>{{ say }}</p><p>{{ reverseMsgM() }}</p><p>{{ reverseMsgC }}</p>
</div>

var vm = new Vue({el: '#app',data: {msg: "It's a joke!",say: "What a wonderful day!"},computed: {reverseMsgC() {console.log("执行计算属性")return this.msg.split('').reverse().join('');}},methods: {reverseMsgM: function(){console.log("执行方法")return this.msg.split('').reverse().join('');}}
});
vm.say = 'Life is a shit!'

【结果】由下图可以得知，reverseMsgM 比 reverseMsgC 多执行一次，因为当改变 say 的值时，页面会重新渲染，方法就会重新执行，而计算属性并没有这种现象。在实际使用时，当改动的数据与这个函数没有关系时，我们是不想让它重新执行的，如果函数内的逻辑很复杂，对性能也是一种消耗。

【问题】 为什么要进行缓存？

假设有一个计算属性A，它需要遍历一个巨大的数组并且做巨大的计算。然后我们需要使用到这个计算属性A，如果没有缓存，我们就会再次执行A的函数，这样性能开销就变得很大了。

3.深入理解计算属性

计算属性除了写成一个函数外，还可以写成一个对象，对象内部有两个属性，get和set，这两个属性均为函数，二者的 this 均自动绑定Vue实例，写法如下：

const vm = new Vue({el: '#app',computed: {fullName: {get() {//代码},set() {//代码}}}
})

当我们去获得某一个计算属性时，就会执行get函数，如下例：

<div id="app">{{ fullName }}
</div>

const vm = new Vue({el: '#app',data: {firstName: 'Tony',lastName: 'Stark'},computed: {fullName: {get() {console.log('执行get函数');return this.firstName + ' ' + this.lastName ;}}}
})

【结果】

set 函数是可选项，在给计算属性重新赋值时会执行，所传参数为重新设定的值

const vm = new Vue({el: '#app',data: {firstName: 'Tony',lastName: 'Stark'},computed: {fullName: {get() {console.log('执行get函数');return this.firstName + ' ' + this.lastName ;},set(name) {console.log('执行set函数');}}}
})
vm.fullName = 'Morgan';

【结果】

【注】由上面结果可以知道，即使给计算属性赋了值，计算属性也不会改变，只有当依赖的响应式属性变化了，计算属性才会重新计算，如下例

const vm = new Vue({el: '#app',data: {firstName: 'Tony',lastName: 'Stark'},computed: {fullName: {get() {console.log('执行get函数');return this.firstName + ' ' + this.lastName ;},set(name) {console.log('执行set函数');this.firstName = name;}}}
})
vm.fullName = 'Morgan';

【结果】