VUE 视图响应式更新原理（一）

本文主要通过一个例子本质性理解 vue 的响应式原理。通过本例可以理解这么几个方面
1. 如何进行响应式收集
2. 如何进行响应更新
3. 收集和更新如何关联

例：
```html
<!DOCTYPE html>
<body>
<div id="oDiv"></div>
<button id="oButton">count++</button>

function effect(fn) {
  activeEffect = fn
  fn()
  activeEffect = null
}

let activeEffect = null

let set = new Set()
let count = {
  _value: 0,
  get value() {
    console.log('get count.')
    activeEffect && set.add(activeEffect)
    return this._value
  },
  set value(val) {
    console.log('set count val', val)
    this._value = val
    set.forEach(cb => cb())
  }
}

effect(() => {
  oDiv.innerHTML = count.value
})

oButton.addEventListener('click', () => {
  count.value ++
  count.value ++ //TODO: 此处为多次更新，也是下一节可优化内容
})
</script>
</body>
```

这段代码实现了一个简单的计数器，它显示当前的计数值，并通过按钮点击增加计数。下面是对代码的逐步解释：
### 执行结果
```yarm
get count.      // 初始化输出
get count.      // 点击一次button START: 第一个 count.value ++
set count val 1
get count.
get count.      // 第二个 count.value ++
set count val 2
get count.
```
### 代码结构分析

1. **HTML部分**：
   - `<div id="oDiv"></div>`：用于显示计数值。
   - `<button id="oButton">count++</button>`：用于增加计数的按钮。

2. **JavaScript部分**：
   - 首先，通过 `document.getElementById` 获取到 `oDiv` 和 `oButton` 对象，以便后续操作。
   
3. **Effect函数**：
   - `effect(fn)` 是一个用于注册副作用的函数。它将当前活跃的副作用（回调函数 `fn`）设置为 `activeEffect`，执行这个函数，然后将 `activeEffect` 设为 `null`。

4. **activeEffect**：
   - 这是一个变量，用于存储当前的活跃效果函数（即我们要执行的副作用）。

5. **Set 是一个集合**：
   - `set` 用于存储所有注册的副作用函数，以便在数据变化时通知它们。

6. **count对象**：
   - `count` 是一个拥有 `_value` 属性的对象，代表计数的当前值。
   - 拥有一个 getter 方法（`get value()`）和一个 setter 方法（`set value(val)`）。
     - 当访问 `count.value` 时，打印 "get count."，并将当前活跃的副作用函数添加到 `set` 中。
     - 当设置 `count.value` 时，打印 "set count val" 和新值，然后调用所有存储在 `set` 中的副作用函数来更新它们。

7. **执行副作用**：
   - 使用 `effect(() => { oDiv.innerHTML = count.value })` 注册一个副作用函数，当 `count` 的值变化时，它会更新 `oDiv` 的内容来显示新的计数值。

8. **按钮点击事件**：
   - 添加一个事件监听器，当按钮被点击时，它会增加 `count.value` 两次。

### 总结代码的工作流

- 初始时，调用 `effect` 使 `oDiv` 显示初始的 `count.value`（默认是0）。
- 当按钮被点击时，`count.value` 增加2次，且每次增加都会触发设置器，从而调用已注册的副作用函数，更新显示的计数值。