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静态界面之左二级菜单右表单表格，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
这篇文章主要介绍了Vue 使用iframe引用html页面实现vue和html页面方法的调用操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
本篇文章主要介绍了Vue自定义指令封装节流函数的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
vue的人都知道,vue3里面使用了proxy替换了defineProperty,本文主要介绍了Vue3用Proxy替代defineProperty的原因,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了vue中分割线的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了Vue snippets插件原理与使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
这篇文章主要介绍了vue多层嵌套路由,结合实例形式分析了vue.js多层嵌套路由的概念、原理及相关操作技巧,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了Vue开发环境中修改端口号的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
vue在mounted中window.onresize不生效问题及解决
这篇文章主要介绍了vue中在mounted中window.onresize不生效问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Element UI是一个为Vue.js开发的优秀 UI 组件库,它提供了丰富的组件,包括表单组件,Element UI的表单组件可以帮助开发者快速构建和管理表单,提高开发效率,在实际开发中,我们经常需要在表单组件之间进行通信,本文将详细介绍Element UI表单组件如何进行通信2025-02-02
最新评论