Vue2和Vue3使用层面上有什么区别

Vue 3 的 Template 支持多个根标签，Vue 2 不支持

Vue 3 有 createApp()，而 Vue 2 的是 new Vue()

createApp(组件)，new Vue()

v-model代替以前的v-model和.sync

vue3中v-model的用法

要求:

3.1. props属性名任意，假设为x

3.2. 事件名必须为"update:x"

效果：

4. context.emit

新增context.emit，与this.$emit（vue3中只能在methods里使用）作用相同

context.emit用法

5. Vue3中的属性绑定

默认所有属性都绑定到根元素

使用

使用attrs或者context.attrs获取所有属性

使用v-bing="$attrs"批量绑定属性

使用 const = context.attrs 将属性分开

5.1 使用场景

在vue2中我们在父组件绑定click事件，子组件必须内部触发click，而vue3中在父组件绑定子组件的根元素上也会跟着绑定

ButtonDemo.vue

Button.vue

上面的代码Button的click事件会在根元素div上绑定，如果我们要指定click的区域为button元素的话我们就需要使用inheritAttrs

Button.vue

如果想要一部分属性绑定在button上一部分在div上就需要在setup里

Button.vue

6.slot具名插槽的使用

vue2中的用法

子组件

父组件

vue3中子组件用法不变，父组件需要使用

父组件

7. Teleport传送门组件

8. vue3中动态挂载组件的方法

通过引入h函数第一个参数是组件，第二个是元素的属性(第一个参数组件的props，也就是直接可以在使用组件的时候传入的属性)，第三个是插槽的属性。

其中我们在render里监听我们v-model绑定的update事件的时候，需要使用

9. 父组件里获取子组件内容，渲染子组件

在父组件的setUp里通过拿到子组件数组，然后通过component组件渲染

比如：

TabsDemo.vue

Tabs.vue

Tabs.vue

10. vue3中ref的使用

10.1.单个ref

10.2. v-for里的ref

11. watchEffect用来代替生命周期里的onMounted和onUpdated

初始化页面的时候watchEffect里的代码会执行，当watchEffect里的数据有更新的时候同样会执行

注意watchEffect第一次运行是在组件挂载之前，如果需要访问DOM需要将我们的watchEffect放在onMounted里