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 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
js编写简单的计时器功能
Jul 15 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
vue项目中axios使用详解
Feb 07 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
react 原生实现头像滚动播放的示例
Apr 21 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
php中session使用示例
2014/03/29 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
Firefox outerHTML实现代码
2009/06/04 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
深入研究React中setState源码
2017/11/17 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
laypage.js分页插件使用方法详解
2019/07/27 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
本科生的职业生涯规划范文
2014/01/09 职场文书
文明村创建实施方案
2014/03/27 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL