Vue.js计算机属性computed和methods方法详解
更新时间：2019年10月12日 08:31:49 作者：love_pgme
这篇文章主要为大家详细介绍了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 处理跨域问题，感兴趣的朋友一起看看吧2021-09-09
本文主要介绍了根据用户所购买服务的不同，有不同的页面展现。文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了Vue2 响应式系统之深度响应，文章基于Vue2 响应式系统的相关资料展开对Vue2 深度响应的介绍，需要的小伙伴可以参考一下2022-04-04
这篇文章主要介绍了Vue-cli打包后部署到子目录下的路径问题说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue 设置路由的登录权限的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
最近学习vue.js有一段时间了，使用vue做了一套后台管理系统，其中使用最多就是递归组件，也因为自己对官方文档的不熟悉使得自己踩了不少坑，所以今天写出来和大家一起分享。有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
这篇文章主要介绍了解决v-model双向绑定失效的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue3中的hook简单封装，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了使用vue-cli打包过程中的步骤以及问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了一次Vue中computed没有触发的原因以及排查经历,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论