Vue.js计算机属性computed和methods方法详解


Posted in Javascript onOctober 12, 2019

在使用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取决于你是否需要缓存,当遍历大数组和做大量计算时,应当使用计算机属性,除非你不希望得到缓存。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
微信小程序 教程之引用
Oct 18 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
微信小程序 导入图标实现过程详解
Oct 11 #Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 #Javascript
vue实现点击按钮下载文件功能
Oct 11 #Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 #Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 #Javascript
JsonProperty 的使用方法详解
Oct 11 #Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 #Javascript
You might like
一个比较简单的PHP 分页分组类
2009/12/10 PHP
基于jquery的滚动新闻列表
2010/06/19 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
python实现堆排序的实例讲解
2020/02/21 Python
python 6种方法实现单例模式
2020/12/15 Python
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
四年的大学生生活自我评价
2013/12/09 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
供货协议书范本
2014/04/22 职场文书
小学开学标语
2014/07/01 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
中考学习决心书
2015/02/04 职场文书
教师节简报
2015/07/20 职场文书
初中军训感言
2015/08/01 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js