1.data?.info?.name

一般我們獲取數(shù)據(jù)對(duì)象下的屬性下的屬性，寫(xiě)法為：data && data.info && data.info.name，常用簡(jiǎn)寫(xiě) data?.info?.name這種?.的寫(xiě)法在X5內(nèi)核瀏覽器（eg:QQ瀏覽器）或者手機(jī)瀏覽器打開(kāi)PC網(wǎng)頁(yè)的時(shí)候會(huì)報(bào)錯(cuò)，如圖1所示，具體原因未知，解決方案未知，若有大神有好的解決方案或者知道原因的麻煩點(diǎn)醒我哈。

圖1

發(fā)現(xiàn)解決方案了，修改vite配置（如圖2所示）

圖2

2.vue-router4.0

（1）修改了addRoute添加動(dòng)態(tài)路由，注意和router3區(qū)分開(kāi)；

（2）beforeEach路由守衛(wèi)那塊沒(méi)有next，可直接return值；

官方文檔 https://next.router.vuejs.org/zh/api/#push

3.process環(huán)境變量

除了node環(huán)境下vite打包已經(jīng)沒(méi)有process環(huán)境變量，需要如下使用環(huán)境變量（圖3）

圖3

4.watch監(jiān)聽(tīng)兩個(gè)變量

vue2.0和vue3.0差別很大

vue2.0寫(xiě)法

vue3.0寫(xiě)法

5.provide，inject全局注入用法

必須在setup里面使用，不能放在其他地方使用

provide

import?{?defineComponent,?onMounted,?ref,?provide?}?from?'vue'

import?{?RouterView?}?from?'vue-router'

export?default?defineComponent({

??name:?'App',

??setup()?{?

???const?isRouterAlive?=?ref(true)?

???const?reload?=?()?=>?{???

???????isRouterAlive.value?=?false?//?先關(guān)閉??

????????setTimeout(()?=>?{? ? ?isRouterAlive.value?=?true?//?再打開(kāi)??????},?300)?

????}??

??onMounted(()?=>?{? })??

??provide('pageLoad',?reload)? // 全局注入了reload函數(shù)，可在項(xiàng)目其他任何地方以inject引用，調(diào)用該函數(shù)

???return?()?=>?(?

????????<div?style="height:?100%;">??????????{????????????isRouterAlive.value???<RouterView?/>?:?null??????????}????????</div>?

????)??},})

inject

import?{? inject?}?from?'vue'

const?reloadFn =?inject('pageLoad') // 寫(xiě)在setup里面

reloadFn()

6.監(jiān)聽(tīng)路由發(fā)生變化

vue2.0直接watch $route即可，但是vue3.0沒(méi)有這個(gè)變量可做監(jiān)聽(tīng)，也不可直接做監(jiān)聽(tīng)

vue3.0+router4.0，onBeforeRouteUpdate，onBeforeRouteLeave兩個(gè)鉤子函數(shù)配合使用，可做到全面監(jiān)聽(tīng)路由變化

7.Vue3 Composition API 如何替換Vue Mixins

vue3.0不推薦使用mixins,mixins目的是想實(shí)現(xiàn)組件之間的共享相同屬性，所以將這些相同屬性和方法提取到一個(gè)單獨(dú)的模塊，mixins混入可直接使用，缺點(diǎn)：命名沖突，以下我們把vue2.0和vue3.0做對(duì)比，方便快速發(fā)現(xiàn)兩者的異常之處。

（1）vue2.0 mixins的使用

mixins通用函數(shù)集合

業(yè)務(wù)層引用

引用之后，業(yè)務(wù)層代碼可以直接使用getQuestTypeMixin函數(shù)。

（2）vue3.0?Composition API的使用

mixins通用函數(shù)集合

業(yè)務(wù)層引用

引用之后，業(yè)務(wù)層代碼可以直接使用btnPermissionHidden函數(shù)。

8.低版本任何瀏覽器打開(kāi)系統(tǒng)空白報(bào)錯(cuò)

低版本瀏覽器會(huì)出現(xiàn)以下現(xiàn)象，原因是vite打包配置es6沒(méi)有轉(zhuǎn)成es5,打包會(huì)出現(xiàn)語(yǔ)法不識(shí)別現(xiàn)象。

圖7

解決：vite.config.js中加上esTarget: ['es2015']，也無(wú)法做轉(zhuǎn)換，圖8原因未知，后來(lái)加了個(gè)打包插件（legacy），可以解決vue3 用vite打包的項(xiàng)目在低版本的谷歌或者其他瀏覽器下的語(yǔ)法報(bào)錯(cuò)問(wèn)題。

圖8

圖9

圖10

9.vite打包之后控制不顯示console.log

vite.config.js文件中build對(duì)象里添加配置

//?terser配置

????terserOptions:?{

??????compress:?{

????????//?是否刪除console

????????drop_console:??true

??????}

????}

歡迎大家有什么其他問(wèn)題隨時(shí)留言，大家共同進(jìn)步?。?！