我们还是尝试使用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之间的差别。

 

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐