Vue3语法有哪些核心变化和实用技巧？

现在前端圈子里,Vue3的讨论热度一直没降过，不少刚接触Vue3的开发者，或者打算从Vue2升级的同学，总会纠结：Vue3语法和之前到底有啥核心变化？实际开发里怎么把这些新语法用顺？今天咱用问答的形式，把Vue3语法的关键知识点、实用技巧掰碎了聊聊，帮大家把思路理得更清楚~

组合式API和选项式API，该怎么选？

先把最基础的争议点说清楚：Vue3同时支持选项式API（就是Vue2里常用的data、methods、computed那种分选项写代码的方式）和组合式API（基于setup函数+Composition API的写法），选哪个，得看项目规模和团队习惯。

选项式API对新手特友好,逻辑按“数据、方法、计算属性”分类，结构清晰，小项目开发速度快，但项目一复杂，比如一个组件要处理“用户登录态管理+表单验证+图表数据请求”，代码就会分散在data、methods、watch里，找逻辑得来回跳，维护起来头疼。

组合式API刚好解决这个问题！它允许你把相关逻辑打包成“逻辑块”，比如把“用户信息加载”的逻辑（包括reactive定义数据、onMounted发请求、watch监听参数变化）全放在一个函数里，然后在setup里调用，这样不同功能的逻辑互不干扰，复用起来也方便（把逻辑函数抽成单独文件，其他组件直接引入）。

所以小项目、快速Demo用选项式API没问题；中大型项目、需要逻辑复用的场景，组合式API更易维护，Vue3没强迫二选一，甚至能在一个组件里混用（但不推荐，风格统一更重要），新启动的项目，更建议试试组合式API，毕竟这是Vue团队主推的方向~

Vue3响应式原理变了，开发时要注意啥？

Vue2用Object.defineProperty实现响应式，Vue3换成了Proxy，这俩的区别，直接影响开发时的写法，得重点关注！

先看Proxy的优势：
1. 数组变化能直接监听：Vue2里修改数组下标（比如arr[0] = 1）、修改长度（arr.length = 0）不会触发更新，得用push/pop这类重写的数组方法；Vue3里直接改数组下标、长度，响应式也能感知到。
2. 对象新增/删除属性能响应：Vue2里给对象动态加属性（比如user.age = 18），得用this.$set(user, 'age', 18)才会触发更新；Vue3里直接赋值就能响应。
3. 性能更好：Proxy代理的是整个对象，不用像Object.defineProperty那样遍历对象每个属性，初始化响应式时速度更快。

但Proxy也有“坑”要避：
- 基本类型不是响应式的：像数字、字符串、布尔值，直接定义let count = 1，修改count不会触发界面更新，这时候得用ref包一层：const count = ref(1)，修改时用count.value = 2。
- ref和reactive的区别：ref适合包基本类型，或者单个对象/数组（比如只需要响应式的一个对象）；reactive适合包复杂对象/数组（比如一个包含用户信息、订单列表的大对象），模板里用ref不用写.value（自动解包），但在setup函数里操作得写.value；reactive包的对象，直接操作属性就行，不用.value。

举个实际开发的例子：做一个计数器，初始值是0，用Vue2得写data() { return { count: 0 } }，修改用this.count++；Vue3用ref的话，const count = ref(0)，setup里改count.value++，模板里直接用{{ count }}，要是用户信息对象，Vue3用const user = reactive({ name: '张三' })，改名字直接user.name = '李四'就行，不用额外操作~

setup语法糖是啥？用起来有多爽？

如果你看过Vue3早期的代码,会发现setup函数写起来有点“繁琐”——得在setup里return变量和方法，才能给模板用；引入子组件后，还得在components里注册，直到Vue3.2推出语法糖，这些麻烦全没了！

先看写法对比：
Vue3.2前的写法：