【萬(wàn)字長(zhǎng)文】史上最強(qiáng)vue總結(jié)，更新版

watch:?{
??firstName:?{
????handler(newName,?oldName)?{
??????this.fullName?=?newName?+?'?'?+?this.lastName;
????},
????//?代表在wacth里聲明了firstName這個(gè)方法之后立即執(zhí)行handler方法
????immediate:?true
??}
}

watch:?{
??obj:?{
????handler(newName,?oldName)?{
??????console.log('obj.a?changed');
????},
????immediate:?true,
????deep:?true
??}
}

watch:?{
??'obj.a':?{
????handler(newName,?oldName)?{
??????console.log('obj.a?changed');
????},
????immediate:?true,
????//?deep:?true
??}
}

?父組件：?'傳遞的數(shù)據(jù)'?/>

?子組件:?props['value'],接收數(shù)據(jù),接受之后使用和data中定義數(shù)據(jù)使用方式一樣

?父組件：?'receive'?/>

?子組件:?this.$emit('receive','傳遞的數(shù)據(jù)')

props:?{
????visible:?{
????????default:?true,
????????type:?Boolean,
????????required:?true
????},
},

this.$set(this.arr,?0,?"OBKoro1");?//?改變數(shù)組
this.$set(this.obj,?"c",?"OBKoro1");?//?改變對(duì)象

splice()、?push()、pop()、shift()、unshift()、sort()、reverse()

"bar">

"bar"?@update:foo="val?=>?bar?=?val">

this.$emit('update:foo',?newValue)

"test">

v-on可以監(jiān)聽(tīng)多個(gè)方法嗎？

是可以的，來(lái)個(gè)例子：

type="text"?v-on="{?input:onInput,focus:onFocus,blur:onBlur,?}">

assets和static的區(qū)別

這兩個(gè)都是用來(lái)存放項(xiàng)目中所使用的靜態(tài)資源文件。

兩者的區(qū)別：

assets中的文件在運(yùn)行npm run build的時(shí)候會(huì)打包，簡(jiǎn)單來(lái)說(shuō)就是會(huì)被壓縮體積，代碼格式化之類的。打包之后也會(huì)放到static中。

static中的文件則不會(huì)被打包。

建議：將圖片等未處理的文件放在assets中，打包減少體積。而對(duì)于第三方引入的一些資源文件如iconfont.css等可以放在static中，因?yàn)檫@些文件已經(jīng)經(jīng)過(guò)處理了。

slot插槽

很多時(shí)候，我們封裝了一個(gè)子組件之后，在父組件使用的時(shí)候，想添加一些dom元素，這個(gè)時(shí)候就可以使用slot插槽了，但是這些dom是否顯示以及在哪里顯示，則是看子組件中slot組件的位置了。

vue初始化頁(yè)面閃動(dòng)問(wèn)題

使用vue開(kāi)發(fā)時(shí)，在vue初始化之前，由于div是不歸vue管的，所以我們寫的代碼在還沒(méi)有解析的情況下會(huì)容易出現(xiàn)花屏現(xiàn)象，看到類似于{{message}}的字樣，雖然一般情況下這個(gè)時(shí)間很短暫，但是我們還是有必要讓解決這個(gè)問(wèn)題的。

首先：在css里加上以下代碼

[v-cloak]?{
????display:?none;
}

如果沒(méi)有徹底解決問(wèn)題，則在根元素加上style="display: none;" :style="{display: 'block'}"

vue插件篇

狀態(tài)管理（vuex）

vuex是什么

Vuex 是一個(gè)專為 Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級(jí)調(diào)試功能。

怎么使用vuex

第一步安裝

npm?install?vuex?-S

第二步創(chuàng)建store

import?Vue?from?'vue';
import?Vuex?from?'vuex';
Vue.use(Vuex);
//不是在生產(chǎn)環(huán)境debug為true
const?debug?=?process.env.NODE_ENV?!==?'production';
//創(chuàng)建Vuex實(shí)例對(duì)象
const?store?=?new?Vuex.Store({
????strict:debug,//在不是生產(chǎn)環(huán)境下都開(kāi)啟嚴(yán)格模式
????state:{
????},
????getters:{
????},
????mutations:{
????},
????actions:{
????}
})
export?default?store;

第三步注入vuex

mport?Vue?from?'vue';
import?App?from?'./App.vue';
import?store?from?'./store';
const?vm?=?new?Vue({
????store:store,
????render:?h?=>?h(App)
}).$mount('#app')

vuex中有幾個(gè)核心屬性，分別是什么？

一共有5個(gè)核心屬性，分別是:

• state 唯一數(shù)據(jù)源,Vue 實(shí)例中的 data 遵循相同的規(guī)則
• getters 可以認(rèn)為是 store 的計(jì)算屬性,就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來(lái)，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。Getter 會(huì)暴露為 store.getters 對(duì)象，你可以以屬性的形式訪問(wèn)這些值.

const?store?=?new?Vuex.Store({
??state:?{
????todos:?[
??????{?id:?1,?text:?'...',?done:?true?},
??????{?id:?2,?text:?'...',?done:?false?}
????]
??},
??getters:?{
????doneTodos:?state?=>?{
??????return?state.todos.filter(todo?=>?todo.done)
????}
??}
})

store.getters.doneTodos?//?->?[{?id:?1,?text:?'...',?done:?true?}]

• mutation 更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation,非常類似于事件,通過(guò)store.commit 方法觸發(fā)

const?store?=?new?Vuex.Store({
??state:?{
????count:?1
??},
??mutations:?{
????increment?(state)?{
??????//?變更狀態(tài)
??????state.count++
????}
??}
})

store.commit('increment')

• action Action 類似于 mutation，不同在于Action 提交的是 mutation，而不是直接變更狀態(tài)，Action 可以包含任意異步操作

const?store?=?new?Vuex.Store({
??state:?{
????count:?0
??},
??mutations:?{
????increment?(state)?{
??????state.count++
????}
??},
??actions:?{
????increment?(context)?{
??????context.commit('increment')
????}
??}
})

• module ?由于使用單一狀態(tài)樹(shù)，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫。為了解決以上問(wèn)題，Vuex 允許我們將 store 分割成模塊（module）。

const?moduleA?=?{
??state:?()?=>?({?...?}),
??mutations:?{?...?},
??actions:?{?...?},
??getters:?{?...?}
}

const?moduleB?=?{
??state:?()?=>?({?...?}),
??mutations:?{?...?},
??actions:?{?...?}
}

const?store?=?new?Vuex.Store({
??modules:?{
????a:?moduleA,
????b:?moduleB
??}
})

store.state.a?//?->?moduleA?的狀態(tài)
store.state.b?//?->?moduleB?的狀態(tài)

ajax請(qǐng)求代碼應(yīng)該寫在組件的methods中還是vuex的actions中

如果請(qǐng)求來(lái)的數(shù)據(jù)是不是要被其他組件公用，僅僅在請(qǐng)求的組件內(nèi)使用，就不需要放入vuex 的state里。

如果被其他地方復(fù)用，這個(gè)很大幾率上是需要的，如果需要，請(qǐng)將請(qǐng)求放入action里，方便復(fù)用。

從vuex中獲取的數(shù)據(jù)能直接更改嗎？

從vuex中取的數(shù)據(jù)，不能直接更改，需要淺拷貝對(duì)象之后更改，否則報(bào)錯(cuò)；

vuex中的數(shù)據(jù)在頁(yè)面刷新后數(shù)據(jù)消失

用sessionstorage 或者 localstorage 存儲(chǔ)數(shù)據(jù)

存儲(chǔ)：sessionStorage.setItem(?'名',?JSON.stringify(值)?)
使用：sessionStorage.getItem('名')?---得到的值為字符串類型，用JSON.parse()去引號(hào)；

npm?install?--save?vuex-persist
or
yarn?add?vuex-persist

import?VuexPersistence?from?'vuex-persist'

const?vuexLocal?=?new?VuexPersistence({
????storage:?window.localStorage
})

const?store?=?new?Vuex.Store({
??state:?{?...?},
??mutations:?{?...?},
??actions:?{?...?},
??plugins:?[vuexLocal.plugin]
})?

Vuex的嚴(yán)格模式是什么,有什么作用,怎么開(kāi)啟？

在嚴(yán)格模式下，無(wú)論何時(shí)發(fā)生了狀態(tài)變更且不是由mutation函數(shù)引起的，將會(huì)拋出錯(cuò)誤。這能保證所有的狀態(tài)變更都能被調(diào)試工具跟蹤到。

在Vuex.Store 構(gòu)造器選項(xiàng)中開(kāi)啟,如下

const?store?=?new?Vuex.Store({
????strict:true,
})

怎么在組件中批量使用Vuex的getter屬性

使用mapGetters輔助函數(shù), 利用對(duì)象展開(kāi)運(yùn)算符將getter混入computed 對(duì)象中

import?{mapGetters}?from?'vuex'
export?default{
????computed:{
????????...mapGetters(['total','discountTotal'])
????}
}

組件中重復(fù)使用mutation

使用mapMutations輔助函數(shù),在組件中這么使用

import?{?mapMutations?}?from?'vuex'
methods:{
????...mapMutations({
????????setNumber:'SET_NUMBER',
????})
}

然后調(diào)用this.setNumber(10)相當(dāng)調(diào)用this.$store.commit('SET_NUMBER',10)

mutation和action有什么區(qū)別

• action 提交的是 mutation，而不是直接變更狀態(tài)。mutation可以直接變更狀態(tài)
• action 可以包含任意異步操作。mutation只能是同步操作
• 提交方式不同

action 是用this.store.dispatch('ACTION_NAME',data)來(lái)提交。
mutation是用this.$store.commit('SET_NUMBER',10)來(lái)提交

• 接收參數(shù)不同，mutation第一個(gè)參數(shù)是state，而action第一個(gè)參數(shù)是context，其包含了

{
????state,??????//?等同于?`store.state`，若在模塊中則為局部狀態(tài)
????rootState,??//?等同于?`store.state`，只存在于模塊中
????commit,?????//?等同于?`store.commit`
????dispatch,???//?等同于?`store.dispatch`
????getters,????//?等同于?`store.getters`
????rootGetters?//?等同于?`store.getters`，只存在于模塊中
}

在v-model上怎么用Vuex中state的值？

需要通過(guò)computed計(jì)算屬性來(lái)轉(zhuǎn)換。

"message">
//?...
computed:?{
????message:?{
????????get?()?{
????????????return?this.$store.state.message
????????},
????????set?(value)?{
????????????this.$store.commit('updateMessage',?value)
????????}
????}
}

路由頁(yè)面管理（vue-router）

什么是vue-router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌。包含的功能有：

• 嵌套的路由/視圖表
• 模塊化的、基于組件的路由配置
• 路由參數(shù)、查詢、通配符
• 基于 Vue.js 過(guò)渡系統(tǒng)的視圖過(guò)渡效果
• 細(xì)粒度的導(dǎo)航控制
• 帶有自動(dòng)激活的 CSS class 的鏈接
• HTML5 歷史模式或 hash 模式，在 IE9 中自動(dòng)降級(jí)
• 自定義的滾動(dòng)條行為

怎么使用vue-router

第一步安裝

npm?install?vue-router?-S

第二步在main.js中使用Vue Router組件

第三步配置路由

• 定義 (路由) 組件

路由組件可以是直接定義，也可以是導(dǎo)入已經(jīng)定義好的組件。這里導(dǎo)入已經(jīng)定義好的組件。如下

• 定義路由（路由對(duì)象數(shù)組）

定義路由對(duì)象數(shù)組。對(duì)象的path是自定義的路徑（即使用這個(gè)路徑可以找到對(duì)應(yīng)的組件），component是指該路由對(duì)應(yīng)的組件。如下：

• 實(shí)例化Vue Router對(duì)象

調(diào)用Vue Router的構(gòu)造方法創(chuàng)建一個(gè)Vue Router的實(shí)例對(duì)象，將上一步定義的路由對(duì)象數(shù)組作為參數(shù)對(duì)象的值傳入。如下

• 掛載根實(shí)例

第四步在App.vue中使用路由

在App.vue中使用標(biāo)簽來(lái)顯示路由對(duì)應(yīng)的組件，使用標(biāo)簽指定當(dāng)點(diǎn)擊時(shí)顯示的對(duì)應(yīng)的組件，to屬性就是指定組件對(duì)應(yīng)的路由。如下：

怎么定義vue-router的動(dòng)態(tài)路由？怎么獲取傳過(guò)來(lái)的動(dòng)態(tài)參數(shù)？

在router目錄下的index.js文件中，對(duì)path屬性加上/:id。使用router對(duì)象的params.id獲取動(dòng)態(tài)參數(shù)

vue-router的導(dǎo)航鉤子

常用的是router.beforeEach(to,from,next)，在跳轉(zhuǎn)前進(jìn)行權(quán)限判斷。一共有三種：

• 全局導(dǎo)航鉤子：router.beforeEach(to,from,next)
• 組件內(nèi)的鉤子
• 單獨(dú)路由獨(dú)享組件

vue路由傳參

使用query方法傳入的參數(shù)使用this.$route.query接受

使用params方式傳入的參數(shù)使用this.$route.params接受

router和route的區(qū)別

route為當(dāng)前router跳轉(zhuǎn)對(duì)象里面可以獲取name、path、query、params等

router為VueRouter實(shí)例，想要導(dǎo)航到不同URL，則使用router.push方法

路由 TypeError: Cannot read property 'matched' of undefined 的錯(cuò)誤問(wèn)題

找到入口文件main.js里的new Vue()，必須使用router名，不能把router改成Router或者其他的別名

//?引入路由
import?router?from?'./routers/router.js'

new?Vue({
????el:?'#app',
????router,????//?這個(gè)名字必須使用router
????render:?h?=>?h(App)
});

路由按需加載

隨著項(xiàng)目功能模塊的增加，引入的文件數(shù)量劇增。如果不做任何處理，那么首屏加載會(huì)相當(dāng)?shù)木徛@個(gè)時(shí)候，路由按需加載就閃亮登場(chǎng)了。

webpack{?
????path:'/',?
????name:'home',
????components:resolve=>require(['@/components/home'],resolve)
}?
webpack>?2.4?時(shí)
{?
????path:'/',?
????name:'home',?
????components:()=>import('@/components/home')
}

import()方法是由es6提出的，動(dòng)態(tài)加載返回一個(gè)Promise對(duì)象，then方法的參數(shù)是加載到的模塊。類似于Node.js的require方法，主要import()方法是異步加載的。

Vue里面router-link在電腦上有用，在安卓上沒(méi)反應(yīng)怎么解決

Vue路由在Android機(jī)上有問(wèn)題，babel問(wèn)題，安裝babel polypill插件解決

Vue2中注冊(cè)在router-link上事件無(wú)效解決方法

使用@click.native。原因：router-link會(huì)阻止click事件，.native指直接監(jiān)聽(tīng)一個(gè)原生事件

RouterLink在IE和Firefox中不起作用（路由不跳轉(zhuǎn)）的問(wèn)題

• 只用a標(biāo)簽，不使用button標(biāo)簽
• 使用button標(biāo)簽和Router.navigate方法

網(wǎng)絡(luò)請(qǐng)求(axios)

這個(gè)模塊請(qǐng)看我的另一篇文章，此處不再整理（我太懶了）

學(xué)會(huì)了axios封裝，世界都是你的

視頻播放(video.js)

這個(gè)模塊請(qǐng)看我的另一篇文章，此處不再整理（我太懶了）

手把手從零開(kāi)始---封裝一個(gè)vue視頻播放器組件

vue常用ui庫(kù)

移動(dòng)端

• mint-ui （http://mint-ui.github.io/#!/zh-cn）
• Vant（https://youzan.github.io/vant/#/zh-CN/home）
• VUX (https://vux.li/)

pc端

• element-ui（https://element.eleme.cn/2.13/#/zh-CN/component/installation）
• Ant Design of Vue（https://www.antdv.com/docs/vue/introduce-cn/）
• Avue (https://avuejs.com/)

常用webpack配置

vue-lic3腳手架（vue.config.js）

publicPath

類型：String

默認(rèn)：'/'

部署應(yīng)用包時(shí)的基本 URL。默認(rèn)情況下，Vue CLI會(huì)假設(shè)你的應(yīng)用是被部署在一個(gè)域名的根路徑上，例如https://www.my-app.com/。如果應(yīng)用被部署在一個(gè)子路徑上，你就需要用這個(gè)選項(xiàng)指定這個(gè)子路徑。例如，如果你的應(yīng)用被部署在https://www.my-app.com/my-app/，則設(shè)置publicPath為/my-app/

這個(gè)值也可以被設(shè)置為空字符串 ('') 或是相對(duì)路徑 ('./')，這樣所有的資源都會(huì)被鏈接為相對(duì)路徑，這樣打出來(lái)的包可以被部署在任意路徑，也可以用在類似 Cordova hybrid 應(yīng)用的文件系統(tǒng)中。

productionSourceMap

類型：boolean

moren：true

不允許打包時(shí)生成項(xiàng)目來(lái)源映射文件，在生產(chǎn)環(huán)境下可以顯著的減少包的體積

注 Source map的作用：針對(duì)打包后的代碼進(jìn)行的處理，就是一個(gè)信息文件，里面儲(chǔ)存著位置信息。也就是說(shuō)，轉(zhuǎn)換后的代碼的每一個(gè)位置，所對(duì)應(yīng)的轉(zhuǎn)換前的位置。有了它，出錯(cuò)的時(shí)候，除錯(cuò)工具將直接顯示原始代碼，而不是轉(zhuǎn)換后的代碼。這無(wú)疑給開(kāi)發(fā)者帶來(lái)了很大方便

assetsDir

放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對(duì)于 outputDir 的) 目錄,默認(rèn)是'',

indexPath

指定生成的 index.html 的輸出路徑(相對(duì)于outputDir)。也可以是一個(gè)絕對(duì)路徑。默認(rèn)是'index.html'

lintOnSave

是否在每次保存時(shí)使用eslint檢查，這個(gè)對(duì)語(yǔ)法的要求比較嚴(yán)格，對(duì)自己有要求的同學(xué)可以使用

css

css:?{
????//是否啟用css分離插件，默認(rèn)是true，如果不啟用css樣式分離插件，打包出來(lái)的css是通過(guò)內(nèi)聯(lián)樣式的方式注入至dom中的，
????extract:?true,
????sourceMap:?false,//效果同上
????modules:?false,//?為所有的 CSS 及其預(yù)處理文件開(kāi)啟 CSS Modules。
????//?這個(gè)選項(xiàng)不會(huì)影響?`*.vue`?文件。
??},

devServer

本地開(kāi)發(fā)服務(wù)器配置，此處直接貼上我常用的配置，以注釋的方式介紹

devServer:?{?
????//配置開(kāi)發(fā)服務(wù)器
????host:?"0.0.0.0",
????//是否啟用熱加載，就是每次更新代碼，是否需要重新刷新瀏覽器才能看到新代碼效果
????hot:?true,
????//服務(wù)啟動(dòng)端口
????port:?"8080",
????//是否自動(dòng)打開(kāi)瀏覽器默認(rèn)為false
????open:?false,
????//配置http代理
????proxy:?{?
??????"/api":?{?//如果ajax請(qǐng)求的地址是http://192.168.0.118:9999/api1那么你就可以在jajx中使用/api/api1路徑,其請(qǐng)求路徑會(huì)解析
????????// http://192.168.0.118:9999/api1，當(dāng)然你在瀏覽器上開(kāi)到的還是http://localhost:8080/api/api1;
????????target:?"http://192.168.0.118:9999",
????????//是否允許跨域，這里是在開(kāi)發(fā)環(huán)境會(huì)起作用，但在生產(chǎn)環(huán)境下，還是由后臺(tái)去處理，所以不必太在意
????????changeOrigin:?true,
????????pathRewrite:?{
????????????//把多余的路徑置為''
??????????"api":?""
????????}
??????},
??????"/api2":?{//可以配置多個(gè)代理，匹配上那個(gè)就使用哪種解析方式
????????target:?"http://api2",
????????//?...
??????}
????}
},

pluginOptions

這是一個(gè)不進(jìn)行任何 schema 驗(yàn)證的對(duì)象，因此它可以用來(lái)傳遞任何第三方插件選項(xiàng)，例如：

{
????//定義一個(gè)全局的less文件，把公共樣式變量放入其中，這樣每次使用的時(shí)候就不用重新引用了
????'style-resources-loader':?{
??????preProcessor:?'less',
??????patterns:?[
????????'./src/assets/public.less'
??????]
????}
}

chainWebpack

是一個(gè)函數(shù)，會(huì)接收一個(gè)基于 webpack-chain 的 ChainableConfig 實(shí)例。允許對(duì)內(nèi)部的 webpack 配置進(jìn)行更細(xì)粒度的修改。例如：

chainWebpack(config)?{?
//添加一個(gè)路徑別名?假設(shè)有在assets/img/menu/目錄下有十張圖片，如果全路徑require("/assets/img/menu/img1.png")
//去引入在不同的層級(jí)下實(shí)在是太不方便了，這時(shí)候向下方一樣定義一個(gè)路勁別名就很實(shí)用了
????config.resolve.alias
??????//添加多個(gè)別名支持鏈?zhǔn)秸{(diào)用
??????.set("assets",?path.join(__dirname,?"/src/assets"))
??????.set("img",?path.join(__dirname,?"/src/assets/img/menu"))
??????//引入圖片時(shí)只需require("img/img1.png");即可
}

參考：

1、Vue常見(jiàn)問(wèn)題總結(jié) https://blog.csdn.net/qq_27674439/article/details/99449197

2、vue常見(jiàn)面試題 https://zhuanlan.zhihu.com/p/92407628

3、vuex官網(wǎng) https://vuex.vuejs.org/zh/

4、Vuex面試題匯總 https://juejin.im/post/5dba91e4518825647e4ef18b

5、Vue CLI官網(wǎng) https://cli.vuejs.org/zh/

》》面試官都在用的題庫(kù)，快來(lái)看看《《