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 相关文章推荐
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 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学习之 认清变量的作用范围
2010/01/26 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
python实现挑选出来100以内的质数
2015/03/24 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
python实现横向拼接图片
2020/03/23 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
银行介绍信范文
2014/01/10 职场文书
服装店营销方案
2014/03/10 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
离职信范文
2015/06/23 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python