vue3.0 项目完成小结

vue3.0 项目完成小结

2020, Dec 08    

项目介绍

功能介绍

该项目是使用iframe内嵌到某系统的排课管理模块。功能涉及到动态表单，拖曳排课。
初始路由定义

使用插件

项目使用的插件及其版本如下：

{
  "vue": "^3.0.0",
  "vue-router": "^4.0.0-0",
  "vuex": "^4.0.0-0",
  "ant-design-vue": "^2.0.0-rc.1",
}

项目所遇问题

  1. 组件类型推导
    2.0直接return一个对象回去，而3.0对ts的支持，直接返回一个对象是不行的，需要调用defineComponent函数返回，从概念上defineComponent和2.x 的 Vue.extend 相似，在3.0 中它其实是单纯为了类型推导而存在的，内部实现是个noop（直接返回参数本身）。
  2. tsx与template的通信
    一直没有在vue项目中使用jsx，而这次vue3.0的使用中，体会了一把vue+ts+tsx。第一点组件在各类文档上并没有明确说明在tsx的组件里引用template组件要如何绑定自定义事件，有看到说 on-事件名 、on驼峰事件名，但是on-事件名子组件emit无法触发事件，on驼峰事件名父组件tsx里就开始报错，提示子组件没有定义这个prop，然后给了我个灵感，直接props传函数嘛，react不就是这么做的，事实证明确实可以，需要注意的是props定义非基础类型的参数需要as指定具体类型。
    初始路由定义
  3. 关于拖曳处的逻辑处理
    其实这里主要是ant design vue的table使用问题。适配vue3.0的最新版本的文档不大行，对customCell、costomRender这两个参数完全没有详细解释，通过搜索大致知道了api（之前1.x customCell绑定事件是通过on:{事件名：事件函数}绑定，现在和vue3.0的render函数一样暴露在最外层。）。关于drag、dorpapi的使用就很简单。 初始路由定义

结语

该项目是对vue3.0的一次小小实践，从编码过程来说，和2.0完全不同，具体体现在。2.0刷完文档，基本上照着写就可以完成，而3.0你刷完文档还不行，在写的时候还要处理各种因为你不知道而需要填的坑。现阶段文档比较少，问题的解决方法也少，比如vue3.0有关ts类型定义问题的解释，基本没有，还是需要查看源码里的.d文件。搜索出来的信息大多是扯虎皮吆喝那种，有效信息太少，复制粘贴党不要太多。在项目中使用tsx与template混用，感觉上tsx写起来还是会更舒服些，

# vue # vue3.0 # typescript # ant design pro