原文 https://leezng.github.io/blog...
对于 Vue Json Pretty
Vue Json Pretty第一个版本公布于 2017 年，基于Vue2 与官网提供的VueCLI工具搭建了根底我的项目构造，趁着Vue3正式公布的机缘，我也对我的项目进行了一次比拟大的技术栈降级。
从Vue2到Vue3
对于Vue2与Vue3的区别与降级指南，社区上已有不少文章，本文就不再对此进行过多叙述。
- 从
OptionApi切换到CompositionApi。这个 API 是Vue3API 中一个比拟精彩与新变动的局部，对于相熟React技术栈的开发者来说，应该再相熟不过了，没错，就是hooks。对于hooks在React社区曾经有比拟多的实际了，Vue 还比拟少，思路大同小异。上面截取了我的项目中应用到的几个简略小例子（第一代码块），并与旧版本（第二代码块）进行比照。相对而言，我还是比拟喜爱新的 API 模式的，尤其是在旧 API 可能会存在mixin的时候。设想一下咱们能够把一段段逻辑都聚合成一个个的use（例如useRequest），就像把面条装在了各个方便面盒子里，在须要的时候按需取用。
const state = reactive({ visible: false,});const tree = ref<HTMLElement>();const dataType = computed(() => getDataType(props.node.content));watchEffect(() => { if (propsErrorMessage.value) { emitError(propsErrorMessage.value); }});data () { return { visible: this.currentDeep <= this.deep, }},dataType () { return this.getDataType(this.data)},watch: { propsError (message) { if (message) { throw new Error(`[vue-json-pretty] ${message}`) } }},从.vue到.tsx
Vue3应用了Typescript进行革新，天然对Typescript的反对是较为敌对的，ts 是一种一旦应用就会放不下的货色，配合编辑器的提醒，用起来十分棘手。通过应用 @vue/babel-plugin-jsx 即可轻松为我的项目配置 .tsx 的写法，以下截取了一小部分代码片段，这种更靠近 js 的写法，在代码逻辑与组件拼装上是更为自在的，尤其是在呈现很多 if else 的时候。同时，为了输入我的项目的 types，我建设了另一个不同的tsconfig.json，并在我的项目构建的时候调用tsc命令进行输入。
import { defineComponent, computed, PropType } from 'vue';export default defineComponent({ props: { ...xxx, isMultiple: Boolean, }, render() { const { uiType, model, $emit } = this; return ( <label class={[`vjs-check-controller`, model ? 'is-checked' : '']} onClick={e => e.stopPropagation()} > <span class={`vjs-check-controller__inner is-${uiType}`} /> </label> ); },});虚构滚动
绝对于上一个版本应用递归组件的形式，我将代码的 DOM 构造进行了“拍平”。虚构列表是近些年比拟风行的一种实现形式，我的项目外围逻辑从对一个 JSON 一直进行递归渲染，变成通过 js 对 JSON 数据进行解析（jsonFlatten 办法），失去一个扁平化的数组。所以，本我的项目通过这次革新，也顺利提供了大数据的能力反对。
其余变更
- devDependencies 的降级（babel/webpack/eslint/...），借助
npm-check - 代码格式化，引入
prettier - 退出测试，引入
cypress - CI 流程优化，破除原
travis-ci，应用github Actions
最初
好了，总结就先记录这么多，更多思路能够查看我的项目工程Vue Json Pretty。
欢送应用交换~