浅谈总结 vue2 到 vue3 的细节变更

1、v-for的ref数组。

现在vue3 可以直接 :ref绑定一个函数，其参数就是 el 节点，也就是dom节点，然后便可以定义 push 。

2、异步组件的加载

现在vue3需要使用 defineAsyncComponent 包裹

const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

3、attribute的变更。

我们可以简单的把vue3的这个attribut变更理解为
:attr=’ ’ 当使用一个动态属性时，直接设置为空在节点上是不会移除这个属性的 我们只有设置成undefined、null才会移除
而我们平常去设置false也不会移除而是会显示false

4、$attrs 的变更。

$attrs现在包裹所有的 atrribute，其中也包括着 class 和 style。

5、$children的变更。

在vue3当中，$children 已经被移除。如果要访问子组件，可以使用 $refs

6、vue自定义指令的变化。

vue3当中 自定义指令的生命周期钩子已经进行了变化
从5个钩子变为了7个钩子

7、新增emits选项。

vue3 目前提供一个emits选项，和现有的props选项类似，这个选项可以用来定义组件可以向其父组件触发的事件，需要知道的是，任何没有声明emits的事件监听器都会被算入组件的$attrs并绑定在组件的根节点上面。

8、$on、 $off、 $once 实例方法的变更。

vue3，$on、 $off、 $once 实例方法已经被移除。

9、filter过滤器的变更。

从 Vue 3.0 开始，过滤器已删除，不再支持。

10、vue3片段变更，支持多根节点。

vue3 现在支持多个根节点，但是多个根节点继承的话需要绑定 $attrs ，因为现在已经不在具有隐式贯穿的行为。

11、key attribute的变更。

vue2 建议在 v-if / v-else / v-else-if 的分支中使用key vue3 则不再需要，vue3 <template>，for 循环 key 则应该设置在 <template>标签上，原来是设置在子元素上面的

12、vue3 按键修饰符的变更。

vue3 按键修饰符不再支持键码作为v-on的修饰符，如有需要请走事件对象 $event ，或者直接用对应的英文字母即可实现键盘码修饰符

13、vue3 移除 $listeners。

vue3 移除了 $listeners，封装进了 $attrs中。

14、在 prop 的默认函数中访问this。

可以再props的 default 中使用 inject 函数

15、过渡的class类名变更。

过渡的class类名变更，v-enter修改为v-enter-from，v-leave修改为v-leave-from

16、移除了v-on.native修饰符。

vue3 移除了v-on.native 修饰符，触发可用emits对象暴露

17、v-model绑定行为的变换。

vue2：v-model相当于 :value 和 @input 的语法糖
vue3：v-model相当于 :modelValue 和 @update:modelValue 的语法糖

如果要变更子组件的触发行为
则 v-model:title=“xxx” 就会变为 :title 和 @update:title 的语法糖

现在 vue3 在一个组件上可以同时绑定多个 v-model

18、v-if和v-for的优先级问题。

vue2 在同一元素上 v-for的优先级是要比v-if的优先级高的，
vue3 在同一元素上 v-for的优先级是要比v-if的优先级低的。
如果想要 v-for比v-if的优先级高可以 v-for 外层包裹的<template>

19、v-bind的绑定顺序会影响渲染结果。

<div id="red" v-bind="{id:'blue'}"></div>

vue2渲染结果展示的是 id=‘red’，
vue3渲染结果展示的是 id=‘blue’，

vue3 变为了那个在后显示那个

20、原有的组件侦听生命周期绑定事件变更。

vue2时如果想要侦听一个组件的生命周期
@hook:mounted
vue3时如果想要侦听一个组件的生命周期
@vnode-mounted / @vnodeMounted

21、watch监听数组。

vue3当中，如果想要监听数组内容的变化那么必须要写deep。

22、新增watchEffect。

简单的理解，可以将它理解成是一个computed，只不过它会在初始化的时候执行一次，其内部回调的第一个参数就是onInvalidate，这个参数主要用于清除副作用，这个onInvalidate会在watchEffect重新运行或者停止运行的时候执行。