乐趣区

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

jiezi

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

欢送应用交换~

退出移动版