前言

vue3 大家已经熟知了不少，大家也可能爱上了现在这种和React及其相似的Function Api的语法，但是在开发过程中，大家可能会遇到一些奇奇怪怪的问题，有些是来自于vue本身的设计缺陷，有些是来自于 vue devtools 的，这里暂时做一下记录和临时解决办法

社区尚未解决的

1. vue devtools 在setup内直接retrun jsx function，devtools无法收集其依赖问题 devtools git issues 1295

问题事例：

// test.tsx 以下写法，testMsg ref依赖，devtools是无法收集到的
import { defineComponent, ref } from 'vue';

export default defineComponent({
  props: {
    msg: {
      type: String,
      default: ''
    }
  },
  setup() {
    const testMsg = ref('我是谁')
    
    const handleClickMsgbox = () => {
        testMsg.value = '皮卡丘！'
    }
    
    return () => (
        <div onClick="handleClickMsgbox" class="test">
            <span>{testMsg.value}</span>
        </div>
    )
  }
})

需要改写成

// test.tsx 以下写法，testMsg ref依赖，devtools是无法收集到的
import { defineComponent, ref } from 'vue';

export default defineComponent({
  props: {
    msg: {
      type: String,
      default: ''
    }
  },
  setup() {
    const testMsg = ref('我是谁')
    
    const handleClickMsgbox = () => {
        testMsg.value = '皮卡丘！'
    }
    
    return {
        testMsg,
        handleClickMsgbox
    }
  },
  render() {
      const {testMsg, handleClickMsgbox} = this
      return (
        <div onClick="handleClickMsgbox" class="test">
            <span>{testMsg}</span>
        </div>
    )
  },
})

社区即将修复的

1. vite 在推荐配置下 运行 vite build 失败的问题 vite git issues 5814

yarn create vite
# select vue + vue-ts
yarn && yarn build

临时解决办法：

// tsconfig.json
{
    ...
    "compilerOptions": {
        ...
        skipLibCheck: true,
    },
    ...
}

发散问题：跳过LibCheck是否是安全的？ stackoverflow.com/questions/5…