当前位置：首页 > news >正文

vue3的一些新特性

news 来源：原创 2025/5/11 11:14:46

Vue 3 是 Vue.js 框架的重大升级，带来了许多新特性和性能优化。以下是 Vue 3 的主要新特性详解：

一、Composition API

Vue 3 引入了 Composition API，旨在解决 Options API 在复杂组件中逻辑复用和代码组织的问题。通过 setup() 函数和响应式 API，开发者可以更灵活地组合逻辑。

1. `setup()` 函数

新的组件选项，在组件初始化阶段执行。
替代了 Vue 2 中的 data、methods、computed 等选项。
接收 props 和 context 参数，返回的对象会暴露给模板使用。

import { ref } from 'vue';
export default {
  setup(props) {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
};

2. 响应式 API

ref：包装基本类型数据为响应式对象（通过 .value 访问）。
reactive：将对象转换为响应式对象（深度响应）。
computed：创建计算属性。
watch 和 watchEffect：监听响应式数据的变化。

import { reactive, watchEffect } from 'vue';
const state = reactive({ count: 0 });
watchEffect(() => {
  console.log(`Count is: ${state.count}`);
});

3. 逻辑复用

通过自定义函数封装可复用逻辑（类似 React Hooks）。

// useCounter.js
import { ref } from 'vue';
export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
}

二、性能优化

1. 基于 Proxy 的响应式系统

Vue 3 使用 Proxy 替代 Object.defineProperty，支持：
- 监听数组变化（无需重写数组方法）。
- 动态添加/删除属性。
- 更好的性能表现。

2. Tree-shaking 支持

按需引入 API，未使用的功能不会被打包到生产环境，减少代码体积。

3. 编译时优化

静态节点提升（Static Hoisting）：将静态节点提升到渲染函数外部，避免重复渲染。
补丁标志（Patch Flags）：标记动态节点类型，优化虚拟 DOM 的 diff 过程。
缓存事件处理函数：减少不必要的更新。

三、新组件特性

1. Fragment（片段）

组件支持多根节点，无需包裹一个父元素。

<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>

2. Teleport（传送门）

将组件渲染到 DOM 中的任意位置（如全局弹窗）。

<template>
  <button @click="showModal">打开弹窗</button>
  <Teleport to="body">
    <Modal v-if="isShow" />
  </Teleport>
</template>

3. Suspense（异步组件）

优雅地处理异步组件加载状态。

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

四、TypeScript 支持

Vue 3 使用 TypeScript 重写，提供更完善的类型推断。
组件选项（如 props、emits）支持类型声明。

interface Props {
  title: string;
}
export default defineComponent({
  props: {
    title: {
      type: String as PropType<Props['title']>,
      required: true
    }
  }
});

五、其他改进

1. 全局 API 调整

使用 createApp 代替 new Vue()，避免全局配置污染。

import { createApp } from 'vue';
const app = createApp(App);
app.use(router).mount('#app');

2. 自定义渲染器

允许开发者自定义渲染逻辑（如 WebGL、Canvas 渲染）。

3. 多个 `v-model` 绑定

支持在单个组件上绑定多个 v-model。

<ChildComponent v-model:name="name" v-model:age="age" />

4. 生命周期调整

beforeDestroy 和 destroyed 更名为 beforeUnmount 和 unmounted。
新增 renderTracked 和 renderTriggered 用于调试响应式依赖。

六、生态适配

Vue Router 4：支持 Vue 3 的路由库。
Vuex 4：状态管理库适配。
Vite：新一代构建工具，提供极速开发体验。
vue：脚手架https://cli.vuejs.org/config/
vue3文档： https://cn.vuejs.org/guide/introduction.html

总结

Vue 3 通过 Composition API 提升了代码组织和复用能力，通过 Proxy 和编译优化显著提升了性能，并引入了 Fragment、Teleport 等新特性简化开发。同时，完善的 TypeScript 支持使其更适合大型项目。如需迁移 Vue 2 项目，可使用官方迁移工具逐步升级。