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 相关文章推荐
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
详解JavaScript 的变量
Mar 08 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
vue实现扫码功能
Jan 17 Javascript
使用vant的地域控件追加全部选项
Nov 03 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
ThinkPHP采用模块和操作分析
2011/04/18 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
php压缩文件夹最新版
2018/07/18 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
jQuery find和children方法使用
2011/01/31 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
web.py获取上传文件名的正确方法
2014/08/26 Python
python实现中文文本分句的例子
2019/07/15 Python
python匿名函数的使用方法解析
2019/10/10 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
库房管理员岗位职责
2014/03/09 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
签约仪式策划方案
2014/06/02 职场文书
综治维稳工作汇报
2014/10/27 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
亲情作文之母爱
2019/09/25 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python
Oracle表空间与权限的深入讲解
2021/11/17 Oracle