Vue 3 基础用法与和 Vue 2 的写法差异

太微2025-04-08前端Vue Vue3 入门

Vue 3 基础用法与和 Vue 2 的写法差异

Vue 3 在保留 选项式 API（Options API） 的同时，引入 组合式 API（Composition API） 与 <script setup> SFC 语法糖，并统一用 createApp 创建应用实例。下面先讲「Vue 3 怎么写」，再对照 Vue 2 说明写法上的区别、新增模式，以及优缺点。

1. 应用入口：从 `new Vue` 到 `createApp`

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

对比项	Vue 2	Vue 3
创建应用	`new Vue({ ... })`	`createApp(...)`
挂载	`vm.$mount("#app")` 或 `el`	`app.mount("#app")`
全局注册	`Vue.component` / `Vue.use`	`app.component` / `app.use`

同一页可挂载多个应用，互不污染全局配置；插件与全局 API 挂在 app 实例上，而不是 Vue 构造函数。

2. 组合式 API：逻辑按「功能」组织

Vue 3 推荐用 setup（或 <script setup>）把「同一业务相关的状态与计算」写在一起，而不是按 data / methods / computed 拆开。

2.1 `ref` / `reactive` 与 Vue 2 的 `data`

ref：包装基本类型或对象；在模板里自动解包，在 setup 里要用 .value 读写（对象除外仍建议 .value 访问引用）。
reactive：返回对象的代理，适合「一组键值对象」；解构会丢失响应式，需 toRefs 或 storeToRefs（Pinia）等。

Vue 2 里 data 返回的对象经 Object.defineProperty 处理；Vue 3 用 Proxy，新增/删除属性一般也能被追踪，不再依赖 Vue.set（老项目迁移时这点差异最大）。

2.2 `computed` / `watch` / `watchEffect`

写法从「选项里的函数」变为 computed(() => ...)、watch(source, callback)、watchEffect(() => ...)。watchEffect 会自动收集依赖，适合「多个源一起变就执行」的场景。

2.3 生命周期：命名与调用方式

Vue 2（选项）	Vue 3 组合式（`setup` 内）
`beforeCreate` / `created`	直接在 `setup` 顶层写代码（无 `beforeCreate` 等价）
`beforeMount`	`onBeforeMount`
`mounted`	`onMounted`
`beforeUpdate`	`onBeforeUpdate`
`updated`	`onUpdated`
`beforeDestroy`	`onBeforeUnmount`
`destroyed`	`onUnmounted`

销毁阶段在 Vue 3 中统一为 Unmount 语义。

3. `<script setup>`：当前默认的「新写法」

在 SFC 中，<script setup> 与 <script> 二选一（或搭配使用需遵循文档规则）。特点：

顶层绑定（变量、函数、import）自动暴露给模板，无需 return。
defineProps / defineEmits / defineExpose / defineOptions（Vue 3.3+）为编译期宏，无需 import。
类型友好：可与 TypeScript、泛型 props 配合。

与 Vue 2 典型写法相比：少写 export default { ... } 一大坨选项，props / emits 声明更贴近类型。

4. 与 Vue 2 相比：写法对照简表

能力	Vue 2 常见写法	Vue 3 常见写法
组件状态	`data() { return { n: 0 } }`	`const n = ref(0)` 或 `reactive({ n: 0 })`
方法	`methods: { inc() {} }`	顶层 `function inc() {}` 或 `const inc = () => {}`
计算属性	`computed: { ... }`	`computed(() => ...)`
侦听	`watch: { a() {} }`	`watch(() => a, ...)` 或 `watchEffect`
全局 API	`Vue.xxx`	具名导出：`import { ... } from 'vue'`（如 `nextTick`）
过滤器 `filter`	`{{ msg \| capitalize }}`	已移除，用方法或计算属性

5. Vue 3 新增或强化的「模式」与能力（节选）

多根节点（Fragment）：模板可有多个根节点，不必再包一层无意义 <div>。
Teleport：把模态框、弹层挂载到 body 等任意 DOM 节点，避免层级嵌套问题。
Suspense（实验性）：异步组件与「加载中占位」的协调写法。
v-memo / v-once 等：在特定场景下减少不必要的重渲染（需按文档使用）。
多个 v-model：同一组件可绑定多个双向值，如 v-model:title、v-model:visible 等（对应 emit 更新）。
<script setup> + defineProps / defineEmits：声明式、类型友好的 props / 事件。

6. 优点

优点	说明
组合式 API	大型组件里逻辑可按功能聚合，复用用 `composables`（组合函数）比 mixin 更清晰
响应式模型	Proxy 对对象增删、数组下标等更自然，心智负担小于 Vue 2 的 `$set` 场景
性能与体积	更细粒度的更新、tree-shaking 友好，按 API 引入更易摇掉未用代码
TypeScript	与 `<script setup>`、泛型 props 配合更好
生态	官方推荐 Vite，开发体验与 Vue 3 配套成熟

7. 缺点与注意点

缺点 / 注意点	说明
学习曲线	需理解 `ref`/`reactive`、解构丢失响应式、`setup` 执行时机等
选项式仍可用	团队可混用，但需约定规范，避免同一组件内风格分裂
破坏性变更	过滤器移除、全局 API 变更、事件总线需用 `mitt` 等替代方案自行接入
浏览器	若需支持 IE11，Vue 3 不支持，只能维持 Vue 2 或换技术栈

8. 小结

Vue 3 推荐：createApp + <script setup> + 组合式 API，配合 Vite 与 TypeScript。
与 Vue 2 相比，写法上从「按选项分类」转向「按逻辑组合」；运行时从 new Vue 与 Vue.set 转向 createApp 与 Proxy 响应式。
深入实现层对比可见 Vue 2 核心实现思路与 Vue 3 的主要区别；Vue 2 语法速查可参阅 Vue 2 基础用法与注意点。

Vue 3 基础用法与和 Vue 2 的写法差异

ON THIS PAGE