前言

Vue3已经发布很长一段时间了，虽然早就用上了框架，但是很多人依旧保持着Vue2的思维习惯，导致大家在实际开发中并没有感觉到提升，属实是新瓶装旧酒。我们应该意识到这并不仅仅是一个数字大版本的迭代，而是一次全新的开发体验。

让我们一起看看在使用Vue3开发时，应该在哪些地方做出改变？

正文

使用

通过export default导出一个对象，内部的data，methods，watch都可以使用，this依然可以保留，并指向vue，setup中如果想用props、emit等，通过参数传递。在setup中可以直接使用新写法，组件通过components进行引入。可以极大的还原Vue2的用法，如果团队的组件库是使用Vue2写的，可以用很小的成本就改造完成。

为了更好的类型推导，vue还提供了defineComponent方法。

export default defineComponent({
  components: { CompA },
  setup (props, context) {
     // do something
  },
})

但其实官方并不推荐这种写法，这种写法仅仅是为了兼容旧代码，这也是你感觉Vue3没有提升的很大一方面因素。就像是iPhone更新，当外观有变化时你才会觉得是大更新，系统升级个IOS18，你觉得卵用没用。所以更好的方式应该是

你会发现有很多核心的变化，首先不再需要export导出了，标签对内直接就是一个setup环境。ref可以直接写，也没有了methods，你写一个就是一个方法，直接就可以绑定。为什么呢？官方不是说所有的值都需要return出去吗？放心，@vue/compiler-sfc帮你解决了这些烦恼。

其次这种写法是去this化的，比如以往我们调用router都是this.$router这么使用，而现在你需要引入useRouter，可以更好的分辨来源。对ts也更友好。

import { useRouter } from 'vue-router'
const router = useRouter()

组件使用也更方便，直接引入即可。

同名简写

以往我们绑定一个值需要这样：

而现在变得极其简单，尤其是Vue升级到v3.4.x以上之后，因为它增加了同名简写。

怎么样，有没有觉得非常优雅，不过比较可惜的是这个写法esLint目前还不支持，会报异常，需要在.eslintrc中忽略一下。

"rules": {
   "vue/valid-v-bind": "off"
}

拒绝mixins

我们之前Vue2的模版中有很多的mixins，而且不乏有全局引入的mixins，在迁移模板时，也需要一起处理，我看到官方也有案例，有mixins的，还有extends的。

const mixin = { 
  created() { console.log(1) } 
}
createApp({ 
  created() { console.log(2) }, 
  mixins: [mixin] 
})

但是均都对组合式API不友好，因为mixin内部有不少调用this内部环境的地方，很难在