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 confirm选择判断
Oct 18 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
JS简单随机数生成方法
Sep 05 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
中止javascript执行的方法
2014/02/14 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
Python实现统计文本文件字数的方法
2017/05/05 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
Python模块WSGI使用详解
2018/02/02 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Python如何合并多个字典或映射
2020/07/24 Python
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
安全标准化汇报材料
2014/02/03 职场文书
国培教师自我鉴定
2014/02/12 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
教师节校长致辞
2015/07/31 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
终止合同协议书范本
2016/03/22 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang
Win11快速关闭所有广告推荐
2022/04/19 数码科技
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android