Vue.js计算机属性computed和methods方法详解
2019-11-04 18:06
1821 查看
在使用Vue.js时,会发现调用menthods里的方法也可以与计算机属性起到同样的作用,如:
<div id="app"> <!--利用计算机属性实现逆向文本的效果--> <input type="text" v-model="text" property="请输入要逆转的文本/> <!--逆转的方法--> <h3>计算机属性逆转:{{reversedText}}</h3> <!--通过调用methods里的方法也可以与计算机属性起到同样的作用--> <!--注意,方法要带'()'--> <h3>方法逆转:{{reversedTextM()}}</h3> </div> <script> var app = new Vue({ el: '#app', data: { text: '123,456' }, methods: { reversedTextM: function () { return this.text.split(',').reverse().join(','); }, }, computed: { reversedText: function () { //翻转文本的方法 //这里的this指向当前Vue实例 return this.text.split(',').reverse().join(','); } } }); </script>
在methods里定义了一个方法实现了和计算机属性相同的效果,甚至该方法还可以接受参数,使用起来更灵活,既然使用methods就可以实现,那为什么还需要计算机属性呢?原因就是计算机属性是基于它的依赖缓存的。一个计算机属性所依赖的数据发生变化时,它才会重新赋值,所以text只要不改变,计算机属性也就不会更新,如:
computed: { now: function () { return Date.now(); } }
这里的Date.now()不是响应式依赖,所以计算机属性now不会更新。但是methods则不同,只要重新渲染,它就会被调用,因此函数也会被执行。
总结: 使用计算机属性还是methods取决于你是否需要缓存,当遍历大数组和做大量计算时,应当使用计算机属性,除非你不希望得到缓存。
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- vue.js 计算属性及计算属性(computed)、methods、watched三者区别
- 【Vue】零基础学习Vue: 第13课 Watch侦听属性、计算属性缓存computed、方法methods的区别
- vue 计算属性computed和观察watch 和方法methods
- vue.js——computed属性与methods属性的区别
- Vue的计算属性computed、方法methods、侦听器watch的区别
- js面向对象之公有、私有、静态属性和方法详解
- js基础之DOM中document对象的常用属性方法详解
- 详解vue.js下引入百度地图jsApi的两种方法
- 基于js对象,操作属性、方法详解
- [js高手之路]原型对象(prototype)与原型链相关属性与方法详解
- Vue官方推荐AJAX组件axios.js使用方法详解与API
- Vue之computed(计算属性)详解get()、set()
- js基础之DOM中元素对象的属性方法详解
- vue.js中的computed和methods和watch之间的区别
- 实例分析Vue.js中 computed和methods不同机制
- vue.js重学之旅(2)——vue.js里的数据操作(data,methods,computed,watch)
- Vue中computed(计算属性)、methods、watch的区别
- vue-learning:20 - js - 区别:filters / data / computed / watch / methods
- vue.js计算属性(computed)
- Vue.js第三天学习笔记(计算属性computed)