Vue.js计算机属性computed和methods方法详解
在使用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与watch（5），包括了Vue.js计算属性computed与watch（5）的使用技巧和注意事项，需要的朋友参考一下 在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当
-
本文向大家介绍vue中计算属性（computed）、methods和watched之间的区别，包括了vue中计算属性（computed）、methods和watched之间的区别的使用技巧和注意事项，需要的朋友参考一下 前言 本文主要给大家介绍了关于vue中计算属性（computed）、methods和watched之间的区别，分享出来供大家参考学习，下面来一起看看详细的介绍： 计算属性 和普通属
-
计算属性将函数声明为属性，Ember.js在需要时自动调用计算属性，并在一个变量中组合一个或多个属性。 下表列出了计算属性的属性 - S.No. 属性和描述 1 链接计算属性 链接计算属性用于与一个或多个预定义的计算属性聚合。 2 Dynamic Updating 在调用计算属性时动态更新它们。 3 Setting Computed Properties 通过使用setter和getter方法帮助
-
本文向大家介绍Vue.js每天必学之计算属性computed与$watch，包括了Vue.js每天必学之计算属性computed与$watch的使用技巧和注意事项，需要的朋友参考一下 在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式
-
本文向大家介绍深入浅析Vue.js中 computed和methods不同机制，包括了深入浅析Vue.js中 computed和methods不同机制的使用技巧和注意事项，需要的朋友参考一下 在vue.js中，有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候，methods要加上（） 2.我们可以使用 methods 来替代 computed，效
-
主要内容：实例 1,实例 2,computed vs methods,实例 3,computed setter,实例 4计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子： 实例 1 <div id="app"> {{ message.split('').reverse().join('') }} </div> 实例 1 中模板变的很复杂起来，也不容易看懂理解。 接下来我们看看使用了计算属性的实例： 实例 2 <div id="app">