vue中关于computed的一点理解
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 = 50;
</script>
当vm.$data.childrens.age这个值改变的时候，动态触发computed里的age属性计算，最后显示到页面的结果是：60。
vue中关于computed的一点理解的更多相关文章
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- 详解Vue中的computed和watch
作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...
- Vue 中的 computed 和 methods
Vue 中的 computed 和 methods 使用 computed 性能会更好. 如果你不希望缓存,可以使用 methods 属性.
- vue中methods,computed，filters,watch的总结
08.28自我总结 vue中methods,computed,filters,watch的总结 一.methods methods属性里面的方法会在数据发生变化的时候你,只要引用了此里面分方法,方法就 ...
- 浅尝 Vue 中的 computed 属性 与 watch
对于 computed 的理解: ①.computed 用来监控自己定义的变量,该变量不在 data 里面声明,直接在 computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其 ...
- Vue中的computed属性
阅读Vue官网的过程中,对于计算属于与监听器章节的内容有点理解的不清晰:https://cn.vuejs.org/v2/guide/computed.html. 后来上网查询了资料,结合官网的说明,总 ...
- 八、Vue中的computed属性
看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...
- 十三、Vue中的computed属性
以下抄自https://www.cnblogs.com/gunelark/p/8492468.html 看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲 ...
- Vue中的computed和watch
看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...
随机推荐
- NFinal 揭秘之控制器
用NFinal框架开发的项目类似于MVC的那种开发方式,有Controller层.Model层.View层,还包括表现层Web层,在NFinal开发的项目中真正执行的代码也就是Web层中的代码,Web ...
- ASP.NET优化性能方法之一禁用调试模式（转）
若要设置 ASP.NET 应用程序的调试模式,必须编辑应用程序的 Web.config 配置文件. 通常,ASP.NET 应用程序的 Web.config 文件与应用程序位于相同的 URL 位置上. ...
- cellForRowAtIndexPath方法不执行的那些坑
今天用到了uitableview,是xib形式的.不过cellForRowAtIndexPath方法死活不执行,检查了返回的row数量,section的数量,数据源,代理都没问题,不过cellForR ...
- Python爬虫——抓取贴吧帖子
抓取百度贴吧帖子 按照这个学习教程,一步一步写出来,中间遇到很多的问题,一一列举 首先, 获得 标题 和 贴子总数 # -*- coding:utf-8 -*- #!/user/bin/python ...
- CCFileUtils::getFileData疑惑
背景 这几天在使用cocos2d-x读取磁盘文件的时候,发现了CCFileUtils中一点不合理的地方,特此记录,以供研讨. 项目结构 ①我使用的是cocos2d-x 2.1.3版本,CCFileUt ...
- python进行base64编解码
[转] 直接上代码 import base64 fin = open(r"D:\2.zip", "rb") fout = open(r"D:\2.x. ...
- [Mugeda HTML5技术教程之18]如何在Android应用中使用Mugeda动画内容
1.简介 本文主要介绍如何在Android应用程序中使用Mugeda动画.Mgeda动画是标准HTML5格式的动画,在Android应用程序中可以使用WebView来加载Mugeda动画.动画内容本身 ...
- Java中的日期处理类
在Java中可以使用Date类和Calendar类来处理日期 但是Date类很多方法都过时了,推荐使用Canlendar类来处理日期,并对日期的格式化做了介绍.下面的部分将会逐一介绍 Date类 Ja ...
- mysql group_concat函数是有长度限制的
在表关联查询中,特别是一对多关系的表查询中,group_concat函数是很有用的一个函数,帮助我们减少对数据库查询的次数,减少服务器的压力. 但是今天使用group_concat函数查询数据库时,发 ...
- 下一代云计算模式：Docker正掀起个性化商业革命
作者: 吴宁川 来源: ITValue 发布时间: 2015-09-20 10:41 阅读: 10008 次 推荐: 16 原文链接 [收藏] 文/ITValue 记者吴宁川 从 20 ...