关于javascript:VueJsonPretty工程变更记录Vue3

原文 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。

欢送应用交换~