Vue3的一丢丢使用心得

第一次更新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都可以被替代。不过实用性我还要进一步测试