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 相关文章推荐
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 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 中执行系统外部命令
2006/10/09 PHP
php中Smarty模板初体验
2011/08/08 PHP
php计算一个文件大小的方法
2015/03/30 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
javaScript实现滚动条事件详解
2020/03/24 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python使用matplotlib简单绘图示例
2018/02/01 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
超简单的Python HTTP服务
2019/07/22 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
党员先锋岗事迹材料
2014/05/08 职场文书
我爱我校演讲稿
2014/05/21 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书