vue3,从vue2迁移更改总结

 

1.v-for 中的 Ref 数组

在 Vue 2 中,在 v-for 里使用的 ref attribute 会用 ref 数组填充相应的 $refs property。当存在嵌套的 v-for 时,这种行为会变得不明确且效率低下。

在 Vue 3 中,这样的用法将不再在 $ref 中自动创建数组。要从单个绑定获取多个 ref,请将 ref 绑定到一个更灵活的函数上 (这是一个新特性):setItemRef()

2.异步组件

现在,在 Vue 3 中,由于函数式组件被定义为纯函数,因此异步组件的定义需要通过将其包装在新的 defineAsyncComponent 助手方法中来显式地定义

const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))
const asyncPageWithOptions = defineAsyncComponent({
  loader: () => import('./NextPage.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})

3.attribute 强制行为  (重要性低,略)

4.$attrs包括class&style

现在 $attrs 包含传递给组件的所有 attribute,包括 class 和 style

5.$children

$children 实例 property 已从 Vue 3.0 中移除,不再支持。在 3.x 中,如果你需要访问子组件实例,我们建议使用 $refs。

6.自定义指令

在 Vue 2,自定义指令是通过使用下面列出的钩子来创建的,这些钩子都是可选的

  • bind - 指令绑定到元素后发生。只发生一次。
  • inserted - 元素插入父 DOM 后发生。
  • update - 当元素更新,但子元素尚未更新时,将调用此钩子。
  • componentUpdated - 一旦组件和子级被更新,就会调用这个钩子。
  • unbind - 一旦指令被移除,就会调用这个钩子。也只调用一次。

然而,在 Vue 3 中,我们为自定义指令创建了一个更具凝聚力的 API。正如你所看到的,它们与我们的组件生命周期方法有很大的不同,即使我们正与类似的事件钩子,我们现在把它们统一起来了:

    你可能感兴趣的:(网页类,vue.js)