拥抱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'cre
·
我们还是尝试使用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之间的差别。
更多推荐
所有评论(0)