Vue3设计思路 -- 虚拟DOM以及patch算法_vue3 手动patch

Vue3设计思路 – 虚拟DOM以及patch算法

虚拟DOM：一个对象，对象真实DOM的一个抽象，可以用来表示一个真实DOM的基本基本结构

虚拟DOM的优势

• 引入了虚拟DOM，当我们更新的时候可以不用做全量的更新，虚拟DOM在每次更新前会进行两次虚拟DOM的比对，只对不同的地方转换成DOM操作。有人说真是DOM也可以比对，但是真实DOM的属性太多了，在遍历的时候如果使用真实DOM比对，就会造成极大的性能消耗

• 多了虚拟DOM这一层，数据驱动就可以只驱动虚拟DOM。渲染层（render）就可以根据平台来写不同的代码。我们有机会根据这一层写出很好的跨平台的代码。

• 在虚拟DOM渲染之前我们可以做一些优化的代码

虚拟DOM的结构

关键的几个名词：h patch

vue中创建虚拟DOM是通过 h 函数，所以我们可以自己创建一个 h 函数

createEle虚拟dom转换为真实dom的方法

patch主要就是用来对比两次虚拟dom的方法，做的主要就是diff的操作

h函数接收三个参数，target：目标标签，props：属性（类，id，方法等等），children：子元素信息

function h(target, props, children) {
  // 创建 虚拟dom 最最基本的一个对象
  return {
    target,
    props,
    children
  }
}
// props 涉及到的东西极其的复杂，主要就是包含一些标签的属性，类，id，type，方法等等，这里为了理解最简单的虚拟dom过程就默认标签没有属性，

// children是嵌套的虚拟dom
{
  h('h3',null,[
    h('p',null,this.title),
    h('p',null,this.title),
    h('p',null,this.title)
  ])
}
// children是值
{
  h('h3',null,this.title)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

开始思路

我们首先要明白虚拟dom的优势在于可以用很小的体积进行前后虚拟dom的比对，所以我们应该是在初次挂载的时候就存下虚拟dom的信息，再下次更新的时候又会生成一个虚拟dom和最初存的虚拟dom进行对比，将有变化的地方转换成dom操作再更新，更新完成之后将这次更新的虚拟dom存下来作为下次更新的对比目标

patch

真正vue3源码中patch是一个极其复杂的函数，因为涉及的对比项实在是太多了，还采用了最长递增子序列的算法

app.patch = function (node1, node2) {
    // 这里就是有涉及到 diff 算法了，但是我只会最简单的部分
    // 这步很重要，把每次node1绑定的元素再赋值给node2的元素，这样才可以每次都保持更新元素
    const el = node2.el = node1.el
    let child1 = node1.children,
      child2 = node2.children
    // 两次虚拟dom比对，只更新变化的
    console.log(node1, node2)
    if (typeof node1.children === 'string') {
      if (typeof node2.children === 'string') {
        if (child1 !== child2) {
          el.textContent = child2
        }
      } else {
        // 变成了数组 -- 遍历虚拟dom转换成真实dom 再插入
        el.innerHTML = ''
        child2.forEach(child => el.appendChild(document.createElement(child)))
      }
    } else {
      // node1 是数组
      if (typeof node2.children === 'string') {
        el.textContent = child2
      } else {
        // 两个虚拟dom都是数组，这里就需要数组之间的比对了
      }
    }
  }
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

createEle

讲虚拟DOM转换为真实DOM，注意虚拟dom的children可能是个虚拟dom的数组，所以这个方法是需要递归调用的

app.createEle = function (vnode) {
    let el = document.createElement(vnode.target)
    // 先忽略掉属性
    // vnode.props
    if (typeof vnode.children === 'string') {
      // 文本
      /*
          {
            h('h3',null,this.title)
          }
      */
      el.textContent = vnode.children
    } else {
      // 是数组，数组里面是子虚拟DOM
      /*
        {
          h('h3',null,[
            h('p',null,this.title),
            h('p',null,this.title),
            h('p',null,this.title)
          ])
        }
      */
      vnode.children.forEach(node => {
        // 递归调用
        el.appendChild(this.createEle(node))
      })
    }
    // 这一步极其重要，在虚拟dom上存一下dom，方法最后比对完成之后转换成真实dom操作，触发更新页面，所以说虚拟dom也是要做真实dom操作的，
    vnode.el = el
    return el
  }
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

完整代码

完整代码比较长，建议先看一下前面两篇，分别是挂载和响应式，这个代码是基于上面的，都看下来会理解的比较快

function reactive(obj) {
  const proxy = new Proxy(obj, {
    get(target, key) {
      /*
        render函数第一次渲染的时候会获取引用的值 所以第一次渲染就会走到这个 get 方便我们开始做依赖收集
      */
      track(target, key)
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      console.log('proxy', key)
      /*
        修改的时候，去依赖收集的数据结构中 找到对应的key 把 key 对应的 更新函数都执行一遍，这就触发了页面的响应式
      */
      trigger(target, key)
      // app.update()
    }
    /*
      proxy 的优势出了可以监听get 和 set之外 还是可以监听另外十多种情况，这个是Object.defineProperty()做不到的
        这个是语言层面上的升级
    */
  })
  return proxy
}

// 副作用函数 -- 这里是为了暂时的存放每一个副作用函数，当副作用函数已经和依赖关系建立好了之后再清除空间
const effectStack = []

function effect(fn) {
  const eff = function () {
    try {
      effectStack.push(eff)
      fn()
    } finally {
      effectStack.pop()
    }
  }
  eff()
  return eff
}

// 依赖收集函数 
/*
  依赖收集的数据结构是这样的
  {
    state:{
      title:[effect,effect] // effect 对应的就是一个个的更新函数，每个响应式对象的值都是存着更新函数的数组，当这个值变化的时候遍历执行数组里面的一个个effect函数
    }
  }
*/
const trackMap = {}

function track(target, key) {
  /* 
    effectStack 是临时存放副作用函数的地方，每次关系建立完成之后就会再清空掉，所以获取数组的最后一个元素即可
  */
  const effect = effectStack[effectStack.length - 1]
  if (effect) {
    let map = trackMap[target]
    if (!map) {
      map = trackMap[target] = {}
    }

    let deps = map[key]
    if (!deps) {
      deps = map[key] = []
    }

    // 将副作用函数放入 deps
    if (deps.indexOf(effect) === -1) {
      deps.push(effect)
    }
  }
}

function trigger(target, key) {
  const map = trackMap[target]
  if (map) {
    const effects = map[key]
    effects.forEach(effect => effect())
  }

}

function h(target, props, children) {
  // 创建虚拟DOM的函数
  return {
    target,
    props,
    children
  }
}

function createApp(config) {
  let app = {}
  app.mount = function (id) {
    this.rootDOM = document.getElementById(id)

    if (!config.render) {
      config.render = this.compile(this.rootDOM.innerHTML)
    }

    if (config.setup) {
      this.setupCtx = config.setup()
    } else {
      this.dataCtx = config.data()
    }

    this.proxy = new Proxy(this, {
      get(target, key) {
        if (key in target.setupCtx) {
          return target.setupCtx[key]
        } else {
          return target.dataCtx[key]
        }
      },
      set(target, key, value) {
        if (key in target.setupCtx) {
          target.setupCtx[key] = value
        } else {
          target.dataCtx[key] = value
        }
      }
    })

    this.update = effect(() => {
      // render 函数的结果是一个 vnode
      const vnode = config.render.call(this.proxy)
      if (!this.isMounted) {
        // 首次挂载
        const el = this.createEle(vnode)
        this.__node = vnode
        this.rootDOM.innerHTML = ''
        this.rootDOM.appendChild(el)
      } else {
        // 更新
        this.patch(this.__node, vnode)
        this.__node = vnode
      }
    })

    this.update()

    this.isMounted = true // 已经挂载成功

    return this
  }
  app.compile = function (template) {
    return function () {
      // 真实DOM操作
      // const h3 = document.createElement('h3')
      // h3.textContent = this.title
      // return h3

      // 采用虚拟dom
      const vnode = h('h3', null, this.title)
      return vnode
    }
  }

  app.createEle = function (vnode) {
    let el = document.createElement(vnode.target)
    // 先忽略掉属性
    // vnode.props
    if (typeof vnode.children === 'string') {
      // 文本
      /*
          {
            h('h3',null,this.title)
          }
      */
      el.textContent = vnode.children
    } else {
      // 是数组，数组里面是子虚拟DOM
      /*
        {
          h('h3',null,[
            h('p',null,this.title),
            h('p',null,this.title),
            h('p',null,this.title)
          ])
        }
      */
      vnode.children.forEach(node => {
        // 递归调用
        el.appendChild(this.createEle(node))
      })
    }
    vnode.el = el
    return el
  }

  app.patch = function (node1, node2) {
    // 这里就是有涉及到 diff 算法了，但是我只会最简单的部分
    // 这步很重要，把每次node1绑定的元素再赋值给node2的元素，这样才可以每次都保持更新元素
    const el = node2.el = node1.el
    let child1 = node1.children,
      child2 = node2.children
    // 两次虚拟dom比对，只更新变化的
    console.log(node1, node2)
    if (typeof node1.children === 'string') {
      if (typeof node2.children === 'string') {
        if (child1 !== child2) {
          el.textContent = child2
        }
      } else {
        // 变成了数组 -- 遍历虚拟dom转换成真实dom 再插入
        el.innerHTML = ''
        child2.forEach(child => el.appendChild(document.createElement(child)))
      }
    } else {
      // node1 是数组
      if (typeof node2.children === 'string') {
        el.textContent = child2
      } else {
        // 两个虚拟dom都是数组，这里就需要数组之间的比对了
      }
    }
  }

  return app
}
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223

浏览器控制台调试

这里我通过定时器两次修改reactive响应式对象的值，分别打印出两次虚拟DOM

总结：

虚拟dom的操作流程基本就是这样，已经理解了虚拟dom的作用和意义以及基本结构，但是虚拟dom的比对，也就是diff算法才是真正的精髓，这个这一块我还没有写，确实是不会写，得再修炼一段时间才能继续写下去。