【Vue】Vue2 和 Vue3 的区别

文章目录

• [Ⅰ. 响应式系统](#Ⅰ. 响应式系统)
• • [Vue 2](#Vue 2)
  • [Vue 3](#Vue 3)
• [Ⅱ. 组件写法对比](#Ⅱ. 组件写法对比)
• • [Vue 2 选项式 API](#Vue 2 选项式 API)
  • [Vue 3 组合式 API + `<script setup>`（推荐⭐）](#Vue 3 组合式 API + <script setup>（推荐⭐）)
  • [选项式API 和 组合式API 的区别](#选项式API 和 组合式API 的区别)
• [Ⅲ. 生命周期钩子对比](#Ⅲ. 生命周期钩子对比)
• [Ⅳ. 模板和根节点](#Ⅳ. 模板和根节点)
• [Ⅴ. `v-model` 的使用差异](#Ⅴ. v-model 的使用差异)
• [Ⅵ. 新特性：Teleport、Suspense](#Ⅵ. 新特性：Teleport、Suspense)
• [Ⅶ. 性能优化](#Ⅶ. 性能优化)
• [Ⅷ. TypeScript 支持](#Ⅷ. TypeScript 支持)
• [Ⅸ. 工具链和生态](#Ⅸ. 工具链和生态)

Ⅰ. 响应式系统

Vue 2

new Vue({       // 通常判断这是不是CDN版本，只需要看对象是不是Vue
  data() {
    return {
      count: 0,
      info: { name: 'Vue2' }
    }
  },
  methods: {
    increment() { this.count++ },
    addProperty() { 
      // 新增属性需要 Vue.set 才能响应式
      Vue.set(this.info, 'age', 3)
    }
  }
})

特点：

• 这种属于传统写法，通常写在入口文件里 ，比如 main.js，直接挂载到页面 <div id="app"></div>。适合小 demo 或者快速实验。
• 响应式依赖 Object.defineProperty，只能拦截已有属性。
• 新增属性或数组索引必须使用 Vue.set 或 Vue.$set 才能触发更新。
• 对深层对象和数组响应式性能有限。

判断是否传统写法的依据：

• 是否使用 new Vue()
  • new Vue({...}) 是 Vue 2 的标准写法，也是"全局 Vue 对象 + 根实例"的模式。
  • 在现代 Vue 3 项目里，一般不会直接用 new Vue()，而是用 createApp(App) 来创建应用实例。
• 是否在 CDN 环境下
  • 如果你直接在浏览器里 <script src="https://cdn.jsdelivr.net/.../vue.js"></script> 然后写 new Vue({...})，通常就是快速 demo / 教学 / 小型页面，不使用模块化打包工具。
• 语法风格
  • 使用 data + methods + Vue.set 这种选项式 API，也属于传统开发模式。
  • 现代 Vue 3 推荐使用 组合式 API + <script setup> ，不需要 Vue.set，逻辑可拆分为可复用的 composable 函数。

Vue 3

<script setup>
    import { ref, reactive } from 'vue'
    
    const count = ref(0)
    const info = reactive({ name: 'Vue3' })
    
    const increment = () => count.value++
    const addProperty = () => info.age = 3  // Proxy 自动跟踪，无需 Vue.set
</script>

<template>
  <p>{{ count }} - {{ info.name }} - {{ info.age }}</p>
  <button @click="increment">加1</button>
  <button @click="addProperty">加 age</button>
</template>

特点：

• 写在单文件组件 .vue 中
• 使用 Proxy 实现响应式，自动跟踪新增属性和数组更新。
• 性能更高，支持深层对象响应式。
• ref 用于基本类型，reactive 用于对象类型。

Ⅱ. 组件写法对比

Vue 2 选项式 API

export default {
  data() {
    return { count: 0 }
  },
  computed: {
    double() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ }
  },
  mounted() {
    console.log('组件挂载了')
  }
}

特点：

• 这是一个组件对象 ，通常写在单文件组件 .vue 中。
• 逻辑按 选项（data、methods、computed） 分散，复杂组件逻辑不易复用。
• 模板里变量通过 this.xxx 访问。
• 生命周期钩子写法固定。

Vue 3 组合式 API + <script setup>（推荐⭐）

<script setup>
    import { ref, computed, onMounted } from 'vue'
    
    const count = ref(0)
    const double = computed(() => count.value * 2)
    
    const increment = () => count.value++
    
    onMounted(() => console.log('组件挂载了'))
</script>

<template>
  <p>{{ count }} / {{ double }}</p>
  <button @click="increment">加1</button>
</template>

特点：

• <script setup> 自动把变量暴露给模板，无需 return。
• 逻辑可以通过 composable 函数 拆分和复用。
• 生命周期函数如 onMounted、onUpdated、onUnmounted 语义直观。

选项式API 和 组合式API 的区别

对比点	选项式 API	组合式 API
写法风格	data、methods、computed 分散	ref、reactive、函数集中组织
this 使用	依赖 this	不用 this，直接变量
逻辑复用	mixin（容易冲突）	Composable（清晰可控）
学习难度	简单直观	稍陡峭
项目规模适配	小型项目合适	中大型项目优势明显
Vue 官方态度	继续支持，但推荐学习	Vue3 官方推荐方式

Ⅲ. 生命周期钩子对比

功能	Vue 2	Vue 3
创建	beforeCreate	setup() 开始执行
挂载	mounted	onMounted()
更新	updated	onUpdated()
卸载	destroyed	onUnmounted()

Ⅳ. 模板和根节点

Vue 2

<template>
  <div>节点1</div>
  <!-- Vue 2 只能有一个根节点 -->
</template>

Vue 3

<template>
  <div>节点1</div>
  <div>节点2</div>
  <!-- Vue 3 支持多根节点（Fragment） -->
</template>

特点：

• Vue 3 支持 Fragment，组件返回多个根节点，减少无意义的包裹元素。

Ⅴ. v-model 的使用差异

Vue 2

<input v-model="text" />

Vue 3

<MyComp v-model:title="title" v-model:content="content" />

特点：

• Vue 3 支持自定义 prop 名的多 v-model 绑定，方便父子组件双向绑定。

Ⅵ. 新特性：Teleport、Suspense

Teleport

<template>
  <Teleport to="body">
    <div class="modal">弹窗内容</div>
  </Teleport>
</template>

可以把组件渲染到任意 DOM 节点，非常适合模态框或浮层。

Suspense

<template>
  <Suspense>
    <AsyncComp />
    <template #fallback>加载中...</template>
  </Suspense>
</template>

支持异步组件加载显示 fallback UI。

Ⅶ. 性能优化

优化	Vue 2	Vue 3
静态提升	❌	✅ 编译器提升静态节点，减少更新开销
编译优化	基础优化	更智能的静态树分析、事件绑定优化
Tree Shaking	部分支持	完全支持，减小打包体积
Proxy 响应式	❌	✅ 深层对象无需 Vue.set

Ⅷ. TypeScript 支持

• Vue 2：需要大量类型声明，组合逻辑难以推导类型。
• Vue 3 ：官方支持 TS，ref、reactive、computed 自动类型推导，模板变量类型也能推导。

Ⅸ. 工具链和生态

项目	Vue 2	Vue 3
Vue Router	v3	v4（Vue 3 专用）
Vuex	v3	v4
构建工具	Vue CLI	Vite 推荐，热更新更快，打包更轻量
社区插件	多基于 Vue 2	需要迁移或支持 Vue 3