VUE 视图响应式更新原理，视图异步更新更新优化（二）

接上一文章 <a href="http://jikemaimai.com/article/detail?a_id=37" title="VUE 视图响应式更新原理（一）">VUE 视图响应式更新原理（一）</a>。在我们点击一次 button 后触发两次 count++ 同时对应视图也飞快的同步更新了两次。然而对实际用户来说这种飞秒级速度的多次更新视图是无感得的，换句话说大多用户只在乎最终的结果你只要输出 `2` 的结果就可以了，中间经过几层算对用户来说其实不太关系，并且对程序性能而言多次的更新视图也造成的实际的性能浪费，程序其实只需要将最终的结果进行一次渲染同步给视图就可以了。那么本文就围绕这一问题通过前面一个例子继续进行优化。

例：
```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()

// 优化点1，增加执行队列 task
let task = new Set()
function runTask() {
  Promise.resolve().then(() => {
    task.forEach(cb => cb())
  
    task.clear()
  })
}

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())
    // 优化点1.1： 先将执行放入微任务队列中推迟执行，以合并重复渲染任务
    set.forEach(cb => task.add(cb))
    runTask()
  }
}

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

// 用于获取DOM更新结果
function nextTick(cb) {
  Promise.resolve().then(() => {
    cb()
  })
}

oButton.addEventListener('click', () => {
  count.value ++
  count.value ++

console.log(oDiv.innerHTML)

// 优化点2：实时获取DOM更新结果
  nextTick(() => {
    console.log(oDiv.innerHTML)
  })
})
</script>
</body>
```

这段代码主要实现了一个简单的计数器功能，每点击一次按钮 count 的值加两倍，并且更新页面显示。下面逐步解释代码的功能和优化点：

1. `effect` 函数：这个函数接受一个函数 `fn` 作为参数，然后将该函数设置为 `activeEffect`，并执行一次。接着将 `activeEffect` 置为 null。这个函数主要用于在 get 方法中收集依赖。

2. `count` 对象：这是一个包含 `_value` 和 `value` 属性的对象，其中 `_value` 存储实际的计数值，`value` 是一个 getter 和 setter 方法，用于获取和设置计数值。在 get 方法中，会检查是否存在 `activeEffect`，如果存在则将其添加到 `set` 集合中。在 set 方法中，会将新值赋给 `_value`，然后遍历 `set` 集合中的回调函数，将其添加到 `task` 集合中，并通过 `runTask` 函数推迟执行。

3. `effect(() => { oDiv.innerHTML = count.value })`：这里通过 `effect` 函数来监听 `count.value` 的变化，一旦 `count.value` 发生变化，就会更新页面上 `oDiv` 元素的内容为最新的计数值。

4. `oButton` 的点击事件监听器：每次点击按钮时，会将 `count.value` 自增两倍，然后通过 `nextTick` 函数实时获取更新后的 `oDiv.innerHTML` 的值，这样可以立即看到最新的页面展示结果。

优化点：
1. 引入 `task` 队列，将需要执行的回调函数推迟执行，以合并重复的渲染任务，提高性能。
2. 使用 `nextTick` 函数实时获取 DOM 更新结果，避免异步操作带来的延迟。

这段代码虽然简单，但是实现了双向绑定的一些基础概念，同时也引入了一些性能优化点。希望以上解释对看到本文的你有所帮助。