computed之计算属性
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了computed之计算属性相关的知识,希望对你有一定的参考价值。
参考技术A(1) 计算属性的getter和setter
(2) 计算属性的缓存(对比computed和methods)
为什么要使用计算属性 :computed和methods看起来都可以实现我们的功能,但是计算属性会进行缓存,多次使用时计算属性只会调用一次,性能更高,所以优选使用计算属性。
vue实例属性之methods和computed
我们可以把同一函数放在methods或者computed中,区别在于computed有缓存,计算属性只有在它的相关依赖发生改变时才会重新求值,即数据改变才会执行函数。而methods每当触发重新渲染时,就会再次执行函数。
一、methods用法
<div id="J_app"> <p>{{ info }}</p> <button v-on:click="reverseText">逆转消息</button> <button @click="reverseText">v-on缩写,逆转消息</button> </div> var vapp = new Vue({ el: ‘#J_app‘, data: { info: ‘Hello Vue.js!‘ }, methods: { reverseText: function () { this.info = this.info.split(‘‘).reverse().join(‘‘) } } })
二、computed用法
1、默认用法
<div id="J_app"> <p>{{ info }}</p> <p>{{ reverseText }}</p> </div> var vapp = new Vue({ el: ‘#J_app‘, data: { info: ‘Hello Vue.js!‘ }, computed: { reverseText: function () { return this.info.split(‘‘).reverse().join(‘‘) } } })
2、自定义set
computed默认只有get,可以自定义一个set。
<div id="J_app"> <p>{{ info }}</p> <p>{{ reverseText }}</p> </div> var vapp = new Vue({ el: ‘#J_app‘, data: { info: ‘Hello Vue.js!‘ }, computed: { reverseText: { get:function () { return this.info.split(‘‘).reverse().join(‘‘) }, set:function () { this.info = this.info.split(‘‘).reverse().join(‘‘) +‘设置后‘ } } } }) vapp.reverseText ="learn vue from today";
以上是关于computed之计算属性的主要内容,如果未能解决你的问题,请参考以下文章