4、vue中?key?值的作用

使用key來(lái)給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)

key的作用主要是為了高效的更新虛擬DOM。另外vue中在使用相同標(biāo)簽名元素的過(guò)渡切換時(shí)，也會(huì)使用到key屬性，其目的也是為了讓vue可以區(qū)分它們，

否則vue只會(huì)替換其內(nèi)部屬性而不會(huì)觸發(fā)過(guò)渡效果。

5.Vue 組件中 data 為什么必須是函數(shù)？

在?new Vue()?中，data?是可以作為一個(gè)對(duì)象進(jìn)行操作的，然而在?component?中，data?只能以函數(shù)的形式存在，不能直接將對(duì)象賦值給它。

當(dāng)data選項(xiàng)是一個(gè)函數(shù)的時(shí)候，每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的的拷貝，這樣各個(gè)實(shí)例中的data不會(huì)相互影響，是的。

6、v-for 與 v-if 的優(yōu)先級(jí)

v-for的優(yōu)先級(jí)比v-if高。

7.說(shuō)出至少 4 種 vue 當(dāng)中的指令和它的用法

v-if(判斷是否隱藏)

v-for(把數(shù)據(jù)遍歷出來(lái))

v-bind(綁定屬性)

v-model(實(shí)現(xiàn)雙向綁定)

vue核心知識(shí)——組件篇

1.vue中子組件調(diào)用父組件的方法

第一種方法是直接在子組件中通過(guò)this.$parent.event來(lái)調(diào)用父組件的方法。

第二種方法是在子組件里用$emit向父組件觸發(fā)一個(gè)事件，父組件監(jiān)聽(tīng)這個(gè)事件就行了。

第三種是父組件把方法傳入子組件中，在子組件里直接調(diào)用這個(gè)方法。

2.vue中父組件調(diào)用子組件的方法

父組件利用ref屬性操作子組件方法。

父：

子：

method: {

test() {

alert(1)

}

}

在父組件里調(diào)用test即 this.$refs.childMethod.test()

3.vue組件之間傳值

(1)父組件給子組件傳值：

1.父組件調(diào)用子組件的時(shí)候動(dòng)態(tài)綁定屬性

2.子組件定義props接收動(dòng)態(tài)綁定的屬性props: ['dataList']

3.子組件使用數(shù)據(jù)

(2)子組件主動(dòng)獲取父子間的屬性和方法：

在子組件中使用this.$parent.屬性/this.$parent.方法。

（3）子組件給父組件傳值：

一、使用ref屬性

1.父組件調(diào)用子組件時(shí)綁定屬性ref

<parent :ref='parent'></parent>

2.在父組件中使用this.$refs.parent.屬性/this.$refs.parent.方法

二、使用$emit方法

1.子組件調(diào)用this.$emit('方法名‘,傳值)

2.父組件通過(guò)子組件綁定的'方法名'獲取傳值。

（4）vue頁(yè)面級(jí)組件之間傳值

1.使用vue-router通過(guò)跳轉(zhuǎn)鏈接帶參數(shù)傳參。

2.使用本地緩存localStorge。

3.使用vuex數(shù)據(jù)管理傳值。

（5）說(shuō)說(shuō)vue的動(dòng)態(tài)組件。

多個(gè)組件通過(guò)同一個(gè)掛載點(diǎn)進(jìn)行組件的切換，is的值是哪個(gè)組件的名稱，那么頁(yè)面就會(huì)顯示哪個(gè)組件。

主要考查面試這 component的 is屬性。

（6）keep-alive內(nèi)置組件的作用

可以讓當(dāng)前組件或者路由不經(jīng)歷創(chuàng)建和銷毀，而是進(jìn)行緩存，凡是被keep-alive組件包裹的組件，除了第一次以外。不會(huì)經(jīng)歷創(chuàng)建和銷毀階段的。第一次創(chuàng)建后就會(huì)緩存到緩存當(dāng)中

(7)遞歸組件的用法

組件是可以在它們自己的模板中調(diào)用自身的。不過(guò)它們只能通過(guò)?name?選項(xiàng)來(lái)做這件事。

首先我們要知道，既然是遞歸組件，那么一定要有一個(gè)結(jié)束的條件，否則就會(huì)使用組件循環(huán)引用，最終出現(xiàn)“max stack size exceeded”的錯(cuò)誤，也就是棧溢出。那么，我們可以使用v-if="false"作為遞歸組件的結(jié)束條件。當(dāng)遇到v-if為false時(shí)，組件將不會(huì)再進(jìn)行渲染。

vue核心知識(shí)——路由

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

動(dòng)態(tài)路由的創(chuàng)建，主要是使用path屬性過(guò)程中，使用動(dòng)態(tài)路徑參數(shù)，以冒號(hào)開(kāi)頭，如下：

{

path: ‘/details/:id’

name: ‘Details’

components: Details

}

當(dāng)匹配到/details下的路由時(shí)，參數(shù)值會(huì)被設(shè)置到this.$route.params下，所以通過(guò)這個(gè)屬性可以獲取動(dòng)態(tài)參數(shù)

this.$route.params.id

2.vue-router有哪幾種路由守衛(wèi)?

路由守衛(wèi)為：

全局守衛(wèi)：beforeEach

后置守衛(wèi)：afterEach

全局解析守衛(wèi)：beforeResolve

路由獨(dú)享守衛(wèi)：beforeEnter

3.$route和 $router的區(qū)別是什么？

$router為VueRouter的實(shí)例，是一個(gè)全局路由對(duì)象，包含了路由跳轉(zhuǎn)的方法、鉤子函數(shù)等。

$route 是路由信息對(duì)象||跳轉(zhuǎn)的路由對(duì)象，每一個(gè)路由都會(huì)有一個(gè)route對(duì)象，是一個(gè)局部對(duì)象，包含path,params,hash,query,fullPath,matched,name等路由信息參數(shù)。

4.vue-router響應(yīng)路由參數(shù)的變化

• (1)用watch 檢測(cè)

• (2)組件內(nèi)導(dǎo)航鉤子函數(shù)

5.?vue-router 傳參

(1)使用Params:

• 只能使用name，不能使用path

• 參數(shù)會(huì)顯示在路徑上，刷新不會(huì)被清空

（2）使用Query：

• 參數(shù)會(huì)顯示在路徑上，刷新不會(huì)被清空

• name 可以使用path路徑

vue核心知識(shí)——vuex

不用Vuex會(huì)帶來(lái)什么問(wèn)題？

一、可維護(hù)性會(huì)下降，你要想修改數(shù)據(jù)，你得維護(hù)三個(gè)地方

二、可讀性會(huì)下降，因?yàn)橐粋€(gè)組件里的數(shù)據(jù)，你根本就看不出來(lái)是從哪來(lái)的

三、增加耦合，大量的上傳派發(fā)，會(huì)讓耦合性大大的增加，本來(lái)Vue用Component就是為了減少耦合，現(xiàn)在這么用，和組件化的初衷相背。

1.vuex有哪幾種屬性？

有五種，分別是 State、 Getter、Mutation 、Action、 Module。

2、vuex的State特性是？

答：

一、Vuex就是一個(gè)倉(cāng)庫(kù)，倉(cāng)庫(kù)里面放了很多對(duì)象。其中state就是數(shù)據(jù)源存放地，對(duì)應(yīng)于與一般Vue對(duì)象里面的data

二、state里面存放的數(shù)據(jù)是響應(yīng)式的，Vue組件從store中讀取數(shù)據(jù)，若是store中的數(shù)據(jù)發(fā)生改變，依賴這個(gè)數(shù)據(jù)的組件也會(huì)發(fā)生更新

三、它通過(guò)mapState把全局的 state 和 getters 映射到當(dāng)前組件的 computed 計(jì)算屬性中

3、vuex的Getter特性是？

答：

一、getters 可以對(duì)State進(jìn)行計(jì)算操作，它就是Store的計(jì)算屬性

二、 雖然在組件內(nèi)也可以做計(jì)算屬性，但是getters 可以在多組件之間復(fù)用

三、 如果一個(gè)狀態(tài)只在一個(gè)組件內(nèi)使用，是可以不用getters

4、vuex的Action特性是？

答：

一、Action 類似于 mutation，不同在于：

二、Action 提交的是 mutation，而不是直接變更狀態(tài)。

三、Action 可以包含任意異步操作

最后

總的來(lái)說(shuō)，面試官要是考察思路就會(huì)從你實(shí)際做過(guò)的項(xiàng)目入手，考察你實(shí)際編碼能力，就會(huì)讓你在電腦敲代碼，看你用什么編輯器、插件、編碼習(xí)慣等。所以我們?cè)诨卮鹈嬖嚬賳?wèn)題時(shí)，有一個(gè)清晰的邏輯思路，清楚知道自己在和面試官說(shuō)項(xiàng)目說(shuō)技術(shù)時(shí)的話就好了

算屬性

二、 雖然在組件內(nèi)也可以做計(jì)算屬性，但是getters 可以在多組件之間復(fù)用

三、 如果一個(gè)狀態(tài)只在一個(gè)組件內(nèi)使用，是可以不用getters

4、vuex的Action特性是？

答：

一、Action 類似于 mutation，不同在于：

二、Action 提交的是 mutation，而不是直接變更狀態(tài)。

三、Action 可以包含任意異步操作

最后

總的來(lái)說(shuō)，面試官要是考察思路就會(huì)從你實(shí)際做過(guò)的項(xiàng)目入手，考察你實(shí)際編碼能力，就會(huì)讓你在電腦敲代碼，看你用什么編輯器、插件、編碼習(xí)慣等。所以我們?cè)诨卮鹈嬖嚬賳?wèn)題時(shí)，有一個(gè)清晰的邏輯思路，清楚知道自己在和面試官說(shuō)項(xiàng)目說(shuō)技術(shù)時(shí)的話就好了

[外鏈圖片轉(zhuǎn)存中…(img-xg9ndJd3-1725988638332)]

[外鏈圖片轉(zhuǎn)存中…(img-3L2u7u8S-1725988638333)]