vue2.0中的计算属性
计算属性是一个很邪门的东西，只要在它的函数里引用了data中的某个属性，当这个属性发生变化的时候，函数仿佛可以嗅探到这个变化，并自动重新执行。
上代码会源源不断的打印出a的值。如果希望b依赖data中的x而变化，只需要保证b函数中有this.x即可。如果函数中没有出现data中的属性，那么无论data中的属性怎么变，b对应的函数一次也不会执行。
Vue是怎么知道计算属性在函数中引用了哪个data属性？这个函数又是怎么知道data属性变了，而且只关心它内部引用的那个属性，别的都不管？官方文档是这么说的：
我们简单模拟实现一个计算属性：a变化时，b自动跟着变化。
var obj = {
a:0,
b:function(){
var a = this.a;
return a + 1;
}
}
由于涉及到Vue的双向绑定的原理，如果你对此不熟，最好先看看《Vue.js双向绑定的实现原理》
程序执行过程：
1、首先b属性会被处理为存取器属性，访问b就会触发其get函数；
2、处理计算属性a时，会执行a的函数，从而会执行this.b，于是触发b的get函数；
3、b的get函数会添加b属性的依赖项，而刚才在处理计算属性过程中，a已经作为依赖项被传给了一个全局变量，b的get函数会检测到这个全局变量，并将其添加到自身的订阅者列表中；
4、对b赋予新的值时，会触发其set函数，set函数中会遍历执行订阅者，a的值就是在这个时候更新的。
再看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two-way-data-binding</title>
</head>
<body>
<script>
var Dep = null; function defineReactive(obj, key, val) {
var deps = [];
Object.defineProperty(obj, key, {
get: function () {
if (Dep) {
deps.push(Dep);
}
return val;
},
set: function (newval) {
val = newval;
deps.forEach(func => func());
}
})
} function defineComputed(obj, key, func) {
func = func.bind(obj);
var value;
Dep = function () {
value = func();
};
value = func();
Dep = null;
Object.defineProperty(obj, key, {
get: function () {
return value;
}
})
} var obj = {};
defineReactive(obj, 'a', 0);
defineComputed(obj, 'b', function () {
var a = this.a;
return a + 1;
})
</script>
</body>
</html>
通过对存取器属性、闭包和观察者模式的综合运用，Vue巧妙的实现了计算属性。可以看出，Vue响应式系统的核心理念是“依赖”，DOM节点之所以随数据而变化，是因为节点依赖于数据，计算属性之所以随数据而变化，是因为计算属性依赖于数据，做好响应式的关键就在于处理好依赖关系。
参考文章：https://skyronic.com/blog/vuejs-internals-computed-properties
vue2.0中的计算属性的更多相关文章
- vue2.x中使用计算属性巧妙的实现多选框的“全选”
接下来我会以一个购物车的例子,来演示如果借助计算属性,精巧的实现多选框的全选功能.当然,有全选,自然对应的也还有取消全选. 以下这张gif图,就是最终的实现效果: 第一步,针对购物车每一个商品进行设置 ...
- Vue2.0 中，“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？（转）
https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...
- Vue - 在v-repeat中使用计算属性
1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...
- vue2.0动态绑定图片src属性值初始化时报错
在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <te ...
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- Vue中的计算属性与$watch
计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...
- vue2.0中使用less
第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方 ...
- vue2.0中使用sass
第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...
- Vue2.0中的路由配置
Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...
随机推荐
- Wi-Fi科普讲稿
Wi-Fi 从入门到?? 组员:deleted 什么是Wi-Fi Wi-Fi 在中文里又称作"无线热点",是Wi-Fi联盟制造商的商标做为产品的品牌认证,是一个创建于IEEE 80 ...
- 二、利用继承修改OPENERP 的一个模块
问题记录1: No modules named 'xx' 原因: __init__.py 文件命名错误! 问题记录2: XMLSyntaxError: Attribute name redefined ...
- (转)Python 字符串格式化 str.format 简介
原文:https://www.cnblogs.com/wilber2013/p/4641616.html http://blog.konghy.cn/2016/11/25/python-str-for ...
- (转)oracle linux 7 安装oracle 12c
原文:https://blog.csdn.net/jiuyun1986/article/details/53589446 https://blog.csdn.net/admin_root1/artic ...
- (转)Oracle与DB2在数据库高可用技术上的相同与差异探讨
原文:http://www.talkwithtrend.com/Article/178339 数据库建设过程中,高可用是每一个企业数据中心数据库建设过程中至关重要的一个关注点,直接关系到业务连续性和稳 ...
- C# 文件读写系列二
读取文件原则上非常简单,但它不是通过FileInfo和DirectoryInfo来完成的,关于FileInfo和DirectoryInfo请参考C# 文件操作系列一,在.Net Framework4. ...
- 关闭mac自带apache的启动。
关闭mac自带apache的启动. sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 如果哪天 ...
- Maven 打包的时候报 Failed to execute goal org.codehaus.mojo:native2ascii-maven-plugin
错误信息: [ERROR] Failed to execute goal org.codehaus.mojo:native2ascii-maven-plugin:1.0-alpha-1:native2 ...
- 基于 Annotation 的 Spring AOP 权限验证方法的实现
1. 配置 applicationContext 在 Spring 中支持 AOP 的配置非常的简单,只需要在 Spring 配置文件 applicationContext.xml 中添加: < ...
- window常用的快捷键
1.win+r打开运行命令 2.appwiz.cpl打开程序面板,进行程序的安装.卸载 输入win+r打开运行命令,输入appwiz.cpl 3.services.msc打开服务,一般用于启动或者关闭 ...