计算属性是一个很邪门的东西，只要在它的函数里引用了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. Focal Loss 的前向与后向公式推导
			
    把Focal Loss的前向和后向进行数学化描述.本文的公式可能数学公式比较多.本文尽量采用分解的方式一步一步的推倒.达到能易懂的目的. Focal Loss 前向计算 其中 是输入的数据 是输入的标 ...
    
			
    2. 
						
  2. [转] org.scalatest.FunSuite Scala Examples - Scala FunSuite 测试的例子
			
    [From]  https://www.programcreek.com/scala/org.scalatest.FunSuite org.scalatest.FunSuite Scala Examp ...
    
			
    3. 
						
  3. Android字符串及字符串资源的格式化
			
    为什么要写这一篇随笔呢?最近做项目的过程中,遇到很多页面在要显示文本时,有一部分是固定的文本,有一部分是动态获取的,并且格式各式各样.一开始采取比较笨的办法,把他拆分成一个个文本控件,然后对不同的控件 ...
    
			
    4. 
						
  4. SymbolTable
			
    在ClassReader中有两个重要的属性,如下定义: /** A hashtable containing the encountered top-level and member classes, ...
    
			
    5. 
						
  5. Bunder: What does :require => nil in Gemfile mean?
			
    https://stackoverflow.com/questions/12200215/bunder-what-does-require-nil-in-gemfile-mean Require ni ...
    
			
    6. 
						
  6. 如果天空不死博客java阅读列表整理
			
    如果天空不死的主页https://home.cnblogs.com/u/skywang12345 下面是最近总结的Java集合(JDK1.6.0_45)相关文章的目录. 01. Java 集合系列01 ...
    
			
    7. 
						
  7. NSSM - the Non-Sucking Service Manager
			
    nssm is a service helper which doesn't suck. srvany and other service helper programs suck because t ...
    
			
    8. 
						
  8. spring cloud连载第二篇之Spring Cloud Config
			
    Spring Cloud Config Spring Cloud Config为分布式服务提供了服务侧和客户侧的外部配置支持.通过Spring Cloud Config你可以有一个统一的地方来管理所有 ...
    
			
    9. 
						
  9. [转]asp.net权限认证：HTTP基本认证（http basic）
			
    本文转自:http://www.cnblogs.com/lanxiaoke/p/6353955.html HTTP基本认证示意图 HTTP基本认证,即http basic认证. 客户端向服务端发送一个 ...
    
			
    10. 
						
  10. android  源码编译及其运行模拟器相关问题记录
			
    最近一直在看android源码相关的文档,包括编译源码,还有framework层的代码,本人很懒,一直没有写博客,今天想自己在编译一下源码,并且运行在模拟器中. 源码的版本不同,需要的jdk可能也有所 ...
    
			
    11.