计算属性是一个很邪门的东西，只要在它的函数里引用了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. 索引（Awakening！）
			
    orz写个索引,方便日后复习和补充. 目前笔记还不是很多,而且写得比较烂,望各位到访的巨佬谅解. 大概可以算作一个归纳总结? ……没链接的还没开始写或者没写完,而且不知道什么时候才能写完(咕咕咕) 一 ...
    
			
    2. 
						
  2. java.lang.Exception: The server rejected the connection: None of the protocols were accepted
			
    solution for this is from comment for https://issues.jenkins-ci.org/browse/JENKINS-29616. The follow ...
    
			
    3. 
						
  3. DB2 体系结构 （进程模型）
			
    DB2 是众多关系型数据库中的一种, 关系型数据库还包括比较火的Oracle,MySQL 实例 数据库 DB2 进程模型 DB2 通过 db2start 命令启动数据库实例,即启动相应的进程和线程,并 ...
    
			
    4. 
						
  4. 【Kafka源码】Kafka启动过程
			
    一般来说,我们是通过命令来启动kafka,但是命令的本质还是调用代码中的main方法,所以,我们重点看下启动类Kafka.源码下下来之后,我们也可以通过直接运行Kafka.scala中的main方法( ...
    
			
    5. 
						
  5. Touch事件机制
			
    1.概念 Touch事件分发中有三个主角:Activity.ViewGroup和View.Activity的Touch事件事实上是调用它内部的ViewGroup的Touch事件,可以直接当成ViewG ...
    
			
    6. 
						
  6. android4.0 4.1 4.2 4.3 4.4新特性
			
    http://blog.csdn.net/kaiyang45/article/details/7179349 4.0 http://digi.tech.qq.com/a/20120628/000827 ...
    
			
    7. 
						
  7. Wireshark命令行工具tshark详解(含例子)-01
			
    Wireshark命令行工具tshark使用小记 1.目的 写这篇博客的目的主要是为了方便查阅,使用wireshark可以分析数据包,可以通过编辑过滤表达式来达到对数据的分析:但我的需求是,怎么样把D ...
    
			
    8. 
						
  8. 数据库分库分表（一）常见分布式主键ID生成策略
			
    主键生成策略 系统唯一ID是我们在设计一个系统的时候常常会遇见的问题,下面介绍一些常见的ID生成策略. Sequence ID UUID GUID COMB Snowflake 最开始的自增ID为了实 ...
    
			
    9. 
						
  9. win7下安装centos6.5后，开机无法进入选择双系统启动界面，只能启动centos的解决办法
			
    1.centos6.5下打开终端,进入/boot/grub ,vim grub.conf 将default=0 改为1,重启 2.重启后,又只能进入win7了.这个好解决.下载一个easyBCD,具体 ...
    
			
    10. 
						
  10. 基于ASP.Net Core学习Docker技术第一步：在CentOS7安装Docker平台
			
    Docker技术几年前就火了,伴随着今年来devops的流行,这项技术一直被技术社区追捧.提起Docker很容易被默认为是Linux平台下的技术,.NET的技术跟他似乎没有沾边,不过那是对非.NET  ...
    
			
    11.