学习vue源码（12）大白话谈响应式原理

前言

本文用最简单的方式来解释VUE2 最重点的响应式原理，看不懂算我输！

一、 响应式原理

什么是响应式原理？

意思就是在改变数据的时候，视图会跟着更新。这意味着你只需要进行数据的管理，给我们搬砖提供了很大的便利。

VUE是利用了Object.defineProperty的方法里面的setter 与getter方法的观察者模式来实现。

所以在学习VUE的响应式原理之前，先学习两个预备知识：

Object.defineProperty 与 观察者模式。

三、原理解析

在学完了前面的铺垫之后，我们终于可以开始讲解VUE的响应式原理了。

官网用了一张图来表示这个过程，但是刚开始看可能看不懂，等到文章的最后，我们再来看，应该就能看懂了。

总共分为三步骤：

1、init 阶段： VUE 的 data的属性都会被reactive化，也就是加上 setter/getter函数。

function defineReactive(obj: Object, key: string, ...) {
   
    const dep = new Dep()

    Object.defineProperty(obj, key, {
   
      enumerable: true,
      configurable: true,
      get: function reactiveGetter () {
   
        ....
        dep.depend()
        return value
        ....
      },
      set: function reactiveSetter (newVal) {
   
        ...
        val = newVal
        dep.notify()
        ...
      }
    })
  }
  
  class Dep {
   
      static ta