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组件 默认设置如下: ...
随机推荐
- archlinux中gedit乱码的解决方法
转自https://blog.csdn.net/oFAITH12345/article/details/24962545 例如:gedit key.c --encoding=GB18030 打开文件后 ...
- phpspreadsheet开发手记
坑安装简单示例通过模板来生成文件释放内存单元格根据索引获取英文列设置值合并单元格居中显示宽度设置批量设置单元格格式直接输出下载自动计算列宽函数formula单元格变可点击的超链 PhpSpreadsh ...
- Mac下在Shell终端下使用open快速打开窗口文件夹
Ubuntu下可以使用nautilus打开,但是在Mac替代的是open. 打开当前路径的窗口 oepn . 打开其他窗口 open /dirname 其实open不只可以打开窗口,应用同样支持. 关 ...
- 【html5】cookie、sessionStorage、localStorage
第四条补充: cookie中包含domain和path,所有向该域下该路径发送的请求头部都会包含这个cookie: session浏览器关闭后消失,只能由最初给对象存储数据的页面访 ...
- Git学习系列之Git基本操作推送项目（图文详解）
前面博客 Git学习系列之Git基本操作提交项目(图文详解) 如果完成到一定程度,那么可以推送到远端在线仓库. 推送之前,请确保你已经设置了全局的 user.name 和 user.email, 如果 ...
- 解决Linux下pcieport 0000:00:1c.5问题导致的系统根目录/磁盘空间不足
最近刚换了笔记本,拿到本后在win10基础装上Ubuntu 16.04双系统,有个问题是每次关机都会报一堆pcie问题,并且经常没声音,声音问题通过上一篇文章暂时解决,然后就没在意了,可是几天后出现系 ...
- Mac 安装tensorflow
一. 安装 TensorFlow谷歌的官网和开源项目都有介绍各个系统的安装和使用(官网:https://www.tensorflow.org/install git: https://github.c ...
- CentOS/Linux 解决 SSH 连接慢
现在连接linux服务器一般都是使用SSH远程连接的方式.最近新装了一台服务器,发现telnet时速度很快,ping时一切也正常,但SSH连接的时候却很慢.经过网上资料查询,大致是有以下几种原因: 1 ...
- Winform为窗体增加快捷键
1. 定义窗体的 xxx_KeyDown(object sender, EventArgs e) 2. 书写快捷键的代码: //这里的xxx代表你的窗体名 private void xxxx_KeyD ...
- 13 Timer和TimerTask
下面内容转载自:http://blog.csdn.net/xieyuooo/article/details/8607220 其实就Timer来讲就是一个调度器,而TimerTask呢只是一个实现了ru ...