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 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
jquery监控数据是否变化(修正版)
Apr 12 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
浅谈js中的bind
Mar 18 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
vant 中van-list的用法说明
Nov 11 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入门速成教程
2007/03/19 PHP
php smarty的预保留变量总结
2008/12/04 PHP
php遍历数组的方法分享
2012/03/22 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
Javascript的匿名函数小结
2009/12/31 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
基本DOM节点操作
2017/01/17 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
微信小程序日历效果
2018/12/29 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
python如何将多个PDF进行合并
2019/08/13 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
产品售后服务承诺书
2014/05/21 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
2019学生会干事辞职信
2019/06/27 职场文书