极乐门资源网 Design By www.ioogu.com

在使用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

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“Vue.js计算机属性computed和methods方法详解”

暂无Vue.js计算机属性computed和methods方法详解的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。