vue3新特特性

<meta charset="utf-8">

Vue3.0新特性

1. 性能

   • 双向响应原理由Object.defineProperty改为基于ES6的Proxy，使其颗粒度更大，速度更快
   • 重写了 Vdom ，突破了 Vdom 的性能瓶颈
   • 进行了模板编译的优化
   • 进行了更加高效的组件初始化

2. Tree-Shaking 的支持
   支持了 tree-shaking （剪枝）：像修剪树叶一样把不需要的东西给修剪掉，使 Vue3 的体积更小。

   需要的模块才会打入到包里，优化后的 Vue3.0 的打包体积只有原来的一半（13kb），像 keep-alive 、 transition 甚至 v-for 等功能都可以按需引入。

3. Composition API
   composition-api 是一个 Vue3 中新增的功能，它的灵感来自于 React Hooks ，是比 mixin 更强大的存在。

   composition-api 可以提高代码逻辑的可复用性，从而实现与模板的无关性；同时使代码的可压缩性更强。另外，把 Reactivity 模块独立开来，意味着 Vue3.0 的响应式模块可以与其他框架相组合。

`composition-api` 把复杂组件的逻辑抽地更紧凑，而且可以将公共逻辑进行抽取。

4. Fragments
   不再限制 template 只有一个根节点。
   render函数也可以返回数组了，有点像 React.Fragments

5. Better TypeScript Support
   更好的类型推导，使得 Vue3 把 TypeScript 支持得非常好

6. Custom Renderer API
   实现用DOM的方式进行 WebGL 编程

体验Vue3.0

初始化项目

1. 使用脚手架创建项目

   vue create my-Project
   
   

2. 安装composition-api，体验新特性

   npm i @vue/composition-api -s
   
   

3. 使用插件

   // main.js
   
   import Vue from 'vue'
   import VueCompositionAPI from '@vue/composition-api'
   
   Vue.use(VueCompositionAPI)
   
   

Setup函数

setup()函数是Vue3.0中，专门为组件提供的新属性。它为基于Composition API的新特性提供了统一的入口。

在Vue3中，定义methods、watch、computed、data数据都放在了setup()函数中

1. 执行时机

setup()函数会在created()生命周期之前执行。

2. 接收props数据

props是setup()函数的一个形参，组件接收的props数据可以在setup()函数内访问到。

setup(props) {
    console.log(props.p1)
}

3. context上下文对象

context 是 setup() 的第二个形参，它是一个上下文对象，可以通过 context 来访问Vue的实例 this 。

setup(props,context) {
    console.log(this)
    console.log(context)
}

注意：在 setup() 函数中访问不到Vue的 this 实例

链接：https://www.jianshu.com/p/1fd73091e2e4