拥抱Vue3 (一) main.js的变化

 我们还是尝试使用Vue-cli来创建Vue3的项目，需要注意的是你的Vue-cli版本需要在@4.15.0以上才能支持Vue3项目的创建。在创建项目之前可以在cmd中输入Vue -v来查看cli的版本。

创建好项目后和Vue2时候一样，首先来看看整个项目的入口文件main.js。

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

 我们可以发现，引入的不再是Vue构造函数了，而是一个名为createApp的工厂函数。试着去回想一下以前的写法，并且将生成的这三行代码进行拆分做个对比。

import { createApp } from 'vue'
import App from './App.vue'

// Vue 3 
const app = createApp(App)
app.mount('#app')

// createApp(App).mount('#app')

// Vue 2
const vm = new Vue({
    render: h => h(App)
})
vm.$mount('#app')

经过拆解后对比发现，这两者看起来功能相似，但是app比vm更"轻"，通过打印app可以发现，它的身上没有vm那么多的属性，没有了众多$api挂在身上。这也就是为什么Vue3比Vue2更快，效率更高的众多原因之一。

 在控制台中我们不难看到以前熟悉的directive自定义指令、mixin混入技术，也看到了mount、unmount这似曾相识却又不是生命周期的方法。我的专栏中后续将逐步更新这些内容，并且介绍他们和Vue2之间的差别。