让你30分钟快速掌握Vue 3

经过了漫长的迭代，Vue 3.0 终于在上 2020-09-18 发布了，带了翻天覆地的变化，使用了 Typescript 进行了大规模的重构，带来了 Composition API RFC 版本，类似 React Hook 一样的写 Vue，可以自定义自己的 hook ，让使用者更加的灵活，接下来总结一下 vue 3.0 带来的部分新特性。

1. setup()
2. ref()
3. reactive()
4. isRef()
5. toRefs()
6. computed()
7. watch()
8. LifeCycle Hooks(新的生命周期)
9. Template refs
10. globalProperties
11. Suspense

Vue2 与 Vue3 的对比

• 对 TypeScript 支持不友好（所有属性都放在了 this 对象上，难以推倒组件的数据类型）
• 大量的 API 挂载在 Vue 对象的原型上，难以实现 TreeShaking。
• 架构层面对跨平台 dom 渲染开发支持不友好
• CompositionAPI。受 ReactHook 启发
• 更方便的支持了 jsx
• Vue 3 的 Template 支持多个根标签，Vue 2 不支持
• 对虚拟 DOM 进行了重写、对模板的编译进行了优化操作...

一、setup 函数

setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口, setup 函数会在 beforeCreate 之后、created 之前执行, vue3 也是取消了这两个钩子，统一用 setup 代替, 该函数相当于一个生命周期函数，vue 中过去的 data，methods，watch 等全部都用对应的新增 api 写在 setup()函数中

setup(props, context) {
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs

    return {

    }
  }

• props: 用来接收 props 数据
• context 用来定义上下文, 上下文对象中包含了一些有用的属性，这些属性在 vue 2.x 中需要通过 this 才能访问到, 在 setup() 函数中无法访问到 this，是个 undefined
• 返回值: return {}, 返回响应式数据, 模版中需要使用的函数

二、reactive 函数

reactive() 函数接收一个普通对象，返回一个响应式的数据对象, 想要使用创建的响应式数据也很简单，创建出来之后，在 setup 中 return 出去，直接在 template 中调用即可