计算属性是一个很邪门的东西，只要在它的函数里引用了data中的某个属性，当这个属性发生变化的时候，函数仿佛可以嗅探到这个变化，并自动重新执行。

  1.  

上代码会源源不断的打印出a的值。如果希望b依赖data中的x而变化，只需要保证b函数中有this.x即可。如果函数中没有出现data中的属性，那么无论data中的属性怎么变，b对应的函数一次也不会执行。

Vue是怎么知道计算属性在函数中引用了哪个data属性？这个函数又是怎么知道data属性变了，而且只关心它内部引用的那个属性，别的都不管？官方文档是这么说的：

我们简单模拟实现一个计算属性：a变化时，b自动跟着变化。

  1. var obj = {
  2.   a:0,
  3.   b:function(){
  4.     var a = this.a;
  5.     return a + 1;
  6.   }
  7. }

由于涉及到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的值就是在这个时候更新的。

再看代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>Two-way-data-binding</title>
  6.   </head>
  7.   <body>
  8.     <script>
  9.       var Dep = null;
  10.  
  11.       function defineReactive(obj, key, val) {
  12.         var deps = [];
  13.         Object.defineProperty(obj, key, {
  14.           get: function () {
  15.             if (Dep) {
  16.               deps.push(Dep);
  17.             }
  18.             return val;
  19.           },
  20.           set: function (newval) {
  21.             val = newval;
  22.             deps.forEach(func => func());
  23.           }
  24.         })
  25.       }
  26.  
  27.       function defineComputed(obj, key, func) {
  28.         func = func.bind(obj);
  29.         var value;
  30.         Dep = function () {
  31.           value = func();
  32.         };
  33.         value = func();
  34.         Dep = null;
  35.         Object.defineProperty(obj, key, {
  36.           get: function () {
  37.             return value;
  38.           }
  39.         })
  40.       }
  41.  
  42.       var obj = {};
  43.       defineReactive(obj, 'a', 0);
  44.       defineComputed(obj, 'b', function () {
  45.         var a = this.a;
  46.         return a + 1;
  47.       })
  48.     </script>
  49.   </body>
  50. </html>

通过对存取器属性、闭包和观察者模式的综合运用，Vue巧妙的实现了计算属性。可以看出，Vue响应式系统的核心理念是“依赖”，DOM节点之所以随数据而变化，是因为节点依赖于数据，计算属性之所以随数据而变化，是因为计算属性依赖于数据，做好响应式的关键就在于处理好依赖关系。

参考文章：https://skyronic.com/blog/vuejs-internals-computed-properties

vue2.0中的计算属性的更多相关文章

  1. vue2.x中使用计算属性巧妙的实现多选框的“全选”

    接下来我会以一个购物车的例子,来演示如果借助计算属性,精巧的实现多选框的全选功能.当然,有全选,自然对应的也还有取消全选. 以下这张gif图,就是最终的实现效果: 第一步,针对购物车每一个商品进行设置 ...

  2. Vue2.0 中，“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？（转）

    https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...

  3. Vue - 在v-repeat中使用计算属性

    1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...

  4. vue2.0动态绑定图片src属性值初始化时报错

    在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <te ...

  5. Vue2.0中的transition组件

    组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...

  6. Vue中的计算属性与$watch

    计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...

  7. vue2.0中使用less

    第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方 ...

  8. vue2.0中使用sass

    第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...

  9. Vue2.0中的路由配置

    Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...

随机推荐

  1. Codeforces Round #555 (Div. 3) E. Minimum Array 【数据结构 + 贪心】

    一 题面 E. Minimum Array 二 分析 注意前提条件:$0 \le  a_{i} \lt n$ 并且 $0 \le  b_{i} \lt n$.那么,我们可以在$a_{i}$中任取一个数 ...

  2. E - Guess the Root 拉格朗日差值法+交互

    题目传送门 题意:告诉你存在一个未知项系数最高为10的$f(x)$,你最多可以有50次询问,每次询问给出一个$x'$,系统会返回你$f(x')$的值,你需要猜一个$x''$,使得$f(x'')=0$, ...

  3. 一些很好用但不常用的css属性总结 （持续中......）

    在各种框架横行的9012,感觉我们学前端的都变得浮躁了很多,放一张最近流行的神图: 唉,扯远了, 还是整理我的东西吧,路漫漫其修远兮,吾将上下而求索! 1, position:sticky; 粘性定位 ...

  4. LARTC

    大牛的博客 howto ,however, is simplify. another space ip link list ip address show ip route show route -n ...

  5. ator自动生成mybatis配置和类信息

    generator自动生成mybatis的xml配置.model.map等信息: 1.下载mybatis-generator-core-1.3.2.jar包.        网址:http://cod ...

  6. Windows Git Bash命令行下创建git仓库并更新到github

    大二的时候就听过老师说有一个叫git的版本管理工具,当时只是听老师说说而已,也没有去使用它,因为当时用过svn,就感觉自己没多少东西需要git管理. 最近几天,我经常在开源中国看别人的帖子,看到别人对 ...

  7. Cloudera Manager安装之利用parcels方式（在线或离线）安装3或4节点集群（包含最新稳定版本或指定版本的安装）（添加服务）（Ubuntu14.04）（五）

    前期博客 Cloudera Manager安装之Cloudera Manager 5.6.X安装(tar方式.rpm方式和yum方式) (Ubuntu14.04) (三) 如果大家,在启动的时候,比如 ...

  8. 安卓加固之so文件加固

    一.前言 最近在学习安卓加固方面的知识,看到了jiangwei212的博客,其中有对so文件加固的两篇文章通过节加密函数和通过hash段找到函数地址直接加密函数,感觉写的特别好,然后自己动手实践探索s ...

  9. angular2自学笔记（三）---ng2选项卡

    学习了这些概念就能简单的描述一个选项功能的选项卡按钮: 数据:1.数组:实例化一个数组的类,如果想要使用这个类中的数据,需要在组件中 使用一个公共属性来暴漏这个类如 heroes=HEROES;con ...

  10. [译]用R语言做挖掘数据《一》

    介绍 一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou,密码shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环境,实验中会用到程序: 1. ...