来源:https://juejin.im/post/6855473771013226503
作者:XxjzZ @美团-大数据
自从React Hooks出现之后,批评的声音不断,很多人说它带来了心智负担,因为相比传统的Class写法,useState/useEffect的依赖于执行顺序的特点让人捉摸不透。与此相对的,在Vue3 Composition API RFC 中,我们看到Vue3官方描述CompositionAPI是一个基于已有的"响应式"心智模型的更好方案,这让我们觉得好像不需要任何心智模型的切换就可以迅速投入到Compositoin API的开发中去。但在我尝试了一段时间后,发现事实并非如此,我们依然需要一些思维上的变化来适应新的Compsition API。
先看一个Vue2简单例子:
<template> <div id="app"> {{count}} <button @click="addCount"></button> </div> </template> <script> export default { data() { return { count: 0 } }, methods: { addCount() { this.count += 1 } } }; </script>在Vue2的心智模型中,我们总会在data中返回一个对象,我们并不关心对象的值是简单类型还是引用类型,因为它们都能很好的被响应式系统处理,就像上面这个例子一样。但是,如果我们不作任何心智模型的变化,就开始使用Composition API,我们就容易写出这样的代码:
<template> <div id="app"> {{count}} <button @click="addCount"></button> </div> </template> <script> import { reactive } from '@vue/runtime-dom' export default { setup() { const data = reactive({ count: 0 }) function addCount() { data.count += 1 } return { count: data.count, addCount } } }; </script>实际上,这段代码不能正常运作,当你点击button时,视图不会响应数据变化。原因是,我们先将data中的count取了出来,再合并到this.$data中,但是一旦count被取出来,它就是一个单纯的简单类型数据,响应式就丢了。
数据结构越复杂,我们就越容易落入陷阱,在这里我们把一段业务逻辑抽离到自定义hooks里,如下:
// useSomeData.js import { reactive, onMounted } from '@vue/runtime-dom' export default function useSomeData() { const data = reactive({ userInfo: { name: 'default_name', role: 'default_role' }, projectList: [] }) onMounted(() => { // 异步获取数据 fetch(...).then(result => { const { userInfo, projectList } = result data.userInfo = userInfo data.projectList = projectList }) }) return data }然后像往常一样,我们在业务组件中去使用:
// App.vue <template> <div> {{name}} {{role}} {{list}} </div> </template> <script> import useSomeData from './useSomeData' export default { setup() { const { userInfo, projectList } = useSomeData() return { name: userInfo.name // 响应式断掉 role: userInfo.role, // 响应式断掉 list: projectList // 响应式还是断掉 } } } </script>我们看到,不管我们从响应式数据里取出什么(简单类型 or 引用类型),都会导致响应式断掉,进而无法更新视图。
所有这些问题的根源都是:setup只会执行一次。
时刻记住setup只会执行一次
永远不要直接使用简单类型
解构可能有风险,优先使用引用本身,而不是解构它
可以通过一些手段让解构变得安全
简单陷阱:永远不要直接使用简单类型
复杂陷阱-方案1:解构可能有风险,优先使用引用本身,而不是解构它
复杂陷阱-方案2:可以通过computed让解构变得安全
复杂陷阱-方案3:方案2需要额外写一些computed属性,比较麻烦,我们还可以通过toRefs让解构变得安全
你以为这样就好了吗?其实这里有一个陷阱中的陷阱:projectList好了,但是name和role依然是响应式断开的状态,因为toRefs只会”浅“包裹,实际上useSomeData返回的结果是这样的:
const someData = useSomeData() ↓ { userInfo: { value: { name: '...', // 依然是简单类型,没有被包裹 role: '...' // 依然是简单类型,没有被包裹 } }, projectList: { value: [...] } }因此,我们的useSomeData如果想要通过toRefs实现真正的解构安全,需要这样写:
// useSomeData.js import { reactive, onMounted } from '@vue/runtime-dom' export default function useSomeData() { ... // 让每一层级都套一层ref return toRefs({ projectList: data.projectList, userInfo: toRefs(data.userInfo) }) }建议:使用自定义hooks返回数据的时候,如果数据的层级比较简单,可以直接使用toRefs包裹;如果数据的层级比较复杂,建议使用computed。
上述操作其实是Vue官方使用CompositionAPI的标准方式,因为CompositionAPI完全就是按照setup只会执行一次进行设计的。但是不可否认的是,这的确带来了许多心智负担,因为我们不得不时刻关注响应式数据到底能不能解构,不然一不小心就容易调到坑里。
其实所有这些问题都出在setup只会执行一次,那么有没有办法解决呢?有的,可以使用JSX或h的写法,绕过setup只会执行一次的问题:
还是这个存在安全隐患的自定义hooks:
// useSomeData.js import { reactive, onMounted } from '@vue/runtime-dom' export default function useSomeData() { const data = reactive({ userInfo: { name: 'default_name', role: 'default_role' }, projectList: [] }) onMounted(() => { // 异步获取数据 fetch(...).then(result => { const { userInfo, projectList } = result data.userInfo = userInfo data.projectList = projectList }) }) return data }在使用JSX或h的时候,setup需要返回一个函数,这个函数其实就是render函数,它在数据变化时会重新执行,所以我们只需要把解构的逻辑放到render函数里,那么就解决了setup只会执行一次的问题。
我们可能需要一些约定,来约束自定义hooks的使用方式。但是官方并没有给出,这将导致我们hooks会写的五花八门,并且漏洞百出。目前来看,”不要解构“是最安全的方式。
我专门就这个问题请教了yyx大佬(#1739),大佬给出了一个”约定”,那就是尽量少使用“解构”。这我也很无奈。其实我是希望官方能够给出一个工具,让我们减少在自定义hooks中犯错误的可能性。(toRefs其实就是这样的一个工具,但是它并不能解决所有问题)
1. JavaScript 重温系列(22篇全)
2. ECMAScript 重温系列(10篇全)
3. JavaScript设计模式 重温系列(9篇全)
4. 正则 / 框架 / 算法等 重温系列(16篇全)
5. Webpack4 入门(上)|| Webpack4 入门(下)
6. MobX 入门(上) || MobX 入门(下)
7. 70+篇原创系列汇总
回复“加群”与大佬们一起交流学习~
点击“阅读原文”查看70+篇原创文章
点这,与大家一起分享本文吧~
pingan8787 认证博客专家 React.js 前端工程化 Low Code 个人博客:http://www.pingan8787.comGithub:https://github.com/pingan8787语雀:https://www.yuque.com/wangpingan/cute-frontend微信公众号【前端自习课】和千万网友一起,每日清晨,享受一篇前端优秀文章。目前已连续推送文章 850+ 天,愿每个人的初心都能一直坚持下去!