Vue响应式原理浅析

考虑下面的情形：

const state = {
    a: 1
    b: 10
}

如何让a变化的时候，b始终是a的10倍？也就是说像下面这样：

state.a = 2 // 打印"state.b is 20"
state.a = 3 // 打印"state.b is 30"

这其实就是vue的响应式原理，vue依赖Object.defineProperty的get和set函数完成这一功能。

1.1 Getters and Setters

Goal

Implement a convert function that:

takes an Object as the argument
converts the Object’s properties in-place into getter/setters using
Object.defineProperty (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)
The converted object should retain original behavior, but at the same time
log all the get/set operations.

expected usage:

const obj = { foo: 123 }
convert(obj)

obj.foo // should log: 'getting key "foo": 123'
obj.foo = 234 // should log: 'setting key "foo" to: 234'
obj.foo // should log: 'getting key "foo": 234'

solution

<script>
function convert (obj) {
  // Implement this!
  Object.keys(obj).forEach(key => {
    let internalValue = obj[key]
    Object.defineProperty(obj, key, {
      get () {
        console.log(`getting key "${key}": ${internalValue}`)
        return internalValue
      },
      set (newValue) {
        internalValue = newValue
        console.log(`setting key "${key}" to: ${newValue}`)
      }
    })
  })
}
</script>

1.2 Dependency Tracking（依赖追踪）

1.watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。

2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数

Goal

完成如下代码，使输出符合预期：

Create a Dep class with two methods: depend and notify.（创建一个类Dep，有2个方法：depend和notify）
- Dep类代表依赖
- depend 的作用是注册依赖
- notify 的作用是执行依赖的订阅者：当前依赖改变了，之前的所有依赖Dep这个类的变量（比如函数、表达式等等）需要重新执行，也就是说通知他们Dep发生了改变（依赖的订阅者）
Create an autorun function that takes an updater function.（创建一个autorun函数，这个autorun函数接收一个更新函数作为参数）
Inside the updater function, you can explicitly depend on an instance of Dep by calling dep.depend()（在更新函数内部可以显示调用dep.depend()）
Later, you can trigger the updater function to run again by calling dep.notify().（之后可以显示调用dep.notify()触发更新函数）

class Dep {
  // Implement this!
}

function autorun (update) {
  // Implement this!
}
const dep = new Dep()
const update1 = () => {
    dep.depend()
    console.log('111')
}
const update2 = () => {
    dep.depend()
    console.log('222')
}
autorun(update1)
autorun(update2)
dep.notify()
// 期望输出：
// 111
// 222
// 111
// 222

首先声明了一个全局变量activeUpdate，JS是一个单线程语言，无论何时只有一个函数在运行。如果我们创建了一个函数它可以mark自身是否在运行，那么我们在任何时候都可以很轻松地知道这个函数是否在运行，也就是说知道是否在这个函数内部。

然后我们在autorun内部创建一个函数wrappedUpate，在wrappedUpate里执行update函数。我们想要知道的是否在这个update函数内部，所以我们这么做：

class Dep {
  // Implement this!
}

let activeUpdate

function autorun (update) {
  // Implement this!
    function wrappedUpate () {
        activeUpdate = wrappedUpate
        unpdate()
        activeUpdate = null
    }
    wrappedUpate()
}

const dep = new Dep()
const update1 = () => {
    dep.depend()
    console.log('111')
}
const update2 = () => {
    dep.depend()
    console.log('222')
}
autorun(update1)
autorun(update2)
dep.notify()
// 期望输出：
// 111
// 222
// 111
// 222

只要我们运行了wrappedUpate函数，update函数就会运行，在update函数内部我们会调用dep.depend()，这个dep.depend()将会访问全局变量activeUpdate，所以我们在dep.depend()访问activeUpdate之前将其赋值为wrappedUpdate。

这样一来，如果activeUpdate不是空的话，就把activeUpdate指向的变量作为dep的依赖订阅者，完成注册依赖；而notify方法的作用就是把所有的订阅者执行一遍。相应的，Dep需要一个属性存储它的所有订阅者，我们采用Set来存储。

class Dep {
  // Implement this!
    constructor () {
        this.subscribers = new Set()
    }
    depend () {
        if (activeUpdate) {
            // 将当前active update注册为依赖订阅者
            this.subscribers.add(activeUpdate)
        }
    }
    notify () {
        // 执行所有的订阅者
        this.subscribers.forEach(sub => sub())
    }
}

let activeUpdate

function autorun (update) {
  // Implement this!
    function wrappedUpate () {
        activeUpdate = wrappedUpate
        update()
        activeUpdate = null
    }
    wrappedUpate()
}

const dep = new Dep()
const update1 = () => {
    dep.depend()
    console.log('111')
}
const update2 = () => {
    dep.depend()
    console.log('222')
}
autorun(update1)
autorun(update2)
dep.notify

1.3 Mini Observer

现在我们把1.1和1.2结合起来，解决最初提出的问题

Goal

Combine the previous two functions, renaming convert() to observe() and keeping autorun():

observe() converts the properties in the received object and make them
reactive. For each converted property, it gets assigned a Dep instance which keeps track of a list of subscribing update functions, and triggers them to re-run when its setter is invoked.
autorun() takes an update function and re-runs it when properties that the
update function subscribes to have been mutated. An update function is said
to be “subscribing” to a property if it relies on that property during its
evaluation.

They should support the following usage:

const state = {
    a: 1
}

observe(state)
computed(() => {
    state.b = state.a * 10
    console.log(`state.b is: ${state.b}`)
})

state.a = 2
state.a = 3

Solutions

class Dep {
  constructor () {
    this.subscribers = new Set()
  }
  depend () {
    if (activeUpate) {
      this.subscribers.add(activeUpate)
    }
  }
  notify () {
    this.subscribers.forEach(sub => sub())
  }
}

let activeUpate

function observe (obj) {
  // Implement this!
  let dep = new Dep()
  Object.keys(obj).forEach(key => {
    let internalValue = obj[key]
    Object.defineProperty(obj, key, {
      get () {
        dep.depend()
        return internalValue
      },
      set (newValue) {
        let changed = internalValue !== newValue
        internalValue = newValue
        if (changed) {
          dep.notify()
        }
      }
    })
  })
}

function computed (update) {
  // Implement this!
  function wrapperUpdate () {
    activeUpate = wrapperUpdate
    update()
    activeUpate = null
  }
  wrapperUpdate()
}

我们只是把1.1中的convert函数改名为observer，autorun改名computed，然后在get和set函数中调用dep.depend()和dep.notify()，剩下的都是前面讲过的代码了，不必多说。

（finished）