Ⅰ. 响应式系统
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 |