Vue中计算属性computed的示例解读


Posted in Javascript onJuly 26, 2017

计算属性

表达式是非常便利的,但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护,所以引入了计算属性computed,将复杂的逻辑放入计算中进行处理,同时computed有缓存功能,防止复杂计算逻辑多次调用引起的性能问题。

computed原理

computed的属性reversedMessage在data中会有一个对我们不可见的cacheReversedMessage属性对应

cacheReversedMessage的值是根据其绑定的data中的message来决定的 获取reversedMessage会返回

cacheReversedMessage的值 message更新之后会立马调用reversedMessage的get方法去给cacheReversedMessage赋值(无论reversedMessage在dom中是否使用) cacheReversedMessage的值发生变化时,相应的dom也会发生变化

注意:computed中的属性和data中的属性名字不能相同,一个属性要么在data里;要么在computed里,computed里的属性要跟data中的配合使用,当data属性发生变化时才会调用get方法更新reversedMessage的值,否则get方法即使返回一个随机数,reversedMessage的值也不会变。

示例代码

computed相当于属性的一个实时计算,如果实时计算里关联了对象,那么当对象的某个值改变的时候,同事会出发实时计算。

比如:

<body id="content">

 <parent :childrens="childrens"></parent>

</body>

<!-- 这个测试主要想证明: 对于计算属性里如果关联对象,即使对象不是组件作用域内的,当对象在外部改变了某个属性,同样会出发计算属性的方法-->

<script>

 var parent = Vue.extend( {

 props: {

  childrens: ''

 },

 template: '<div >{{age}}</div>',

 data: function() {

  return {

  name: '',

  age: 18

  };

 },

 computed: {

  age: function() {

  return this.childrens.age +10;

  }

 },

 created: function() {

  var _parent = this.$parent;

  this._set = {};

  this._set = _parent; 

 }

 } );

 var vm = new Vue( {

 el: 'body',

 data: {

  childrens: {

  name: '小强',

  age: 20,

  sex: '男'

  }

 },

 components: {

  'parent': parent

 }

 } );

 vm.$data.childrens.age = 10;

</script>

vm.$data.childrens.age这个值改变的时候,动态触发computed里的age属性计算,最后显示到页面的结果是:20。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
cypress测试本地web应用
Jun 01 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 #Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 #Javascript
js实现图片轮播效果学习笔记
Jul 26 #Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 #Javascript
vue上传图片组件编写代码
Jul 26 #Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 #Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 #Javascript
You might like
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
python分析nignx访问日志脚本分享
2015/02/26 Python
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
python列表推导式入门学习解析
2019/12/02 Python
python合并多个excel文件的示例
2020/09/23 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
通报表扬范文
2015/01/17 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
公司地址变更通知
2015/04/25 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书