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: ...
随机推荐
- (转)用来理解Java的8个图表
很多时候,一张图比你说 1000 个字能更有效的说清楚一个问题.我们列举了 8 个关于 Java 语言的图表,或许可以让你对 Java 有着更深入的认识. 1.字符串不变性(String Immuta ...
- oracle 11g 64位安装32位客户端和PL/SQL
转自:http://www.360doc.com/content/14/0602/10/4903283_382949382.shtml 这个你需要安装一个32位的oracle客户端才能使用plsq ...
- asp.net mvc 删除栏目、栏目下又有子栏目的处理方式
- AngularJS的$http服务的应用
$http有很多参数和调用方法,本文只记录比较常用的应用及参数. $http 服务:只是简单封装了浏览器原生的XMLHttpRequest对象,接收一个参数,这个参数是一个对象,包含了用来生成HTTP ...
- POJ 1002 - 487-3279 STL
先把不是标准格式的字符串变成标准格式再输出出现两次以上的标准串和出现的次数不然输出 "No duplicates." #include <iostream> #incl ...
- Light oj 1030 概率DP
D - Discovering Gold Crawling in process... Crawling failed Time Limit:2000MS Memory Limit:32768 ...
- hdu 2438
Problem Description Mr. West bought a new car! So he is travelling around the city. One day he comes ...
- USB联机线编程接口(API)
USB联机线编程接口(API) 2013-10-19 本页面的文字允许在知识共享 署名-相同方式共享 3.0协议和GNU自由文档许可证下修改和再使用. 关键字:USB隔离线.USB点对点通讯.USB通 ...
- java 编码转换
在网络中爬取到的数据,编码可能与当前编译器的编码不相同,而导致可能产生显示乱码的问题.那么如何将网络的编码,转换为当前编译器认可的编码(一般为UTF-8),就是个问题了. 主要使用了两个方法: Str ...
- 关于TP的RBAC的使用
如果你是一个TP的重度使用者的话,请自动略过笔者以下文字 权限管理我在成为一个开发者1年半内,接触过2种,一种就是数学方式 比如我们文件夹权限的755这种权限管理的方式,这种二进制的权限管理的方式 无 ...