返回

Vue3来了！避坑指南来了！Vetur OUT，Volar 上！

前端

Vue3 + TS4.8：踩坑避雷指南

迎接Vue3时代的惊喜和挑战

Vue3带着一大波令人振奋的新特性华丽登场，让开发人员们欢呼雀跃。然而，新技术的惊喜之下也潜藏着一些不为人知的麻烦，就像鱼和熊掌不可兼得。今天，我们将深入探讨Vue3 + TS4.8的踩坑记录，并力推Volar，一个专为Vue3量身打造的开发辅助工具，让你的开发之旅更加顺畅无阻。

Vetur的落幕，Volar的崛起

曾经红极一时的Vue开发辅助工具Vetur，在Vue3的时代却显得格格不入。当你在Vue3项目中使用Vetur时，一个令人头疼的问题就会如影随形：“Module has no default export. Vetur(1192)”。这是怎么回事呢？

原来，Vue3的模块化机制与以往大相径庭，它抛弃了默认导出，转而采用具名导出。这一改变让Vetur措手不及，导致它无法正常解析Vue3的模块。

如果你不想被这个问题困扰，那就果断放弃Vetur吧！拥抱Volar，一个专门针对Vue3的开发辅助工具。Volar不仅完美兼容Vue3的模块化机制，还提供了许多强大的新功能，让你在Vue3开发中如虎添翼。

其他常见的Vue3 + TS4.8踩坑记录

告别Vetur，我们来看看其他一些常见的Vue3 + TS4.8踩坑记录，知己知彼，百战不殆。

  1. 不要使用template标签 ，因为它已经被废弃了。取而代之，你可以使用render函数或jsx语法。
  2. 如果你在使用TS时遇到类型错误 ，可以尝试在你的tsconfig.json文件中添加 "strictNullChecks": false。
  3. 在使用Vue3时，你可能会遇到 "Cannot read properties of undefined (reading 'xxx')" 的错误 。这通常是由于你在模板中使用了未定义的变量造成的。
  4. 如果你在使用Vue3时遇到 "this is undefined" 的错误 ，可能是因为你在方法中使用了箭头函数。箭头函数不会绑定this，所以你应该使用普通函数或使用bind()方法来绑定this。
  5. 在Vue3中，你可能会遇到 "TypeError: Cannot set properties of null (setting 'xxx')" 的错误 。这通常是由于你在模板中使用了未初始化的变量造成的。

代码示例

// 弃用template标签，使用render函数
export default {
  render() {
    return h('div', {}, 'Hello, world!')
  }
}

// 使用strictNullChecks: false解决类型错误
{
  "compilerOptions": {
    "strictNullChecks": false
  }
}

结论

希望这些踩坑记录能帮助你顺利地使用Vue3 + TS4.8进行开发。当然，如果你在使用过程中遇到任何其他问题，欢迎在评论区留言，我们一起探讨解决办法。

常见问题解答

  1. 为什么Vue3抛弃了默认导出？

答：为了提高模块化代码的可读性和维护性。

  1. Volar和Vetur之间有哪些主要区别？

答：Volar专门针对Vue3设计，与Vue3的模块化机制完美兼容，并提供更多针对Vue3的开发辅助功能。

  1. 什么时候应该使用render函数，什么时候应该使用jsx语法？

答：render函数更适合需要更精细控制DOM结构的情况，而jsx语法更适合简单、直观的组件开发。

  1. 为什么在Vue3中会遇到 "Cannot read properties of undefined" 错误？

答：这通常是由于在模板中使用了未定义的变量。确保在使用变量之前对其进行初始化。

  1. 如何解决 "TypeError: Cannot set properties of null" 错误？

答：这通常是由于在模板中使用了未初始化的变量。确保在使用变量之前对其进行初始化。