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 URL编码和解码使用说明
Apr 12 Javascript
JavaScript小技巧 2.5 则
Sep 12 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
javascript常用代码段搜集
Dec 04 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
基于Vue的侧边目录组件的实现
Feb 05 Javascript
JS继承最简单的理解方式
Mar 31 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
让你彻底掌握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中全局变量global的使用演示代码
2011/05/18 PHP
PHP时间和日期函数详解
2015/05/08 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
js中更短的 Array 类型转换
2011/10/30 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
js读取配置文件自写
2014/02/11 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
Python正则表达式介绍
2012/08/06 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
Python如何实现爬取B站视频
2020/05/20 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
综治维稳工作汇报
2014/10/27 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers