Vue 3官方文档：https://v3.vuejs.org/
1、Vue 3中 TypeScript this 的报错问题
核心问题还是类型的问题，一种方法是将 this 修改为(this as any)可解决此问题，此外如在定义变量时使用 ref 进行定义，即可直接使用对应值
|
1 2 3 4 5 6 7 8 9 10 |
<div ref="xxxRef"> <script lang='ts'> setup () { const xxxRef = ref<null | HTMLElement>(null) return { xxxRef } } </script> |
VSCode 中的常用的插件：Eslint, Vetur
2、ESlint 对 TypeScript 检查不生效的问题
创建.vscode 文件夹，在其中创建 settings.json并添加如下内容：
|
1 2 3 4 5 |
{ "eslint.validate": [ "typescript" ] } |
3、Vue 2与 Vue 3生命周期函数对照
|
1 2 3 4 5 6 7 8 9 10 11 |
beforeCreate -> 不需要 // 使用setup() created -> 不需要 // 使用setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeUnmount -> onBeforeUnmount unmounted -> onUnmounted errorCaptured -> onErrorCaptured renderTracked -> onRenderTracked renderTriggered -> onRenderTriggered |
新增onRenderTracked, onRenderTriggered
4、 VSCode在模板中实现TypeScript 的自动补全：Vetur 插件配置中选择Extension Settings > Edit in settings.json添加如下设置：
|
1 |
"vetur.experimental.templateInterpolationService": true, |
