vue3 composition api

娜娜_nana
2,289 阅读5分钟

前言：最近学习了vue3的Composition API，翻看了它的官方文档和相关文章，并在项目中使用Composition Api改造了部分页面，下面就跟大家分享下vue3的这个新特性。

1

Option API和Composition API的不同？

回顾Option API

首先回顾下我们使用Option Api遇到的问题，我们在Vue2中常常会需要在特定的区域（data，methods，watch，computed...）编写负责相同功能的代码。随着业务复杂度越来越高，代码量会不断的加大；由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护非常的复杂，代码可复用性也不高。

2

Composition API

使用composition api 可以更加优雅的组织代码、函数，让相关功能的代码更加有序的组织在一起

3

Composition API配置、使用

4

setup执行时机

setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。创建组件实例，然后初始化 props ，紧接着就调用setup 函数。从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用。 5

生命周期

6 可以直接导入 onXXX 一族的函数来注册生命周期钩子，这些生命周期钩子注册函数只能在 setup() 期间同步使用， 因为它们依赖于内部的全局状态来定位当前组件实例（正在调用 setup() 的组件实例）, 不在当前组件下调用这些函数会抛出一个错误。 7

响应式数据如何定义？

ref：接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value，一般来定义简单类型 reactive：接收一个普通对象然后返回该普通对象的响应式代理，一般来定义索引类型

15 16 14 10 不过目前网上对于ref这个语法糖争议还是很大，甚至还提出了ref语法糖提案，关于ref提案发生了什么，大家可以移步阅读下这篇文章-Vue3的Ref提案到底发生什么事

计算属性

计算属性和2.x的写法也有些不同，需要导出computed(),不过同样也支持get()和set()，支持修改计算状态 20

Vue3监听（watchEffect）

Vue3监听提供了两个API，watchEffect和watch，其中watch API完全等效于2.X的this.$watch(以及其中的选项)，那我们来看看watchEffect有什么不同点 17

  • watch初次渲染不执行，而watchEffect在组件初始化时就会执行一次用以手机依赖
  • watch侦听的更具体，而watchEffect不需要指定监听的属性，直接引用响应式对象，当响应式对象值改变时，触发监听
  • watch可以访问侦听数据变化前后的值，而watchEffect侦听不到

Vue3有哪些不一样了？

  • 重写了响应式

我们来回顾下2.X的响应式原理

19

  • 初始话vue时，会遍历data,通过 Object.defineProperty() 替换配置对象属性的 set、get 方法，实现“数据劫持”
  • watcher 在执行 getter 函数时触发数据的 get 方法，从而建立依赖关系
  • 当写入数据时会触发set函数，从而借助 dep 发布通知，进而 watcher 进行更新

vue3的响应式原理

22

  • effect会接收一个回调函数cb，并把这个cb函数保存在effectStack里，effect内部会立即执行一次cb函数
  • 在执行的过程中，会触发了obj.name属性的get代理函数，在代理函数里面做订阅track(target), 而track函数则会将存在全局数组中的cb函数取出来，保存在map中,类似于map.set('name',cb)
  • 在name属性被修改的时候，会触发name属性的set代理函数，在代理函数里面执行trigger。最后，trigger会将之前存在map里的订阅着取出来执行，map.get('name')()

解决了2.x的响应式哪些痛点

  • 递归，消耗大
  • 数组需要额外实现
  • 增加、删除属性，需要使用额外的API
  • Map Set Class等数据类型，无法响应式

支持tree-shaking

由于 Vue 的不断成长，其体积也变得越来越大（打包后也很大）。Vue 3 通过对源码结构的调整，让更多的特性实现了对 Tree-shaking 的支持，打包体积小了，提升了性能 25

虚拟DOM diff算法

与2.x不同的是，vue3中不再将静态资源进行diff，而2.x中像html的标签静态资源都会进行diff，这样在性能上提升了很多

vue3缺点

鲁迅曾说过，看待事物不能只看一面，我们要全面的去判断这个事物。在前面我们介绍了这么多vue3的优点，也来说说它的缺点。 26 从上图中可以看出它是完全不支持IE浏览器的，所以它存在浏览器兼容性问题。因为vue3目前还在Beta阶段，尤雨溪大神也说明，先前团队所规划的新特性已经全部完成开发，但暂时还不建议升级生产环境应用，升级指南和配套工具都还没有完善，接下来的工作将会致力于框架的整体稳定性和周边库的新版本适配。

最后

希望本次的分享能帮助大家更好的了解vue3 Composition API，在后续的开发中，大家可以尝试在自己的项目中去落地它，来体验下这真香的感觉。

avatar
文章
阅读
粉丝