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获取url上某个参数的方法
Nov 08 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
Javascript中For In语句用法实例
May 14 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
浅谈javascript错误处理
Aug 11 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
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+xslt在windows平台上
2006/10/09 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
php中socket通信机制实例详解
2015/01/03 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
一个实用的php验证码类
2017/07/06 PHP
基于php编程规范(详解)
2017/08/17 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
pycharm 安装JPype的教程
2019/08/08 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
Julep官网:美容产品和指甲油
2017/02/25 全球购物
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
高一生物教学反思
2014/01/17 职场文书
元旦晚会主持词
2014/03/24 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android