Vue computed计算属性的使用方法


Posted in Javascript onJuly 14, 2017

computed

computed:相当于method,返回function内return的值赋值在html的DOM上。但是多个{{}}使用了computed,computed内的function也只执行一次。仅当function内涉及到Vue实例绑定的data的值的改变,function才会从新执行,并修改DOM上的内容。

computed和method的对比

<div id="example">
 {{ message.split('').reverse().join('') }}
</div>

这个是vue官网一直拿来作为例子的代码。在{{}}可以很方便的放入单个表达式,但是当一个HTML的DOM里面存在太多的表达式,程序会变得很笨重难于维护。

html

<div id="app9">
  9、method与computed的区别<br/>
  fullName<br/>
  {{fullName}}<br/>
  fullName2<br/>
  {{fullName}}<br/>
  fullNameMethod<br/>
  {{getFullName()}}<br/>
  fullNameMethod2<br/>
  {{getFullName()}}<br/>
</div>

js

var app9 = new Vue({
  el: '#app9',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  methods:{
    getFullName:function () {
      console.log("执行了methods")
      return this.firstName+" " +this.lastName;
    }
  },
  computed: {
    fullName: function () {
      console.log("执行了computed")
      return this.firstName + ' ' + this.lastName
    }
  }
})
setTimeout('app9.firstName="Foo2"',3000);

控制台输出的结果

执行了computed
执行了methods
执行了methods
执行了computed
执行了methods
执行了methods 

由此可见使用computed,function只会执行一次。当Vue实例中绑定的data数据改变的时候,computed也相对应的只改变一次。

相同点:在以上代码中,两个p标签都会打印出同样被反转的Hello。

不同点:
使用了methods的:HTML中,每一个调用了Vue的methods的方法,都需要执行一遍reversedMessage()这个方法;
而使用computed计算属性的,只执行一遍将结果保存在缓存中。

computed和watch的对比

html

<div id="demo">{{ fullName }}</div>

js

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar',
 fullName: 'Foo Bar'
 },
 watch: {
 firstName: function (val) {
  this.fullName = val + ' ' + this.lastName
 },
 lastName: function (val) {
  this.fullName = this.firstName + ' ' + val
 }
 }
})
var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar'
 },
 computed: {
 fullName: function () {
  return this.firstName + ' ' + this.lastName
 }
 }
})

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

Javascript 相关文章推荐
Javascript miscellanea -display data real time, using window.status
Jan 09 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 #Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 #Javascript
Javascript中Promise的四种常用方法总结
Jul 14 #Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 #Javascript
详解VUE中v-bind的基本用法
Jul 13 #Javascript
vue通过watch对input做字数限定的方法
Jul 13 #Javascript
深入理解vue $refs的基本用法
Jul 13 #Javascript
You might like
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
Python self用法详解
2020/11/28 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
写给女朋友的道歉信
2014/01/08 职场文书
就业协议书
2014/09/12 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
单位租车协议书
2015/01/29 职场文书
学校社团活动总结
2015/05/07 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android