我们来看看computed的实现。最简单的一个demo如下：

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<div id="app">

  <div name="test">{{computeA}}</div>

</div>

</body>

<script src="vue.js"></script>

<script type="text/javascript">

  new Vue({

  el: '#app',

  data: function () {

    return {

      firstName: 111,

      lastName: 222

    }

  },

  computed: {

    computeA: function () {

      return this.firstName + ' ' + this.lastName

    }

  },

  created(){

    setTimeout(

      () => {

        this.firstName = 333;

      },1000

    )

  }

})

</script>

</html>

　　

1在初始化实例创建响应式的时候。对options中的computed做了特殊处理：

function initComputed (vm, computed) {

  var watchers = vm._computedWatchers = Object.create(null);

  for (var key in computed) {

    var userDef = computed[key];

    var getter = typeof userDef === 'function' ? userDef : userDef.get;

    {

      if (getter === undefined) {

        warn(

          ("No getter function has been defined for computed property \"" + key + "\"."),

          vm

        );

        getter = noop;

      }

    }

    // create internal watcher for the computed property.

    watchers[key] = new Watcher(vm, getter, noop, computedWatcherOptions);//为每一个computed项目订制一个watcher

    // component-defined computed properties are already defined on the

    // component prototype. We only need to define computed properties defined

    // at instantiation here.

    if (!(key in vm)) {

      defineComputed(vm, key, userDef);

    } else {

      if (key in vm.$data) {

        warn(("The computed property \"" + key + "\" is already defined in data."), vm);

      } else if (vm.$options.props && key in vm.$options.props) {

        warn(("The computed property \"" + key + "\" is already defined as a prop."), vm);

      }

    }

function defineComputed (target, key, userDef) {

  if (typeof userDef === 'function') {

    sharedPropertyDefinition.get = createComputedGetter(key);

    sharedPropertyDefinition.set = noop;

  } else {

    sharedPropertyDefinition.get = userDef.get

      ? userDef.cache !== false

        ? createComputedGetter(key)

        : userDef.get

      : noop;

    sharedPropertyDefinition.set = userDef.set

      ? userDef.set

      : noop;

  }

  Object.defineProperty(target, key, sharedPropertyDefinition);

}

function createComputedGetter (key) {//构造该computed的get函数

  return function computedGetter () {

    var watcher = this._computedWatchers && this._computedWatchers[key];

    if (watcher) {

      if (watcher.dirty) {

        watcher.evaluate();//收集该watcher的订阅

      }

      if (Dep.target) {

        watcher.depend();//同一为这一组订阅再加上组件re-render的订阅（该订阅负责更新组件）

      }

      return watcher.value

    }

  }

}

　　组件初始化的时候。computed项和data中的分别建立响应式。data中的数据直接对属性的get,set做数据拦截。而computed则建立一个新的watcher，在组件渲染的时候。先touch一下这个computed的getter函数。将这个watcher订阅起来。这里相当于这个computed的watcher订阅了firstname和lastname。touch完后。Dep.target此时又变为之前那个用于更新组件的。再通过watcher.depend()将这个组统一加上这个订阅。这样一旦firstname和lastname变了。同时会触发两个订阅更新。其中一个便是更新组件。重新re-render的函数。

vue computed 源码分析的更多相关文章

  1. Vue.js 源码分析(六) 基础篇 计算属性 computed 属性详解

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护,比如: <div id="example">{{ messag ...

  2. Vue.js 源码分析(四) 基础篇 响应式原理 data属性

    官网对data属性的介绍如下: 意思就是:data保存着Vue实例里用到的数据,Vue会修改data里的每个属性的访问控制器属性,当访问每个属性时会访问对应的get方法,修改属性时会执行对应的set方 ...

  3. Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解

    先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...

  4. Vue.js 源码分析(十三) 基础篇 组件 props属性详解

    父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...

  5. Vue.js 源码分析(五) 基础篇 方法 methods属性详解

    methods中定义了Vue实例的方法,官网是这样介绍的: 例如:: <!DOCTYPE html> <html lang="en"> <head&g ...

  6. Vue.js 源码分析(三十二) 总结

    第一次写博客,坚持了一个多月时间,Vue源码分析基本分析完了,回过头也看也漏了一些地方,比如双向绑定里的观察者模式,也可以说是订阅者模式,也就是Vue里的Dep.Watcher等这些函数的作用,网上搜 ...

  7. Vue.js 源码分析(三十一) 高级应用 keep-alive 组件 详解

    当使用is特性切换不同的组件时,每次都会重新生成组件Vue实例并生成对应的VNode进行渲染,这样是比较花费性能的,而且切换重新显示时数据又会初始化,例如: <!DOCTYPE html> ...

  8. Vue.js 源码分析(三十) 高级应用 函数式组件 详解

    函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...

  9. Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解

    对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...

随机推荐

  1. vue项目工具文件utils.js javascript常用工具类，javascript常用工具类，util.js

    vue项目工具文件utils.js :https://blog.csdn.net/Ajaxguan/article/details/79924249 javascript常用工具类,util.js : ...

  2. LVM-扩容目录

    LVM LVM是一种源自Unix环境,在Linux上广泛应用的逻辑虚拟盘存储方案.借助LVM,可以在保证各个Linux目录分区稳定,又可以实现各目录存储资源灵活分配. 本文主要系统介绍Linux环境下 ...

  3. USACO Wifi Setup /// 贪心

    题目大意: 若在x处防止一个覆盖范围为r的wifi基站 可以覆盖 x-r 到 x+r 范围 花费为 A+B*r 给定n 给定n个奶牛的位置 求覆盖所有奶牛的最小费用 (可设置任意多个wifi基站) 贪 ...

  4. java虚拟机规范(se8)——java虚拟机的编译(二)

    3.3 算术运算 java虚拟机通常在操作数栈上进行算术运算(例外情况是iinc指令,它直接增加一个局部变量的值).例如下面的align2grain()方法,它的作用是将int值对齐到2的指定次幂: ...

  5. JS获取图片的原始宽度和高度，兼容IE7,8

    naturalWidth和naturalHeight 可以直接获取img的原始宽高,而innerHight,innerWith只是获取图片所占容器盒子的宽高. // 封装function getNat ...

  6. 安装FTP

    yum install vsftpd -y cd /etc/vsftpd/ touch login.txt vim login.txt db_load -T -t hash -f /etc/vsftp ...

  7. 使用WdatePicker时间插件简单的控制页面上两个时间选择的前后范围

    很多时候我们在一个交互的页面上需要显示两个时间让客户填写,比如开始时间&结束时间,顾名思义开始肯定不能大于结束,故使用WdatePicker插件选择时间的话可以很好的做好时间段的控制.看下面一 ...

  8. Windows 下安装 nvm 管理 nodejs 版本

    摘自https://segmentfault.com/a/1190000007612011 1. 下载安装与使用 Github: Download nvm-windows --- nvm-setup. ...

  9. JS window对象 返回浏览历史中的其他页面 go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。 语法： window.history.go(number);

    返回浏览历史中的其他页面 go()方法,根据当前所处的页面,加载 history 列表中的某个具体的页面. 语法: window.history.go(number); 参数: 浏览器中,返回当前页面 ...

  10. 【LeetCode】String

    [227] Basic Calculator II [Medium] 实现一个简单的计算器,可以+,-,*,/. 用一个数组存数, 遇到+, - 就放进数组 : 遇到 *, / 就先计算好,再放进数组 ...