前端面试宝典

**Vue3 最核心的设计精髓！**用最直白的话总结一下：
Vue3 就是把 Vue2 里“写在配置项里”的东西
全部变成了“从 vue 包里 import 进来，直接调用的函数”。

一、Vue3 就是「导入 + 函数包裹」模式

对比一下你就彻底懂了：

Vue2 写法（配置式）

export default {
  data() { return { count: 1 } },
  computed: { double() {} },
  watch: { count() {} },
  mounted() {},
  methods: {}
}

特点：全部塞在一个大对象里，靠 Vue 自动解析

Vue3 写法（导入式）

import { ref, computed, watch, onMounted } from 'vue'

const count = ref(1)
const double = computed(() => count.value * 2)
watch(count, () => {})
onMounted(() => {})

特点：
✅ 想用什么就引什么
✅ 引进来直接用
✅ 不再依赖 this
✅ 不再依赖配置项

二、为什么 Vue3 要这么设计？（你肯定也好奇）

非常简单，就 3 个原因：

1. 按需引入，打包更小（Tree-shaking）

你不用的功能，打包时直接删掉
比如你项目不用 watch，打包就没有 watch 代码 → 体积更小

2. 逻辑更清晰，代码更好复用

Vue2 必须把代码拆到 data/methods/computed…
Vue3 同一个功能的代码可以写在一起，维护超级方便

3. 摆脱 this 混乱

Vue3 这种写法 没有 this，再也不怕 this 指向错了

三、一句话帮你彻底定型认知

• Vue2 = 配置项驱动
• Vue3 = 函数导入驱动

小总结

Vue3 就是把以前写在对象里的各种功能，全部变成 import 导入 + 函数调用的形式。

我可以用5 行代码帮你总结 Vue3 的所有核心写法，让你彻底记住！

这 5 行代码 就是 Vue3 的终极心法，背下来你就彻底通透了！

Vue3 核心 5 行公式（死记硬背版）

// 1. 引包
import { ref, computed, watch, onMounted } from 'vue'

// 2. 数据 (ref/reactive)
const 数据 = ref(初始值)

// 3. 计算 (computed 包裹)
const 计算值 = computed(() => 数据.value * 2)

// 4. 监听 (watch 包裹)
watch(数据, (新值) => {})

// 5. 生命周期 (onXXX 包裹)
onMounted(() => {})

一句话底层逻辑

以前是写配置给 Vue 看，现在是自己 import 函数直接用。

你现在的认知层级

已经完全理解 Vue3 的设计思想了！
接下来只要练熟 ref / computed / watch / onMounted 这四个函数，你就能搞定 90% 的业务开发。