友情提示：全文7800多文字，預(yù)計(jì)閱讀時(shí)間10分鐘

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。使用其進(jìn)行前后端分離開(kāi)發(fā)前端業(yè)務(wù)平臺(tái)，不斷摸索踩坑之后，總結(jié)出如下幾點(diǎn)Vue項(xiàng)目開(kāi)發(fā)中常見(jiàn)的問(wèn)題及解決辦法，希望與君共同探討。

• 列表進(jìn)入詳情頁(yè)的傳參問(wèn)題

• 本地開(kāi)發(fā)環(huán)境請(qǐng)求服務(wù)器接口跨域的問(wèn)題

• axios封裝和api接口的統(tǒng)一管理

• UI庫(kù)的按需加載

• 如何優(yōu)雅的只在當(dāng)前頁(yè)面中覆蓋ui庫(kù)中組件的樣式

• 定時(shí)器問(wèn)題

• rem文件的導(dǎo)入問(wèn)題

• Vue-Awesome-Swiper基本能解決你所有的輪播需求

• 打包后生成很大的.map文件的問(wèn)題

• fastClick的300ms延遲解決方案

• 組件中寫選項(xiàng)的順序

• 路由懶加載(也叫延遲加載)

• 開(kāi)啟gzip壓縮代碼

• 詳情頁(yè)返回列表頁(yè)緩存數(shù)據(jù)和瀏覽位置、其他頁(yè)面進(jìn)入列表頁(yè)刷新數(shù)據(jù)的實(shí)踐

• css的scoped私有作用域和深度選擇器

• hiper打開(kāi)速度測(cè)試

• 路由的拆分管理

• 可選鏈操作符

• 利用閉包構(gòu)造map緩存數(shù)據(jù)

列表進(jìn)入詳情頁(yè)的傳參問(wèn)題

例如租戶列表頁(yè)面前往租戶詳情頁(yè)面，需要傳一個(gè)租戶id;

頁(yè)面的路徑為http://localhost:8080/#/detail?code=1，可以看到傳了一個(gè)參數(shù)code=1，并且就算刷新頁(yè)面id也還會(huì)存在。此時(shí)在頁(yè)面可以通過(guò)code來(lái)獲取對(duì)應(yīng)的詳情數(shù)據(jù)，獲取code的方式是this.$route.query.code

vue傳參方式有：query、params+動(dòng)態(tài)路由傳參。

說(shuō)下兩者的區(qū)別：

1、query通過(guò)path切換路由，params通過(guò)name切換路由

2、query通過(guò)this.$route.query來(lái)接收參數(shù)，params通過(guò)this.$route.params來(lái)接收參數(shù)。

3、query傳參的url展現(xiàn)方式：

/detail?code=1&user=123&identity=1&更多參數(shù)

params＋動(dòng)態(tài)路由的url方式：/detail/123

4、params動(dòng)態(tài)路由傳參，一定要在路由中定義參數(shù)，然后在路由跳轉(zhuǎn)的時(shí)候必須要加上參數(shù)，否則就是空白頁(yè)面：

注意，params傳參時(shí)，如果沒(méi)有在路由中定義參數(shù)，也是可以傳過(guò)去的，同時(shí)也能接收到，但是一旦刷新頁(yè)面，這個(gè)參數(shù)就不存在了。這對(duì)于需要依賴參數(shù)進(jìn)行某些操作的行為是行不通的，因?yàn)槟憧偛豢赡芤笥脩舨荒芩⑿马?yè)面吧。例如：

本地開(kāi)發(fā)環(huán)境請(qǐng)求服務(wù)器接口跨域的問(wèn)題

上面的這個(gè)報(bào)錯(cuò)大家都不會(huì)陌生，報(bào)錯(cuò)是說(shuō)沒(méi)有訪問(wèn)權(quán)限(跨域問(wèn)題)。本地開(kāi)發(fā)項(xiàng)目請(qǐng)求服務(wù)器接口的時(shí)候，因?yàn)榭蛻舳说耐床呗?#xff0c;導(dǎo)致了跨域的問(wèn)題。

下面先演示一個(gè)沒(méi)有配置允許本地跨域的的情況：

可以看到，此時(shí)我們點(diǎn)擊獲取數(shù)據(jù)，瀏覽器提示我們跨域了。所以我們?cè)L問(wèn)不到數(shù)據(jù)。

那么接下來(lái)我們演示設(shè)置允許跨域后的數(shù)據(jù)獲取情況：

注意：配置好后一定要關(guān)閉原來(lái)的server，重新npm run dev啟動(dòng)項(xiàng)目。不然無(wú)效。

我們?cè)?處設(shè)置了允許本地跨域，在2處，要注意我們?cè)L問(wèn)接口時(shí)，寫的是/api，此處的/api指代的就是我們要請(qǐng)求的接口域名。如果我們不想每次接口都帶上/api，可以更改axios的默認(rèn)配置axios.defaults.baseURL = '/api';

這樣，我們請(qǐng)求接口就可以直接this.$axios.get('app.php?m=App&c=Index&a=index')，很簡(jiǎn)單有木有。此時(shí)如果你在network中查看xhr請(qǐng)求，你會(huì)發(fā)現(xiàn)顯示的是localhost:8080/api的請(qǐng)求地址。這樣沒(méi)什么大驚小怪的，代理而已：

好了，最后附上proxyTable的代碼：

注意：配置好后一定要關(guān)閉原來(lái)的server，重新npm run dev啟動(dòng)項(xiàng)目。不然無(wú)效。

axios封裝和api接口的統(tǒng)一管理

axios的封裝，主要是用來(lái)幫我們進(jìn)行請(qǐng)求的攔截和響應(yīng)的攔截。

在請(qǐng)求的攔截中我們可以攜帶userToken，post請(qǐng)求頭、qs對(duì)post提交數(shù)據(jù)的序列化等。

在響應(yīng)的攔截中，我們可以進(jìn)行根據(jù)狀態(tài)碼來(lái)進(jìn)行錯(cuò)誤的統(tǒng)一處理等等。

axios接口的統(tǒng)一管理，是做項(xiàng)目時(shí)必須的流程。這樣可以方便我們管理我們的接口，在接口更新時(shí)我們不必再返回到我們的業(yè)務(wù)代碼中去修改接口。

由于這里內(nèi)容稍微多一些，放在另一篇文章。

UI庫(kù)的按需加載

為什么要使用按需加載的方式而不是一次性全部引入，原因就不多說(shuō)了。這里以Element 的按需加載為例，演示vue中ui庫(kù)怎樣進(jìn)行按需加載：

• 安裝：npm i element-ui -S

• 安裝babel-plugin-import插件使其按需加載：npm i babel-plugin-import -D

• ?在 .babelrc文件中中添加插件配置：

• 在main.js中按需加載你需要的插件：

• 使用組件：

• 最后在在頁(yè)面中使用：

ps：除了elementUi庫(kù)外，像antiUi、vant等，很多ui庫(kù)都支持按需加載，可以去看文檔，上面都會(huì)有提到。基本都是通過(guò)安裝babel-plugin-import插件來(lái)支持按需加載的，使用方式與elementUi的如出一轍，可以去用一下。

如何優(yōu)雅的只在當(dāng)前頁(yè)面中覆蓋ui庫(kù)中組件的樣式

首先我們vue文件的樣式都是寫在標(biāo)簽中的，加scoped是為了使得樣式只在當(dāng)前頁(yè)面有效。那么問(wèn)題來(lái)了，看圖：

我們正常寫的所有樣式，都會(huì)被加上[data-v-08ec2874]這個(gè)屬性(如上圖所示)，但是第三方組件內(nèi)部的標(biāo)簽并沒(méi)有編譯為附帶[data-v-08ec2874]這個(gè)屬性。所以，我們想修改組件的樣式，就沒(méi)轍了。怎么辦呢，有些小伙伴給第三方組件寫個(gè)class，然后在一個(gè)公共的css文件中或者在當(dāng)前頁(yè)面再寫一個(gè)沒(méi)有socped屬性的style標(biāo)簽，然后直接在里面修改第三方組件的樣式。這樣不失為一個(gè)方法，但是存在全局污染和命名沖突的問(wèn)題。約定特定的命名方式，可以避免命名沖突。但是還是不夠優(yōu)雅。

作為一名優(yōu)(強(qiáng))秀(迫)的(癥)前(患)端(者)，怎么能允許這種情況出現(xiàn)呢？好了，下面說(shuō)下優(yōu)雅的解決方式：

通過(guò)深度選擇器解決。例如修改上圖中組件里的el-tab-item類的樣式，可以這樣做：

編譯后的結(jié)果就是：

這樣就不會(huì)給el-tab也添加[data-v-08ec2874]屬性了。至此你可以愉快的修改第三方組件的樣式了。

當(dāng)然了這里的深度選擇器/deep/是因?yàn)槲矣玫膌ess語(yǔ)言，如果你沒(méi)有使用less/sass等，可以用>>>符號(hào)。

定時(shí)器問(wèn)題

我在頁(yè)面a寫一個(gè)定時(shí)，讓他每秒鐘打印一個(gè)1，然后跳轉(zhuǎn)到頁(yè)面b，此時(shí)可以看到，定時(shí)器依然在執(zhí)行。這樣是非常消耗性能的。

解決方案1：

首先我在data函數(shù)里面進(jìn)行定義定時(shí)器名稱：

然后這樣使用定時(shí)器：

最后在beforeDestroy()生命周期內(nèi)清除定時(shí)器：

方案1有兩點(diǎn)不好的地方，引用尤大的話來(lái)說(shuō)就是：

• 它需要在這個(gè)組件實(shí)例中保存這個(gè) timer，如果可以的話最好只有生命周期鉤子可以訪問(wèn)到它。這并不算嚴(yán)重的問(wèn)題，但是它可以被視為雜物。

• 我們的建立代碼獨(dú)立于我們的清理代碼，這使得我們比較難于程序化的清理我們建立的所有東西。

解決方案2：

該方法是通過(guò)$once這個(gè)事件偵聽(tīng)器器在定義完定時(shí)器之后的位置來(lái)清除定時(shí)器。以下是完整代碼：

類似于其他需要在當(dāng)前頁(yè)面使用，離開(kāi)需要銷毀的組件(例如一些第三方庫(kù)的picker組件等等)，都可以使用此方式來(lái)解決離開(kāi)后以后在背后運(yùn)行的問(wèn)題。

綜合來(lái)說(shuō)，我們更推薦使用解決方案2，使得代碼可讀性更強(qiáng)，一目了然。

如果不清楚$once、$on、$off的使用，這里送上官網(wǎng)的地址教程，在程序化的事件偵聽(tīng)器那里。(官網(wǎng)地址：https://cn.vuejs.org/v2/guide/)

rem文件的導(dǎo)入問(wèn)題

我們?cè)谧鍪謾C(jī)端時(shí)，適配是必須要處理的一個(gè)問(wèn)題。例如，我們處理適配的方案就是通過(guò)寫一個(gè)rem.js，原理很簡(jiǎn)單，就是根據(jù)網(wǎng)頁(yè)尺寸計(jì)算html的font-size大小，基本上小伙伴們都知道，這里直接附上代碼，不多做介紹。

這里說(shuō)下怎么引入的問(wèn)題，很簡(jiǎn)單。在main.js中，直接import './config/rem'導(dǎo)入即可。import的路徑根據(jù)你的文件路徑去填寫。

打包后生成很大的.map文件的問(wèn)題

項(xiàng)目打包后，代碼都是經(jīng)過(guò)壓縮加密的，如果運(yùn)行時(shí)報(bào)錯(cuò)，輸出的錯(cuò)誤信息無(wú)法準(zhǔn)確得知是哪里的代碼報(bào)錯(cuò)。?而生成的.map后綴的文件，就可以像未加密的代碼一樣，準(zhǔn)確的輸出是哪一行哪一列有錯(cuò)可以通過(guò)設(shè)置來(lái)不生成該類文件。但是我們?cè)谏a(chǎn)環(huán)境是不需要.map文件的，所以可以在打包時(shí)不生成這些文件：

在config/index.js文件中，設(shè)置productionSourceMap: false,就可以不生成.map文件。

fastClick的300ms延遲解決方案

開(kāi)發(fā)移動(dòng)端項(xiàng)目，點(diǎn)擊事件會(huì)有300ms延遲的問(wèn)題。

這里只說(shuō)下常見(jiàn)的解決思路，不管vue項(xiàng)目還是jq項(xiàng)目，都可以使用fastClick解決。

安裝?fastClick:

在main.js中引入fastClick和初始化:

組件中寫選項(xiàng)的順序

為什么選項(xiàng)要有統(tǒng)一的書寫順序呢？很簡(jiǎn)單，就是要將選擇和認(rèn)知成本最小化。

1、副作用?(觸發(fā)組件外的影響)

·? el

2、全局感知?(要求組件以外的知識(shí))

·? name

·? parent

3、組件類型?(更改組件的類型)

·? functional

4、模板修改器?(改變模板的編譯方式)

·? delimiters

有時(shí)候我們使用"{{內(nèi)容}}",當(dāng)后臺(tái)的插值符跟現(xiàn)有的插值符有沖突時(shí),這時(shí)就要改變我們的插值符

·? comments

5、模板依賴 (模板內(nèi)使用的資源)

·? components

·? directives

·? filters

6、組合(向選項(xiàng)里合并屬性)

·? extends

·? mixins

7、接口(組件的接口)

·? inheritAttrs

·? model

·? props/propsData

8、本地狀態(tài)(本地的響應(yīng)式屬性)

·? data

·? computed

9、事件(通過(guò)響應(yīng)式事件觸發(fā)的回調(diào))

·? watch

· 生命周期鉤子(按照它們被調(diào)用的順序)

-?beforeCreate-?created-?beforeMount-?mounted-?beforeUpdate-?updated-?activated-?deactivated-?beforeDestroy-?destroyed

10、非響應(yīng)式的屬性(不依賴響應(yīng)系統(tǒng)的實(shí)例屬性)

·? methods

11、渲染(組件輸出的聲明式描述)

·? template

·? render

·? renderError

查看打包后各文件的體積? 幫你快速定位大文件

如果你是vue-cli初始化的項(xiàng)目，會(huì)默認(rèn)安裝webpack-bundle-analyzer插件，該插件可以幫助我們查看項(xiàng)目的體積結(jié)構(gòu)對(duì)比和項(xiàng)目中用到的所有依賴。也可以直觀看到各個(gè)模塊體積在整個(gè)項(xiàng)目中的占比。

記得運(yùn)行的時(shí)候先把之前**npm run dev**開(kāi)啟的本地關(guān)掉。

路由懶加載(也叫延遲加載)

路由懶加載可以幫我們?cè)谶M(jìn)入首屏?xí)r不用加載過(guò)度的資源，從而減少首屏加載速度。

路由文件中，

非懶加載寫法：

路由懶加載寫法：

開(kāi)啟gzip壓縮代碼

spa這種單頁(yè)應(yīng)用，首屏由于一次性加載所有資源，所有首屏加載速度很慢。解決這個(gè)問(wèn)題非常有效的手段之一就是前后端開(kāi)啟gizp(其他還有緩存、路由懶加載等等)。gizp其實(shí)就是幫我們減少文件體積，能壓縮到30%左右，即100k的文件gizp后大約只有30k。

vue-cli初始化的項(xiàng)目中，是默認(rèn)有此配置的，只需要開(kāi)啟即可。但是需要先安裝插件：

然后在config/index.js中開(kāi)啟即可:

現(xiàn)在打包的時(shí)候，除了會(huì)生成之前的文件，還是生成.gz結(jié)束的gzip過(guò)后的文件。具體實(shí)現(xiàn)就是如果客戶端支持gzip，那么后臺(tái)后返回gzip后的文件，如果不支持就返回正常沒(méi)有g(shù)zip的文件。

注意：這里前端進(jìn)行的打包時(shí)的gzip，但是還需要后臺(tái)服務(wù)器的配置。配置是比較簡(jiǎn)單的，配置幾行代碼就可以了，一般這個(gè)操作可以叫運(yùn)維小哥哥小姐姐去搞一下，沒(méi)有運(yùn)維的讓后臺(tái)去幫忙配置。

詳情頁(yè)返回列表頁(yè)緩存數(shù)據(jù)和瀏覽位置、

其他頁(yè)面進(jìn)入列表頁(yè)刷新數(shù)據(jù)的實(shí)踐

這樣一個(gè)場(chǎng)景：有兩個(gè)頁(yè)面，用戶列表頁(yè)，用戶列表詳情頁(yè)。我們希望從用戶列表頁(yè)進(jìn)入用戶列表詳情頁(yè)時(shí)，用戶列表詳情頁(yè)面要刷新數(shù)據(jù)，從用戶列表詳情頁(yè)進(jìn)入詳情頁(yè)再返回到用戶列表詳情頁(yè)面時(shí)，我們不希望刷新，我們希望此時(shí)的分類頁(yè)面能夠緩存已加載的數(shù)據(jù)和自動(dòng)保存用戶上次瀏覽的位置。

解決這種場(chǎng)景需求我們可以通過(guò)vue提供的keepAlive屬性。除此之外，還需要配合activated、beforeRouteLeave、beforeRouteEnter鉤子函數(shù)進(jìn)行處理；如下：

CSS的scoped私有作用域和深度選擇器

大家都知道當(dāng)?

編譯前：

編譯后：

其實(shí)是我們?cè)趯懙慕M件的樣式，添加了一個(gè)屬性而已，這樣就實(shí)現(xiàn)了所謂的私有作用域。但是也會(huì)有弊端，考慮到瀏覽器渲染各種 CSS 選擇器的方式，當(dāng) div { color: #409EFF }?設(shè)置了作用域時(shí) (即與特性選擇器組合使用時(shí)) 會(huì)慢很多倍。如果你使用 class 或者 id 取而代之，比如 .user-manage-container { color: #409EFF }，性能影響就會(huì)消除。所以，在你的樣式里，進(jìn)來(lái)避免直接使用標(biāo)簽，取而代之的你可以給標(biāo)簽起個(gè)class名。

如果我們希望 scoped 樣式中的一個(gè)選擇器能夠作用得“更深”，例如影響子組件，你可以使用?>>>?操作符：

代碼將會(huì)編譯成：

而對(duì)于less或者sass等預(yù)編譯，是不支持>>>操作符的，可以使用/deep/來(lái)替換>>>操作符，例如：.parent /deep/ .child { /* ... */ }

Hiper：一款性能分析工具

如上圖，是hiper工具的測(cè)試結(jié)果，從中我們可以看到DNS查詢耗時(shí)、TCP連接耗時(shí)、第一個(gè)Byte到達(dá)瀏覽器的用時(shí)、頁(yè)面下載耗時(shí)、DOM Ready之后又繼續(xù)下載資源的耗時(shí)、白屏?xí)r間、DOM Ready 耗時(shí)、頁(yè)面加載總耗時(shí)。

在編輯器終端中全局安裝：

使用：**終端輸入命令：hiper 測(cè)試的網(wǎng)址

上述的用法示例，我直接拷貝的文檔說(shuō)明，具體的可以看下文檔，這里送上鏈接。當(dāng)我們項(xiàng)目打開(kāi)速度慢時(shí)，這個(gè)工具可以幫助我們快速定位出到底在哪一步影響的頁(yè)面加載的速度。

平時(shí)我們查看性能的方式，是在performance和network中看數(shù)據(jù)，記錄下幾個(gè)關(guān)鍵的性能指標(biāo)，然后刷新幾次再看這些性能指標(biāo)。有時(shí)候我們發(fā)現(xiàn)，由于樣本太少，受當(dāng)前「網(wǎng)絡(luò)」、「CPU」、「內(nèi)存」的繁忙程度的影響很重，有時(shí)優(yōu)化后的項(xiàng)目反而比優(yōu)化前更慢。

如果有一個(gè)工具，一次性地請(qǐng)求N次網(wǎng)頁(yè)，然后把各個(gè)性能指標(biāo)取出來(lái)求平均值，我們就能非常準(zhǔn)確地知道這個(gè)優(yōu)化是「正優(yōu)化」還是「負(fù)優(yōu)化」。hiper就是解決這個(gè)痛點(diǎn)的。

路由拆分管理

我這里說(shuō)的路由拆分指的是將路由的文件，按照模塊拆分，這樣方便路由的管理，更主要的是方便多人開(kāi)發(fā)。具體要不要拆分，那就要視你的項(xiàng)目情況來(lái)定了，如果項(xiàng)目較小的話，也就一二十個(gè)路由，那么是拆分是非常沒(méi)必要的。但倘若你開(kāi)發(fā)一些功能點(diǎn)較多的C端項(xiàng)目，路由可以會(huì)有一百甚至幾百個(gè)，那么此時(shí)將路由文件進(jìn)行拆分是很有必要的。不然，index.js文件中一大長(zhǎng)串串串串串串的路由，也是很糟糕的。

首先我們?cè)趓outer文件夾中創(chuàng)建一個(gè)index.js作為路由的入口文件，然后新建一個(gè)modules文件夾，里面存放各個(gè)模塊的路由文件。例如這里儲(chǔ)存了一個(gè)user.js用戶模塊的路由文件和一個(gè)公共模塊的路由文件。下面直接上index.js吧，而后再簡(jiǎn)單介紹：

首先引入vue和router最后導(dǎo)出，基本的操作。

這里把路由守衛(wèi)router.beforeEach的操作寫了router的index.js文件中，有些人可能會(huì)寫在main.js中，這也沒(méi)有錯(cuò)，只不過(guò)，個(gè)人而言，既然是路由的操作，還是放在路由文件中管理更好些。這里就順便演示了，如何在頁(yè)面切換時(shí)，自動(dòng)修改頁(yè)面標(biāo)題的操作。

而后引入你根據(jù)路由模塊劃分的各個(gè)js文件，然后在實(shí)例化路由的時(shí)候，在routes數(shù)組中，將導(dǎo)入的各個(gè)文件通過(guò)結(jié)構(gòu)賦值的方法取出來(lái)。最終的結(jié)果和正常的寫法是一樣的。

然后看下我們導(dǎo)入的user.js：

這里就是將用戶模塊的路由放在一個(gè)數(shù)組中導(dǎo)出去。整個(gè)路由拆分的操作，不是vue的知識(shí)，就是一個(gè)es6導(dǎo)入導(dǎo)出和結(jié)構(gòu)的語(yǔ)法。具體要不要拆分，還是因項(xiàng)目和環(huán)境而異吧。這里的路由用到了懶加載路由的方式，如果不清楚，文字上面有介紹到。還有meta元字段中，定義了一個(gè)title信息，用來(lái)存儲(chǔ)當(dāng)前頁(yè)面的頁(yè)面標(biāo)題，即document.title。

可選鏈操作符

js可選鏈操作“.?”雙問(wèn)號(hào)“??”(babel-plugin-proposal-optional-chainingplugin-proposal-nullish-coalescing-operator)

可選鏈操作符 “?.” 可以按照操作符之前的屬性是否有效，鏈?zhǔn)阶x取對(duì)象的屬性或者使整個(gè)對(duì)象鏈返回 undefined。“?.” 運(yùn)算符的作用與“.”運(yùn)算符類似，不同之處在于，如果對(duì)象鏈上的引用是 nullish (null 或者 undefined)，“.” 操作符會(huì)拋出一個(gè)錯(cuò)誤，而“ ?. ”操作符則會(huì)按照短路計(jì)算的方式進(jìn)行處理，返回 undefined。可選鏈操作符也可用于函數(shù)調(diào)用，如果操作符前的函數(shù)不存在，也將會(huì)返回 undefined。

上面是官方解釋，假設(shè)你是第一次看到類似下面這類語(yǔ)法，大概你是懵逼的。

上面的代碼很容易產(chǎn)生錯(cuò)誤，你大概會(huì)這么取值

插件安裝

基本語(yǔ)法(可選鏈)

obj?.prop

obj?.[expr]

arr?.[index]

func?.(args)

短路：遇到 null/undefined 停止

可選鏈接運(yùn)算符的有趣之處在于，只要在左側(cè)person？.details 遇到無(wú)效值，右側(cè)訪問(wèn)就會(huì)停止，通常會(huì)返回undefined ，這稱為短路。

默認(rèn)值(雙問(wèn)號(hào))

這個(gè)運(yùn)算符就是“??”，如果它左側(cè)表達(dá)式的結(jié)果是 undefined，personData，就會(huì)取右側(cè)的"默認(rèn)值"(stranger)。是不是跟運(yùn)算符“||” 很像，其實(shí)“??” 就是為了取代“||” ，來(lái)做設(shè)置默認(rèn)值這件事的。

兼容性

盡管這個(gè)特性很完美，但想直接在項(xiàng)目中使用還是不太現(xiàn)實(shí)的，好在還有babel，插件babel-plugin-proposal-optional-chaining、plugin-proposal-nullish-coalescing-operator

本地開(kāi)發(fā)環(huán)境請(qǐng)求服務(wù)器接口跨域的問(wèn)題

vue中判斷我們寫的組件名是不是html內(nèi)置標(biāo)簽的時(shí)候，如果用數(shù)組類遍歷那么將要循環(huán)很多次獲取結(jié)果，如果把數(shù)組轉(zhuǎn)為對(duì)象，把標(biāo)簽名設(shè)置為對(duì)象的key，那么不用依次遍歷查找，只需要查找一次就能獲取結(jié)果，提高了查找效率。

END

作者簡(jiǎn)介

蔡巍巍

2019年12月加入中國(guó)移動(dòng)云能力中心，Iaas產(chǎn)品部云管中臺(tái)組組員，主要負(fù)責(zé)云管中臺(tái)前端相關(guān)研發(fā)、管理工作。

?往期 · 精選?

1、干貨分享 | 服務(wù)注冊(cè)中心Spring Cloud Eureka部分源碼分析

2、干貨分享 | 深入淺出基于Kpatch的內(nèi)核熱補(bǔ)丁技術(shù)

3、干貨分享 ｜ BRAFT快速上手-實(shí)踐篇

超強(qiáng)干貨來(lái)襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的vs code vue插件_干货分享 | Vue框架常见问题浅谈的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。