前言
Vue3已经发布很长一段时间了,虽然早就用上了框架,但是很多人依旧保持着Vue2的思维习惯,导致大家在实际开发中并没有感觉到提升,属实是新瓶装旧酒。我们应该意识到这并不仅仅是一个数字大版本的迭代,而是一次全新的开发体验。
让我们一起看看在使用Vue3开发时,应该在哪些地方做出改变?
正文
使用 通过export default导出一个对象,内部的data,methods,watch都可以使用,this依然可以保留,并指向vue,setup中如果想用props、emit等,通过参数传递。在setup中可以直接使用新写法,组件通过components进行引入。可以极大的还原Vue2的用法,如果团队的组件库是使用Vue2写的,可以用很小的成本就改造完成。 为了更好的类型推导,vue还提供了defineComponent方法。 ts 代码解读复制代码export default defineComponent({ components: { CompA }, setup (props, context) { // do something }, }) 但其实官方并不推荐这种写法,这种写法仅仅是为了兼容旧代码,这也是你感觉Vue3没有提升的很大一方面因素。就像是iPhone更新,当外观有变化时你才会觉得是大更新,系统升级个IOS18,你觉得卵用没用。所以更好的方式应该是
{ { title }}
你会发现有很多核心的变化,首先不再需要export导出了,标签对内直接就是一个setup环境。ref可以直接写,也没有了methods,你写一个就是一个方法,直接就可以绑定。为什么呢?官方不是说所有的值都需要return出去吗?放心,@vue/compiler-sfc帮你解决了这些烦恼。
其次这种写法是去this化的,比如以往我们调用router都是this.$router这么使用,而现在你需要引入useRouter,可以更好的分辨来源。对ts也更友好。