Vue3.0 踩坑实录

原文发于： https://www.yuque.com/xiongzichao/blog/gvk7gt

Vue3.0 one piece版本已于近日发布，作为Vue铁粉，来尝尝鲜，体验一下正式版本的各种特性。这里记录一个小组件从Vue2.x -> Vue3.0的踩坑过程，以及官方未提到的点。

vue-easy-lightbox 是Vue2.x+TypeScript编写的组件库，.vue单文件使用的是vue-property-decorator ，由于Vue3.0原生支持了ts，直接改写为官方推荐写法(TypeScript 支持 - 定义 Vue 组件)。

Props类型声明

Vue 对定义了 type 的 prop 执行运行时验证，我们通常需要为props声明运行时构造函数类型：

import { defineComponent, PropType } from 'vue'

interface ComplexItem {
  title: string
  id: number
}

// 建议业务中注明 default / required
const Component = defineComponent({
  props: {
    list: {
        type: Array,
      default: () => [],
      required: true
    },
    mixProps: {
      type: [Array, String]
    },
    item: {
      // 如果一个prop需要具体类型，通过官方的泛型接口PropType强制转换类型
      type: Object as PropType
    },
    mixListAndString: {
      // 如果type接受的是数组，需要将整个数组强制转换类型
      // 注意，不是将单个数组成员类型转换
      type: [Array, String] as PropType
    }
  },
  methods: {
     testProps() {
       this.list // (property) list: unknown[]
       this.mixProps // (property) mixProp?: string | unknown[] | undefined
       this.item // (property) item?: ComplexItem | undefined
       this.mixListAndString // (property) mixListAndString?: string | ComplexItem[] | undefined
     }
  }
})

Vue 单文件中，Transition 组件的子元素检查

Vue3.0 中， @vue/compile-sfc 模板编译和dev运行时检查都添加了 transtion子元素检查：

1. 模板编译中， transition 子元素不允许多个组件或元素，否则编译不通过，根据warnTransitionChildren.spec.ts 测试文件，如果需要多个分支，可以使用 v-if + v-if-else 来确定具体分支。
2. 运行时检查中，需要特别注意 transition 子元素内不能包含注释(这个坑踩了整整2天)，否则无法通过运行时编译，导致组件不能正确渲染。