第一次更新2021-4-19
一、main.js的变化
在Vue2中,常见的main.js形式如下:
import Vue from 'vue'
import xxx from 'XXX'
Vue.use(xxx)
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
但是在Vue3中,main.js的根本逻辑发生了变化,有点类似于java的链式调用,经典形式如下:
import { createApp } from 'vue'
import App from './App.vue'
import installElementPlus from './plugins/element'
import router from './router'
import store from './store'
const app = createApp(App).use(store).use(router)
installElementPlus(app)
app.mount('#app')
以我个人的经验,如要安装ElementUI等插件或依赖,尽量不要手动安装,应当在项目的根目录使用vue-ui功能,在统一管理界面进行安装,操作及界面如下:
vue ui
回车后出现如下界面:
此处以ElementUI为例,首先打开插件页:
然后点击右上角的新增插件按钮:
查询结果如下:
根据你的vue-cli版本选择不同的element-ui,点击安装,即可自动安装。
再打开页面,你就会发现你的项目结构发生了一定变化。变化的地方非常多,难以列举。这也是为什么我不推荐手动安装依赖的原因,非常容易出问题。
二、定制化组件能力
我个人认为这是Vue3的最根本变化。这是一种设计思想的演进——页面的每一个部分,都允许定制化的增加或去除。容我一条一条地介绍:
defineComponent
vue3中每一种能力都是一个模块,需要按需引入。
定义一个组件的能力也不例外。这就是defineComponent,引入方式如下:
import {defineComponent} from '@vue/composition-api'
使用方式如下:
// 定义一个组件
export default defineComponent({
name: 'HelloWorld',
// 父组件传入的值
props: {
msg: String
},
// 定义数据,包括Vue2中的data和methods
setup(){
}
})
setup
所有数据与函数,统一在setup中配置。
setup(){
const data = reactive({
hello: 'hello v3'
})
const sayHello = ()=>{
}
return {
data,
sayHello
}
}
在Vue2中,我们经常把变量定义在data () {return{}}的结构中,但是在Vue3中,不再需要固定地写在这个结构里,只要在setup中任意位置定义,再在setup的return中抛出即可。这样一来,彻底模糊了变量和函数的界限,把它们视作完全一致的部分。
在这里需要提一下,如果你想要定义一个响应式的变量,需要引入reactive的能力:
import {defineComponent, reactive} from '@vue/composition-api'
生命周期函数
Vue3中的生命周期函数的变化极大,created相关的周期函数移除,其功能直接赋予setup,也就是说如果你想要使用create相关的能力,应直接配置在setup中。没错,setup同时融合了定义,使用,和生命周期三种。
需要显式使用的生命周期函数如下:
vue2 | vue3 |
---|---|
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeUnmount | onBeforeUnmount |
unmounted | onUnmounted |
errorCaptured | onErrorCaptured |
renderTracked | onRenderTracked |
renderTriggered | onRenderTriggered |
这些生命周期函数本质上依旧是组件能力的一种,也是需要按需引入的,例如:
import {onMounted} from '@vue/composition-api'
三、不再推荐使用Vuex
在新版本中不再推荐使用Vuex,因为Vue3全局支持provide和inject能力。这里对provide和inject做一些简要的介绍。强烈推荐你可以先看看官网的介绍,然后再回来看使用教程:
官网介绍
provide与inject
provide提供定义响应式全局变量的能力,inject提供接收响应式全局变量的能力。
想要使用,还是需要按需引入。
import{provide,inject} from '@vue/composition-api'
这个能力需要在setup中使用,使用方式如下:
// 定义一个你想要provide的状态
// 响应式的变量
const flag1 = ref('hello ref')
// 响应式的对象
const flag2 = reactive({
newFlag: false
})
provide('flag1', flag1)
provide('flag2', flag2)
// inject
const flag1 = inject('flag1')
const flag2 = inject('flag2')
有了这种能力后,我们可以在某个全局文件中配置好常量,然后进行provide,看起来Vue2中的Vuex和bus都可以被替代。不过实用性我还要进一步测试
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/153521.html