计算属性是一个很邪门的东西，只要在它的函数里引用了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中的计算属性的更多相关文章
	

    
								
  1. vue2.x中使用计算属性巧妙的实现多选框的“全选”
		
    接下来我会以一个购物车的例子,来演示如果借助计算属性,精巧的实现多选框的全选功能.当然,有全选,自然对应的也还有取消全选. 以下这张gif图,就是最终的实现效果: 第一步,针对购物车每一个商品进行设置 ...
    
		
    2. 
						
  2. Vue2.0 中，“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？（转）
		
    https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...
    
		
    3. 
						
  3. Vue - 在v-repeat中使用计算属性
		
    1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...
    
		
    4. 
						
  4. vue2.0动态绑定图片src属性值初始化时报错
		
    在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <te ...
    
		
    5. 
						
  5. Vue2.0中的transition组件
		
    组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
    
		
    6. 
						
  6. Vue中的计算属性与$watch
		
    计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...
    
		
    7. 
						
  7. vue2.0中使用less
		
    第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方 ...
    
		
    8. 
						
  8. vue2.0中使用sass
		
    第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...
    
		
    9. 
						
  9. Vue2.0中的路由配置
		
    Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下:  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Jupyter Notebook & Spyder 常用快捷键
			
    Jupyter Notebook: 1. "shift + enter" notebook单元格内执行代码,并且自动跳至下一个的单元格 2. "tab" 自动补 ...
    
			
    2. 
						
  2. Hadoop Hive概念学习系列之hive三种方式区别和搭建、HiveServer2环境搭建、HWI环境搭建和beeline环境搭建（五）
			
     说在前面的话 以下三种情况,最好是在3台集群里做,比如,master.slave1.slave2的master和slave1都安装了hive,将master作为服务端,将slave1作为服务端. 以 ...
    
			
    3. 
						
  3. 标准差(bias) 方差(variance)
			
    偏差(bias) 偏差度量了学习算法的期望预测与真实结果的偏离程序, 即 刻画了学习算法本身的拟合能力 . 方差(variance) 方差度量了同样大小的训练集的变动所导致的学习性能的变化, 即 刻画 ...
    
			
    4. 
						
  4. WPF Lambda
			
    lambda简介 lambda运算符:所有的lambda表达式都是用新的lambda运算符 " => ",可以叫他,“转到”或者 “成为”.运算符将表达式分为两部分,左边指定 ...
    
			
    5. 
						
  5. Maven Oracle JDBC
			
    Oracle的JDBC驱动程序无法从公共仓库下载,你只能手动部署Oracle JDBC驱动程序到本地库.命令如下: mvn install:install-file -Dfile={ORACLE_HO ...
    
			
    6. 
						
  6. redis的数据类型（二）string类型
			
      下面讲解value,value包括String.List.Set.Sorted Set.Hash 一.String类型 1.string类型  String是最基本的类型,而且Stirng类型是二 ...
    
			
    7. 
						
  7. CUBA-Platform将全面助力中国开发者
			
    关注CUBA的伙伴们,你们好! 今天我们有新的进展告诉大家. 九月十五日到十六日CUBA平台事业部负责人(同时也是Haulmont公司合伙人)专程来到中国与CUBA中国团队进行了两天时间的交流.讨论. ...
    
			
    8. 
						
  8. （二）JNI方法总结
			
    整个网上就没看到一个关于JNI好点的文档,干脆自己写一份,以方便以后使用的时候查阅 1. 类操作 DefineClass jclass DefineClass(JNIEnv *env, jobject ...
    
			
    9. 
						
  9. Delphi下OpenGL2d绘图(06)-画图(多窗口、多视图、多个DC）
			
    一.前言 在学习OpenGL的过程中,发现很多函数都是全局的.前面几章中都是在一个窗口DC中画图,那么要在多个窗口画图,需要怎么处理呢?网上方法有多种,这里采用其中一种,利用wglMakeCurren ...
    
			
    10. 
						
  10. maven 错误：读取 xxx.jar 时出错；invalid LOC header (bad signature) 1 错误
			
    reqHeader:{Accept=text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8, Upgrade-Insecure- ...
    
			
    11.