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 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
javascript深入理解js闭包
Jul 03 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
php实现的双色球算法示例
2017/06/20 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
PHP 裁剪图片
2021/03/09 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
Java工程师面试集锦之Spring框架
2013/06/16 面试题
工作疏忽检讨书
2014/01/25 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
JS中如何优雅的使用async await详解
2021/10/05 Javascript
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL