计算属性是一个很邪门的东西，只要在它的函数里引用了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. Go语言string包详解
			
    strings包实现了用于操作字符的简单函数. 查找操作 判断给定字符串s中是否包含子串substr, 找到返回true, 找不到返回false func Contains(s, substr str ...
    
			
    2. 
						
  2. linux 命令 htop & 重定向 top， bashrc文件
			
    最近在用linux服务器跑程序,有几条linux命令还蛮重要的,总结一下: 1. 直接跑代码: python test.py 2. 若想程序在后台跑,即使本地和服务器断开也能运行: nohup pyt ...
    
			
    3. 
						
  3. vsftpd文件虚拟用户搭建
			
    关于vsftpd的原理这里就不多说了,下面红色部分有单独标出,突出显示,意思是这里的东西有额外的配置,全文的配置一定要跟着第二步的配置来,不要过程中随便改变参数,除非你看得懂,好了直接上配置过程 1. ...
    
			
    4. 
						
  4. Unity3D实现随机播放背景音频
			
    1.先在第一人称下新建空白物体,命名“audio” 2.在audio中加入Audio Source 3.在第一人称组件里添加Audio Liistener和Audio脚本 4.脚本中添加代码 usin ...
    
			
    5. 
						
  5. mysql启动不起来
			
    在刚编译安装完成mysql,启动mysql时报了下面错误: /etc/init.d/mysqld start Starting MySQL... ERROR! The server quit with ...
    
			
    6. 
						
  6. dp--最大区间和变形-cf-1155D
			
    dp--最大区间和变形-cf-1155D D. Beautiful Array time limit per test 2 seconds memory limit per test 256 mega ...
    
			
    7. 
						
  7. Sublime Text 3插件收集
			
    0.Package Control 这个是必须装的,就不多解释了 1.ConvertToUTF8 支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的插件. 2.B ...
    
			
    8. 
						
  8. Django中管理并发操作
			
    上一篇我们说了,如何在Django中进行事务操作,数据的原子性操作 涉及了事务操作,我们不得不考虑的另一个问题就是:并发操作 还是那个用户转账的操作 我们使用事务操作解决的操作中途服务器宕机问题 但是 ...
    
			
    9. 
						
  9. Run-Time Check Failure #0 - The value of ESP was not properly saved across a function call.    调用函数约定不同
			
    Run-Time Check Failure #0 - The value of ESP was not properly saved across a function call.  This is ...
    
			
    10. 
						
  10. 基于Flume做FTP文件实时同步的windows服务。
			
    需求:做一个windows服务,实现从ftp服务器实时下载或者更新文件到本地磁盘. 功能挺简单的.直接写个ftp工具类用定时器跑就能搞定,那我为什么不用呢? 别问,问就是我无聊啊,然后研究一下Flum ...
    
			
    11.