Vue 3.0真香！用了半年后我来告诉你为什么这么爽

大家好，我是小杨，一个做了6年前端的老油条。Vue 3.0正式发布后，我就迫不及待地在项目中用了起来。用了大半年，今天就来和大家聊聊Vue 3.0到底香在哪里，为什么我说它是真的爽！

1. 性能起飞！打包体积小了40%

记得第一次用Vue 3.0打包项目的时候，我盯着打包结果看了半天 - 体积比Vue 2小了将近40%！这主要得益于Vue 3.0的模块化设计和Tree-shaking支持。

javascript 复制代码

// Vue 2的打包结果
import Vue from 'vue' // 整个Vue都被打包进来了

// Vue 3的打包
import { ref, reactive } from 'vue' // 只打包用到的部分

2. Composition API：逻辑复用不再头疼

以前在Vue 2里复用逻辑，要么用mixin（容易命名冲突），要么用高阶组件（嵌套地狱）。现在有了Composition API，我终于可以像搭积木一样组织代码了。

比如我要做一个用户信息的逻辑复用：

javascript 复制代码

// user.js
export function useUser() {
  const user = ref(null)
  
  const fetchUser = async (id) => {
    const response = await fetch(`/api/users/${id}`)
    user.value = await response.json()
  }
  
  return { user, fetchUser }
}

// 我的组件里
import { useUser } from './user'

export default {
  setup() {
    const { user, fetchUser } = useUser()
    
    onMounted(() => {
      fetchUser(123)
    })
    
    return { user }
  }
}

3. TypeScript支持：真香警告！

作为一个TypeScript爱好者，Vue 2的TS支持总让我觉得差点意思。Vue 3从底层就用TS重写了，现在写起来那叫一个丝滑！

typescript 复制代码

interface 我 {
  name: string
  age: number
}

const me = reactive<我>({
  name: '小杨',
  age: 28
})

4. 更灵活的响应式系统

Vue 3用Proxy重写了响应式系统，现在连Map、Set这些数据结构都能直接响应了！

javascript 复制代码

const myMap = reactive(new Map())

myMap.set('key', 'value') // 自动触发更新！

5. 多个根节点：终于不用再套div了！

以前写组件总得包个div，现在终于解放了：

html 复制代码

<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>

6. 自定义渲染器：脑洞大开

Vue 3把渲染逻辑抽离了出来，现在你甚至可以用Vue来开发命令行应用或者Canvas游戏！

7. 更好的TypeScript支持

再说一遍，因为真的香！现在组件props的类型检查超级强大：

typescript 复制代码

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    name: {
      type: String,
      required: true
    },
    age: Number
  },
  setup(props) {
    // props有完整的类型推断！
    console.log(props.name)
  }
})

我的升级建议

如果你是新项目，直接上Vue 3没毛病。如果是老项目，可以先用Vue 2.7（兼容Vue 3 API的过渡版本），逐步迁移。

最后说两句

用了半年Vue 3，我是真的回不去了。虽然学习曲线有点陡，但一旦熟悉了Composition API，写代码的效率和质量都提升了不少。特别是TypeScript的支持，让大型项目的维护变得轻松多了。

你们团队用上Vue 3了吗？欢迎在评论区分享你的体验！如果觉得有用，别忘了点赞收藏～

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！