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的一点理解的更多相关文章

  1. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  2. 详解Vue中的computed和watch

    作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...

  3. Vue 中的 computed 和 methods

    Vue 中的 computed 和 methods 使用 computed 性能会更好. 如果你不希望缓存,可以使用 methods 属性.

  4. vue中methods,computed,filters,watch的总结

    08.28自我总结 vue中methods,computed,filters,watch的总结 一.methods methods属性里面的方法会在数据发生变化的时候你,只要引用了此里面分方法,方法就 ...

  5. 浅尝 Vue 中的 computed 属性 与 watch

    对于 computed 的理解: ①.computed 用来监控自己定义的变量,该变量不在 data 里面声明,直接在 computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其 ...

  6. Vue中的computed属性

    阅读Vue官网的过程中,对于计算属于与监听器章节的内容有点理解的不清晰:https://cn.vuejs.org/v2/guide/computed.html. 后来上网查询了资料,结合官网的说明,总 ...

  7. 八、Vue中的computed属性

    看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...

  8. 十三、Vue中的computed属性

    以下抄自https://www.cnblogs.com/gunelark/p/8492468.html 看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲 ...

  9. Vue中的computed和watch

    看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...

随机推荐

  1. How to resolve the SQL error “cannot connect to WMI provider”

    当你试图打开SQL Server Configuation Manager时发现如下错误: “cannot connect to WMI provider. You do not have permi ...

  2. .net 将xml转换成DateSet

    /// <summary> /// 将XML字符串转换成DATASET /// </summary> /// <param name="xmlStr" ...

  3. Android编程心得-JSON使用心得(二)

    在Android开发中,我们经常会用到JSON来与网络数据进行交互,下面我来介绍如何对JSON数据进行解析与制造 1.当我们需要对如下JSON串进行制造时: { "download" ...

  4. 火狐下<a>标签里嵌套的<select>不能选的bug

    今天遇到了这个问题,网上一找就找到原因了:在狐火下<a>标签里嵌套的<select>不能选 可是我查找这个问题过程中依然饶了一些时间,原因是在<a>标签没有写hre ...

  5. symfony2 登录验证(转自http://www.newlifeclan.com/symfony/archives/300)

    注意:如果你需要为存储在某种数据库中的用户做一个登录表单,那么你应该考虑使用FOSUserBundle,这有助于你建立你的User对象,还为您提供了常见的登录.注册.忘记密码的路由和控制器. 在此文章 ...

  6. ecshop中404错误页面设置

    在ecshop系统当中,比如你随意将商品详细页面的地址中的ID修改为一个不存在的商品ID,ecshop会自动跳转到首页.ecshop在这方面做得非常的差,甚至导致了很多的站不被搜索引擎收录.最模板提供 ...

  7. CoreData概略

    CoreData概略 分类: IOS开发2013-10-25 16:19 178人阅读 评论(0) 收藏 举报 CoreData是IOS对数据进行对象化管理的一种高效方式,提供了对数据的增.删.查.改 ...

  8. 痛并快乐的造轮子之旅:awk访问数据库之旅

    俺是一枚悲催的数据统计程序员,从先辈的手里接收了这样的代码: #! /bin/sh alias statdb="mysql -h 192.168.1.1 -u stat -paaa stat ...

  9. 对163k地方门户网站系统QQ互联功能修改

    163k地方门户网站QQ互联申请时遇到的问题: "禁止开发商强制用户重新注册或绑定其他帐号" 原因是用户登录完QQ还需要注册帐号或者绑定原有帐号 163k地方门户网站的QQ互联登录 ...

  10. 自定义栈类型,具有找到站内最小元素的min函数 ,且min(),pop(),push()函数的时间复杂度为O(1)

    基本思想: // 借助一个辅助栈,入栈时,若新元素比辅助栈栈顶元素小,则直接放入辅助站 // 反之,辅助站中放入次小元素(即辅助栈栈顶元素)====保证最小元素出栈时,次小元素被保存 static c ...