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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
Javascript的闭包
Dec 31 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
js实现翻牌小游戏
Jul 31 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
Memcached常用命令以及使用说明详解
2013/06/27 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
如何用python免费看美剧
2020/08/11 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
公务员转正鉴定材料
2014/02/11 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript