1. 异步更新原理

当模板中存在多处变量依赖时，每个变量修改都会导致一次渲染，是否能对这个进行优化。
nextick的出现解决了这个问题。

当包含多个依赖时，可以将依赖放到一个队列中去，等到当前代码块执行结束时，再进行下一次批量操作。

1.1没有使用nexTick前：

  let x
  let active
  
  let watch = cb => {
      active = cb
      active()
  }

  class Dep {
      constructor() {
          this.deps = new Set()
      }
      depend () {
          if(active) {
              this.deps.add(active)
          }
      }
      notify(){
          this.deps.forEach(dep => dep())
      }
  }

  let ref = initValue => {
      let value = initValue
      const dep = new Dep()

      return Object.defineProperty({},'value',{
          get: function() {
              dep.depend()
              return value
          },
          set: function (newValue) {
              value = newValue
              dep.notify()
          }
      })
  }

  x = ref(1)
  y = ref(2)
  z = ref(3)

  watch(() => {
      console.log(`${x.value}-${y.value}-${z.value}`);
  })

  x.value = 4
  y.value = 5
  z.value = 6
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

输出结果如下

1.2 使用nextTick后

        let x,active
        
        let watch = cb => {
            active = cb
            active()
            active = null
        }

        let queue = []
        let nextTick = cb => Promise.resolve().then(cb)
        let queueJob = job => {
            if(!queue.includes(job)){
                queue.push(job)
                nextTick(flushJobs)
            }
        }

        let flushJobs = () => {
            let job
            while ((job = queue.shift()) !== undefined){
                job()
            } 
        }
 
        class Dep {
            constructor() {
                this.deps = new Set()
            }
            depend () {
                if(active) {
                    this.deps.add(active)
                }
            }
            notify(){
                this.deps.forEach(dep => queueJob(dep))
            }
        }

        let ref = initValue => {
            let value = initValue
            const dep = new Dep()

            return Object.defineProperty({},'value',{
                get: function() {
                    dep.depend()
                    return value
                },
                set: function (newValue) {
                    value = newValue
                    dep.notify()
                }
            })
        }

        x = ref(1)
        y = ref(2)
        z = ref(3)

        watch(() => {
            console.log(`${x.value}-${y.value}-${z.value}`);
        })

        x.value = 2
        y.value = 2
        z.value = 2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

输出结果

nextTick 使用

Vue.nextTick( [callback, context] )
vm.$nextTick( [callback] )

• 将回调延迟到下次 DOM 更新循环之后执行。
• 通常用于在修改数据之后使用这个方法，在回调中获取更新后的 DOM。