feat: 26-为什么只能有一个根元素

Author: 57code

public/17-only-one-root/README.md

@@ -1 +1,83 @@
-## Vue组件为什么只能有一个根元素?
+## ## Vue组件为什么只能有一个根元素?
+
+这题现在有些落伍，`vue3`已经不用一个根了。因此这题目很有说头！
+
+---
+
+### 体验一下
+
+vue2直接报错，test-v2.html
+
+```js
+new Vue({
+  components: {
+    comp: {
+      template: `
+        <div>root1</div>
+        <div>root2</div>
+      `
+    }
+  }
+}).$mount('#app')
+```
+
+<img src="https://tva1.sinaimg.cn/large/e6c9d24egy1h2tpywiwwkj20ws0hm0va.jpg" style="zoom:33%;" />
+
+---
+
+vue3中没有问题，test-v3.html
+
+```js
+Vue.createApp({
+  components: {
+    comp: {
+      template: `
+        <div>root1</div>
+        <div>root2</div>
+      `
+    }
+  }
+}).mount('#app')
+```
+
+<img src="https://tva1.sinaimg.cn/large/e6c9d24egy1h2tq28fsfoj20xu0biq3x.jpg" style="zoom:33%;" />
+
+---
+
+### 回答思路
+
+- 给一条自己的结论
+- 解释为什么会这样
+- `vue3`解决方法原理
+
+---
+
+### 范例
+
+- `vue2`中组件确实只能有一个根，但`vue3`中组件已经可以多根节点了。
+- 之所以需要这样是因为`vdom`是一颗单根树形结构，`patch`方法在遍历的时候从根节点开始遍历，它要求只有一个根节点。组件也会转换为一个`vdom`，自然应该满足这个要求。
+- `vue3`中之所以可以写多个根节点，是因为引入了`Fragment`的概念，这是一个抽象的节点，如果发现组件是多根的，就创建一个Fragment节点，把多个根节点作为它的children。将来patch的时候，如果发现是一个Fragment节点，则直接遍历children创建或更新。
+
+---
+
+### 知其所以然
+
+- patch方法接收单根vdom：
+
+  https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/renderer.ts#L354-L355
+
+  ```ts
+  // 直接获取type等，没有考虑数组的可能性
+  const { type, ref, shapeFlag } = n2
+  ```
+
+- patch方法对Fragment的处理：
+
+  https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/renderer.ts#L1091-L1092
+
+  ```ts
+  // a fragment can only have array children
+  // since they are either generated by the compiler, or implicitly created
+  // from arrays.
+  mountChildren(n2.children as VNodeArrayChildren, container, ...)
+  ```

public/17-only-one-root/test-v2.html

@@ -0,0 +1,17 @@
+<div id="app">
+  <comp></comp>
+</div>
+
+<script src="http://unpkg.com/vue@2"></script>
+<script>
+  new Vue({
+    components: {
+      comp: {
+        template: `
+          <div>root1</div>
+          <div>root2</div>
+        `
+      }
+    }
+  }).$mount('#app')
+</script>

public/17-only-one-root/test-v3.html

@@ -0,0 +1,17 @@
+<div id="app">
+  <comp></comp>
+</div>
+
+<script src="http://unpkg.com/vue@3"></script>
+<script>
+  Vue.createApp({
+    components: {
+      comp: {
+        template: `
+          <div>root1</div>
+          <div>root2</div>
+        `
+      }
+    }
+  }).mount('#app')
+</script>