Vue3.x新特性 Vue3新功能（详细）

Vue3.x新特性 Vue3新功能（详细）

文章目录

• Vue3.x新特性 Vue3新功能（详细）
• • 1：setup
  • 2：指令生命周期
  • 3：数据（data）
  • • • 3.1：ref
      • 3.2：toRefs
      • 3.3：toRef
      • 3.4：ref，toRef，toRefs 的区别
  • 4：监听
  • 5：slot
  • • • 5.1：让插槽内容能够访问子组件中的数据
  • 5：v-model
  • 6：teleport
  • 7：defineAsyncComponent
  • 8：多个根结点
  • 9：Proxy
  • 10：diff 算法
  • 11：Vite

1：setup

setup 取代了 beforeCreate created 。

setup作用：之前，我们需要在data、methods、mounted的不同位置编写代码，分散的区域很大。现在我们可以在setup中实现它。

这里的ref代替了data的双向绑定，最后我们需要返回一个对象。

有关setup的更多详细信息

2：指令生命周期

vue2.x：

• bind
• inserted
• update
• componentUpdated
• unbind

vue3.x：

• beforeMount
• mounted
• beforeUpdate
• updated
• beforeUnmount
• unmounted

3：数据（data）

清单：

1. ref
2. toRefs
3. toRef

vue2使用data初始化数据并进行双向绑定，现在使用ref来实现。

3.1：ref

修改双向绑定的值，需要使用 value 属性，如：age.value。

3.2：toRefs

toRefs() 期望一个响应对象，并根据响应对象属性值的自动变化来渲染页面。

3.3：toRef

toRef() 期望一个响应对象及参数，并根据响应对象属性值的自动变化来渲染页面。

3.4：ref，toRef，toRefs 的区别

• ref：主要用于绑定 非对象类型 的参数。
• toRef：主要用于绑定 对象类型 ，将 单个reactive对象属性转换ref，保持与父对象的连接
• toRefs：主要用于绑定 对象类型 ，将 所有 reactive对象属性转换ref，保持与父对象的连接

4：监听

• vue2.x：watch
• vue3.x：watchEffect

相较于 watch ，watchEffect 传入回调函数，不需要指定监听的数据源，自动收集响应式数据。

5：slot

通过在 template 标签上使用 v-slot 并指定插槽名称来实现命名插槽。

App.vue：

HelloWorld.vue：

5.1：让插槽内容能够访问子组件中的数据

要使父级提供的插槽可以访问子组建的数据，我们需要在子组建添加一个 slot 元素并将其作为一个 attribute 绑定：

如：这里我们在子组建使用了 myName

HelloWorld.vue：

在父级使用：

App.vue：

5：v-model

vue3.x 中无需再使用 .async 修饰。

.async 实现对某一个 prop 进行“双向绑定”。

6：teleport

teleport 可以将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置。

请注意，目标元素必须在组件安装之前存在 - 即目标不能由组件本身渲染，理想情况下应该在整个 Vue 组件树之外。

组建 HelloWorld.vue 使用：

可用于全局弹窗，全局提醒等功能。

7：defineAsyncComponent

defineAsyncComponent 主要用于异步加载组建。

defineAsyncComponent 接收一个 Promise 的工厂函数。

对于高价用法 AsyncCom 参数如下：

const AsyncCom = defineAsyncComponent({
  // 工厂函数
  loader: () => import('./components/HelloWorld.vue'),
  // 加载异步组件时要使用的组件
  loadingComponent: LoadingComponent,
  // 加载失败时要使用的组件
  errorComponent: ErrorComponent,
  // 在显示 loadingComponent 之前的延迟 | 默认值：200（单位 ms）
  delay: 200,
  // 如果提供了 timeout ，并且加载组件的时间超过了设定值，将显示错误组件
  // 默认值：Infinity（即永不超时，单位 ms）
  timeout: 3000,
  // 定义组件是否可挂起 | 默认值：true
  suspensible: false,
  
  onError(error, retry, fail, attempts) {
    if (error.message.match(/fetch/) && attempts <= 3) {
      // 请求发生错误时重试，最多可尝试 3 次
      retry()
    } else {
      // 注意，retry/fail 就像 promise 的 resolve/reject 一样：
      // 必须调用其中一个才能继续错误处理。
      fail()
    }
  }
})

8：多个根结点

相较于 vue2.x，vue3.x允许包含多个根结点：

vue2.x：

vue3.x：

9：Proxy

vue3.x中的数据变化劫持，由 definePoperty 改为了 Proxy。

10：diff 算法

vue2.x：当数据发生变化时，会生成一个新的 DOM 树，与之前的 DOM 树进行比较，找到不同的节点并更新

vue3.x： 在创建虚拟 DOM 树时，会根据 DOM 中的内容是否发生变化，添加一个静态标签。那么与上一个虚拟节点比较时，只会比较这些带有静态标签的节点。

11：Vite

作用：

• 提高项目启动速度
• 提高修改内容之后更新速度

Vite文档