学习文档
原生问题
- setTimeout 类型问题：
请加入 window 开头表示是 web 的，不然编辑器要求使用 NodeJS.Timeout 类型，但是编译又编不过。
let timer: number = window.setTimeout(() => {
...
}, 17)
setInterval 等同理。
- Map
优先使用 Map 对象来实现需求，而不是普通对象，不然在类型判断上比较难搞。
const modeMaps = new Map([
['clickable', 'RightOutlined'],
['closable', 'CloseOutlined']
])
而不是：
const modeMap = {
'clickable': 'RightOutlined',
'closable': 'CloseOutlined',
}
Eslint 配置
- 使用以下标准，不然有未知问题。
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended',
'@vue/prettier',
'@vue/prettier/@typescript-eslint'
]
- 还有关闭要优先定义的规则，不然有些相互引用的业务没法满足这规则。
rules: {
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/no-empty-function': 'off',
'@typescript-eslint/camelcase': 'off',
'@typescript-eslint/no-explicit-any': 'off',
}
Vue Props
- 函数类型
官方有介绍。
- 枚举类型
mode: {
type: String as PropType<'clickable' | 'closable'>,
default: 'default'
},
- validator 或者 default 是函数的情况下，使用
=>，不然会导致 setup 的 props 参数Typescript异常
shape: {
validator: value => value.length >= 2,
default: () => []
}
PS：如果是引用的函数，被引用的函数也要确保是 => 形式的
Vue Watch
- 监控 props.xxx ，推荐使用 getter 函数的形式
watch(() => props.xxx, () => {
...
})
如果 props.xxx 是对象或者数组
watch(() => props.xxx, () => {
...
}, {
deep: true
})
Vue ref
- 引用DOM
<div ref="root"></div>
setup() {
const root = ref(null)
...
onMounted(() => {
console.log(root.value) // HTMLElement
})
return {
root
}
}
在 Typescript 中，应该这么写：
setup() {
const root = ref<HTMLElement>()
...
onMounted(() => {
console.log(root.value as HTMLElement) // HTMLElement
})
return {
root
}
}
- 引用组件
import FooComponent from 'path/to/FooComponent.vue'
setup() {
const foo = shallowRef<ComponentPublicInstance<typeof FooComponent>>()
...
onMounted(() => {
console.log(foo.value as ComponentPublicInstance) // ComponentPublicInstance
})
return {
foo
}
}
vue-svg-loader 处理 Svg 图标
- 安装依赖
npm i -D vue-svg-loader@beta vue-loader
注：是跟 vue 同步的 beta 版本
- 在 vue.config.js 中配置
chainWebpack: config => {
// svg
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.use('vue-loader-v16')
.loader('vue-loader-v16') // or `vue-loader-v16` if you are using a preview support of Vue 3 in Vue CLI
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader')
}
- 使用 markRaw 标记返回对象本身
import { markRaw, defineComponent } from 'vue'
import TaobaoSvg from './svgs/taobao.svg'
export default defineComponent({
setup() {
return {
TaobaoSvg: markRaw(TaobaoSvg)
}
}
})
