Stack Navigator中使用自定义的Render Callback

前言

关于Vite和Vue3的讨论越来越多，看了官网的特性后，真是按捺不住想尝试一下。开发环境秒开？Composition API？ SFC Style CSS Variable Injection？ 看起来哪个都比webpack+Vue2香呀。（尤大都向React推荐Vite了，难道你还不试一下Vite么？）其实在去年，我们在LOFTER的哈利波特街区活动中就尝试使用了Vite2 + Vue3搭建活动主街区页面，当时对Vue3的语法还不是很适应，为啥ref要用value去取值？reactive解构后的响应性怎么没了？Vite热更新咋不太灵光？为了保证活动页在Android6以下能满足基本交互需要，还引入了es6-proxy-polyfill，友好的提示用户系统不支持。出于兼容性和稳定性的考虑，我们没有在其他项目中应用。时间来到今年七月，随着Vue2.7的正式发布，很多Vue3的编码特性被正式迁移到了Vue2，更像是Vue3的基础试用版（Vue：再过18个月，我也懒得管Vue2了）。

The Composition API is backported using Vue 2’s getter/setter-based reactivity system to ensure browser compatibility.

就是官方的这句话，让我觉得把现在的Vue2项目完全升到2.7是一件百利而无一害的事情。我们的Vue2项目随着业务迭代承载着更加复杂的业务场景，如何提升项目的开发体验也提上了日程。实际使用中，Vite还是挺多坑要踩的，但是Vue2.7更新的内容，结合社区生态，对业务实现和开发体验的提升都提供了助力。

实战——检验Vite+Vue2.7

那就找个场景先预研一下吧，于是稻米节活动被拿来做了实验（但愿不会被稻米看到）。通过对官方文档的阅读，以及查看社区的讨论，Vue2.7最次也是支持option api的（万一遇到解决不了的bug降级一下写法就好了）。既然做实验，就要有实验目的。

1.检验SFC setup语法糖的各种写法兼容性
2.探索Vite现在发展的怎么样了
3.检验Vite生产环境的稳定性

先贴个结论，1和2的结果都挺好，3就是坑多多了。实验流程：

项目搭建

单纯的Vite Getting Started流程实在是过于简单，啥配置都没有，难不成每个功能都要去搜索引擎查？还好有 awesome-vue 这个项目，集结了大家的智慧（踩过的坑），参阅了各种脚手架模板后，结合业务需要，项目架子初步搭好。简单贴一下package.json

"dependencies": {"@sentry/browser": "^5","@sentry/integrations": "^5", // sentry用来收集异常"@vueuse/core": "^9.0.2",// 基于Composition API的工具函数，同时支持Vue2, Vue3"axios": "^0.27.2","nejsbridge": "^1.7.19",……"vue": "^2.7.8","vue-clipboard2": "^0.3.3","vue-router": "^3.5.4"
},
"devDependencies": {"@antfu/eslint-config": "^0.25.2", // Anthony Fu是Vue和Vite团队的核心成员，有很多开源作品"@vitejs/plugin-legacy": "^2.0.0", // 自动生成传统版本的chunk及与其相对应ES语言特性方面的polyfill"@vitejs/plugin-vue2": "^1.1.2", // plugin only works with Vue@^2.7.0."autoprefixer": "^10.4.8", "eslint": "^7.32.0","less": "^4.1.3","nei-ts-helper": "^0.1.3", // 组内接口生成TS声明的工具"terser": "^5.4.0", // 生产环境打包代码需要"typescript": "^4.6.4","unplugin-auto-import": "^0.10.1",// vue函数的自动导入"unplugin-vue-components": "^0.21.2", // vue组件库的自动按需