Vue2.x到Vue3.x的变化

template替换差异

• 在Vue2.x中，会将template中全部内容覆盖到要替换的位置，也就是原标签会消失

<!-- App.vue -->
<template>
  <div id="appx">
    test
  </div>
</template>

<!-- index.html -->
<div id="app"></div>

// main.js
new Vue({
  render: h => h(App),
}).$mount('#app')

注入后，原来的id="app"的div标签被替换了，这也是为什么Vue2.x时，模版内总需要一个根元素的原因

• 在Vue3.x中，会将template中全部内容置入目标标签内部，原标签不会消失

<!-- App.vue -->
<template>
  <div>test</div>
  <div>test</div>
</template>

<!-- index.html -->
<div id="app"></div>

// main.js
createApp(App).mount('#app')

注入后，仅仅将template中的内容放入到 id="app" 的div标签内部，并没有替换app，因此在Vue3.x中，允许template中没有根元素

todos: 补充更多…