一、根标签
Vue2的
Templata只支持一个根标签
Vue3的Templata支持多个根标签
//vue2
<template>
<div></div>
</template>
// vue3
<template>
<div></div>
<img/>
</template>
二、初始化方法
Vue2 使用
new Vue(), 参数是new Vue({template, render})
Vue3 使用createApp()参数是createApp(组件)
//vue2
import Vue from 'vue';
import router from './routers/';
import store from './stores';
import App from './App.vue';
const app = new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
// vue3
import { createApp } from 'vue';
import App from './App.vue';
import { router } from './router';
const app = createApp(App).use(router).mount('#app');
三、vue3内置组件teleport
将teleport包裹的元素移动到某个DOM节点下
有两个参数to - string；disabled - boolean
to使用方法：
<!-- 正确 -->
<teleport to="body" />
<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />
<!-- 错误 -->
<teleport to="h1" />
<teleport to="some-string" />
disabled使用方法：
此可选属性可用于禁用 <teleport> 的功能，这意味着其插槽内容将不会移动到任何位置，而是在您在周围父组件中指定了 <teleport> 的位置渲染。
<teleport to="#popup" :disabled="displayVideoInline">
<video src="./my-movie.mp4" />
</teleport>
