vue3+ts使用过程中的小问题

vue3 中 setup 的使用

问题

1. 想要在 setup 中使用 this.$message.success()
   想要在 setup 中拿到 this,或者说是拿到组件实例是行不通的

   由于在执行 setup 时，组件实例尚未被创建，因此在 setup 选项中没有 this。这意味着，除了 props 之外，你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。

解决

1. 可以通过引入 elMessge 然后直接使用

import {elMessage} from 'element-plus'
elMessage.success('发送请求成功')

2. getCurrentInstance()来拿到当前组件的实例(注意该方法任然有个问题就是，getCurrentInstance 这个方法只是在 develop（开发模式下）有效，生产环境无法正常使用)

需要注意的是,这个方法只能在 setup 下直接调用或者生命周期中调用才生效，否则返回的是 undefined

setup(){
  // 通过调用该方法拿到实例
  const currentInstance=getCurrentInstance()
  function fetchLists(){
    getCurrentInstance()// don't work
    currentInstance.appContext.config.globalProperties.$message.success()
  }
}

3.可以通过高阶组件(provide/inject)来实现

main.ts 文件下

下面只是一些关键的代码
import App from 'xxxx/App.vue'
import {elMessage} from 'element-plus'
const app=CreateApp(App)
app.provide('$message',elMessage)
app.mounted('#app')

addArticle.vue 文件下

import {inject} from 'vue'
setup(){
  function fetchLists(){
    (inject('$message') as any).success('请求成功')
  }
}

--------------------------------------------------------------------------2021/5/25 分割线------------------------------------------------------------------

在项目中遇到 eslint 报错

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YDUoHfhk-1642137494526)(./images/avatar.jpg)]

Failed to compile.

src/utils/markdown.ts:9:21
TS2322: Type 'string' is not assignable to type 'never'.
     7 |   add: function (text: any, level: any) {
     8 |     var anchor = `#toc${level}${++this.index}`;
  >  9 |     this.toc.push({ anchor: anchor, level: level, text: text });
       |                     ^^^^^^
    10 |     return anchor;
    11 |   },
    12 |   // 使用堆栈的方式处理嵌套的ul,li，level即ul的嵌套层次，1是最外层

需要在 tsconfig.json 中添加以下代码：

    // 忽略 this 的类型检查, Raise error on this expressions with an implied any type.
    "noImplicitThis": false,

所有配置代码如下

    <!-- 所有配置代码如下 -->
    {
    "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      "strict": true,
      "jsx": "preserve",
      "importHelpers": true,
      "moduleResolution": "node",
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "sourceMap": true,
      // 忽略 this 的类型检查, Raise error on this expressions with an implied any type.
      "noImplicitThis": false,
      "baseUrl": ".",
      "types": [
        "webpack-env"
      ],
      "paths": {
        "@/*": [
          "src/*"
        ]
      },
      "lib": [
        "esnext",
        "dom",
        "dom.iterable",
        "scripthost"
      ]
    },
    "include": [
      "src/**/*.ts",
      "src/**/*.tsx",
      "src/**/*.vue",
      "tests/**/*.ts",
      "tests/**/*.tsx"
    ],
    "exclude": [
      "node_modules"
    ]
}

vue3 中修改.vue 文件热更新失败的问题

在 vue.config.ts 中配置

module.exports={
  chainWebpack:(config)=>{
    config.resolve.symlinks(true)
  }
}

Vue3 中使用$refs

因为 Vue3 中都是偏向函数式开发所以需要引入 ref

import { ref } from 'vue'

setup() {
  let boxRef = ref(null)
  return {
    boxRef
  }
}