1.Vue 3 的 Template 支持多个根标签，Vue 2 不支持
2.Vue 3 有 createApp()，而 Vue 2 的是 new Vue() createApp(组件)，new Vue({template, render})
3.v-model代替以前的v-model和.syncvue3中v-model的用法：（props属性名任意，假设为x, 事件名必须为"update:x"） 例子： （vue3中的写法）
（vue2中的写法）
4.新增context.emit，与this.$emit（vue3中只能在methods里使用）作用相同context.emit用法：
import {SetupContext } from 'vue'
setup(props: Prop, context: SetupContext) {
const toggle = () => {
context.emit('input', !props.value)
}return {toggle}
}
5.Vue3中的属性绑定
默认所有属性都绑定到根元素使用inheritAttrs: false可以取消默认绑定
使用attrs或者context.attrs获取所有属性
使用v-bing="$attrs"批量绑定属性
使用const {size, level, ...rest} = context.attrs 将属性分开
5.1在vue2中我们在父组件绑定click事件，子组件必须内部触发click，而vue3中在父组件绑定子组件的根
元素上也会跟着绑定
5.2 props和context.attrs的区别
props要现在当前组件props属性里声明才能取值，attrs不用先声明
props不包含事件，attrs包含（不能在props里声明click这一类的事件）
props没有声明的属性，会跑到attrs里
当我们在html标签中只写属性而不赋值的时候，props支持string以外的类型，attrs只有string类型
6.Vue3新增Teleport传送门组件
要传送到body下面的内容
7.Vue3中动态挂载组件的方法 通过引入h函数第一个参数是组件，第二个是元素的属性(第一个参数组件的props，也就是直接可以在使用组件的时候传入的属性)，第三个是插槽的属性。
其中我们在render里监听我们v-model绑定的update事件的时候，需要使用onUpdate:属性名 import {createApp, h} from 'vue'
import Dialog from './Dialog.vue'
export const openDialog = (options: Options) => {
const {title, content} = options
const div = document.createElement('div')
document.body.append(div)
const app = createApp({
render() {
return h(Dialog, {
visible: true, cancel: () => {},
'onUpdate:visible': (newValue: boolean) => {
if (newValue === false) {
app.unmount(div)
}
}
}, {title, content})
}})
app.mount(div)
}
8.Vue3中父组件里获取子组件内容，渲染子组件 8.1在父组件的setUp里通过context.slots.default()拿到子组件数组，然后通过component组件渲染 8.2 在vue3中所有的组件最后都会导出一个对象这个对象就是我们的子组件里的type（context.slots.default()[0].type),所以我们可以通过type判断子组件是不是我们要求的子组件，以Tabs组件为例我们需要用户使用的时候下面的子组件全部都是我们的Tab组件
9.vue3中ref的使用 9.1单个ref的使用
Headline
Lorem ipsum ...
9.2 v-for里的ref
// el当前元素，divs是存储每个元素的数组
const divs = ref([]);
onMounted(() => {
console.log(divs.value)
});
return {
divs
};},
};
10.watchEffect用来代替生命周期里的onMounted和onUpdated 初始化页面的时候watchEffect里的代码会执行，当watchEffect里的数据有更 新的时候同样会执行 const count = ref(0)
watchEffect(() => console.log(count.value))
setTimeout(() => {
count.value++
}, 100)
注意watchEffect第一次运行是在组件挂载之前，如果需要访问DOM需要将我们的watchEffect放在onMounted里
onMounted(() => {
watchEffect(() => console.log(count.value))
})
