一、對(duì)于MVVM的理解？

MVVM 是 Model-View-ViewModel 的縮寫(xiě)。

Model代表數(shù)據(jù)模型沮趣，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯。

View代表UI 組件坷随，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來(lái)房铭。

ViewModel監(jiān)聽(tīng)模型數(shù)據(jù)的改變和控制視圖行為、處理用戶交互温眉，簡(jiǎn)單理解就是一個(gè)同步View 和 Model的對(duì)象缸匪，連接Model和View。

在MVVM架構(gòu)下类溢，View 和 Model 之間并沒(méi)有直接的聯(lián)系凌蔬，而是通過(guò)ViewModel進(jìn)行交互，Model 和 ViewModel 之間的交互是雙向的闯冷， 因此View 數(shù)據(jù)的變化會(huì)同步到Model中砂心，而Model 數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View 上。

ViewModel通過(guò)雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來(lái)蛇耀，而View 和 Model 之間的同步工作完全是自動(dòng)的辩诞，無(wú)需人為干涉，因此開(kāi)發(fā)者只需關(guān)注業(yè)務(wù)邏輯纺涤，不需要手動(dòng)操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問(wèn)題译暂，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來(lái)統(tǒng)一管理抠忘。

二、Vue的生命周期

beforeCreate（創(chuàng)建前）? ? 在數(shù)據(jù)觀測(cè)和初始化事件還未開(kāi)始

created（創(chuàng)建后）? ? 完成數(shù)據(jù)觀測(cè)外永，屬性和方法的運(yùn)算崎脉，初始化事件，$el屬性還沒(méi)有顯示出來(lái)

beforeMount（載入前）? ? 在掛載開(kāi)始之前被調(diào)用伯顶，相關(guān)的render函數(shù)首次被調(diào)用荧嵌。實(shí)例已完成以下的配置：編譯模板，把data里面的數(shù)據(jù)和模板生成html砾淌。注意此時(shí)還沒(méi)有掛載html到頁(yè)面上。

mounted（載入后）? ? 在el 被新創(chuàng)建的 vm.$el 替換谭网，并掛載到實(shí)例上去之后調(diào)用汪厨。實(shí)例已完成以下的配置：用上面編譯好的html內(nèi)容替換el屬性指向的DOM對(duì)象。完成模板中的html渲染到html頁(yè)面中愉择。此過(guò)程中進(jìn)行ajax交互劫乱。

beforeUpdate（更新前）? ? 在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前锥涕≈愿辏可以在該鉤子中進(jìn)一步地更改狀態(tài)，不會(huì)觸發(fā)附加的重渲染過(guò)程层坠。

updated（更新后）? ? 在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用殖妇。調(diào)用時(shí)，組件DOM已經(jīng)更新破花，所以可以執(zhí)行依賴于DOM的操作谦趣。然而在大多數(shù)情況下，應(yīng)該避免在此期間更改狀態(tài)座每，因?yàn)檫@可能會(huì)導(dǎo)致更新無(wú)限循環(huán)前鹅。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

beforeDestroy（銷毀前）? ? 在實(shí)例銷毀之前調(diào)用峭梳。實(shí)例仍然完全可用舰绘。

destroyed（銷毀后）? ? 在實(shí)例銷毀之后調(diào)用。調(diào)用后葱椭，所有的事件監(jiān)聽(tīng)器會(huì)被移除捂寿，所有的子實(shí)例也會(huì)被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用挫以。

1.什么是vue生命周期者蠕？

答： Vue 實(shí)例從創(chuàng)建到銷毀的過(guò)程，就是生命周期掐松。從開(kāi)始創(chuàng)建踱侣、初始化數(shù)據(jù)粪小、編譯模板、掛載Dom→渲染抡句、更新→渲染探膊、銷毀等一系列過(guò)程，稱之為 Vue 的生命周期待榔。

2.vue生命周期的作用是什么逞壁？

答：它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過(guò)程時(shí)更容易形成好的邏輯锐锣。

3.vue生命周期總共有幾個(gè)階段腌闯？

答：它可以總共分為8個(gè)階段：創(chuàng)建前/后, 載入前/后,更新前/后,銷毀前/銷毀后。

4.第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子雕憔？

答：會(huì)觸發(fā) 下面這幾個(gè)beforeCreate, created, beforeMount, mounted 姿骏。

5.DOM 渲染在 哪個(gè)周期中就已經(jīng)完成？

答：DOM 渲染在 mounted 中就已經(jīng)完成了斤彼。

三分瘦、 Vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定的原理：Object.defineProperty（）

vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是：采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過(guò)Object.defineProperty（）來(lái)劫持各個(gè)屬性的setter琉苇，getter嘲玫，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽(tīng)回調(diào)并扇。當(dāng)把一個(gè)普通 Javascript 對(duì)象傳給 Vue 實(shí)例來(lái)作為它的 data 選項(xiàng)時(shí)去团，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter穷蛹。用戶看不到 getter/setter渗勘，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問(wèn)和修改時(shí)通知變化俩莽。

vue的數(shù)據(jù)雙向綁定

將MVVM作為數(shù)據(jù)綁定的入口旺坠，整合Observer，Compile和Watcher三者扮超，通過(guò)Observer來(lái)監(jiān)聽(tīng)自己的model的數(shù)據(jù)變化取刃，通過(guò)Compile來(lái)解析編譯模板指令（vue中是用來(lái)解析

{{}}），最終利用watcher搭起observer和Compile之間的通信橋梁出刷，達(dá)到數(shù)據(jù)變化

—>視圖更新璧疗；視圖交互變化（input）—>數(shù)據(jù)model變更雙向綁定效果。

js實(shí)現(xiàn)簡(jiǎn)單的雙向綁定

varobj = {}Object.defineProperty(obj,'txt', {get:function(){returnobj? ? ? ? },set:function(newValue){document.getElementById('txt').value = newValuedocument.getElementById('show').innerHTML = newValue? ? ? ? }? ? })document.addEventListener('keyup',function(e){? ? ? ? obj.txt = e.target.value? ? })

四馁龟、Vue組件間的參數(shù)傳遞

1.父組件與子組件傳值

父組件傳給子組件：子組件通過(guò)props方法接受數(shù)據(jù);

子組件傳給父組件：$emit方法傳遞參數(shù)

2.非父子組件間的數(shù)據(jù)傳遞崩侠，兄弟組件傳值

eventBus，就是創(chuàng)建一個(gè)事件中心坷檩，相當(dāng)于中轉(zhuǎn)站却音，可以用它來(lái)傳遞事件和接收事件改抡。項(xiàng)目比較小時(shí)，用這個(gè)比較合適系瓢。（雖然也有不少人推薦直接用VUEX阿纤，具體來(lái)說(shuō)看需求咯。技術(shù)只是手段夷陋，目的達(dá)到才是王道欠拾。）

五、Vue的路由實(shí)現(xiàn)：hash模式 和 history模式

hash模式：在瀏覽器中符號(hào)“#”骗绕，#以及#后面的字符稱之為hash藐窄，用window.location.hash讀取酬土；

特點(diǎn)：hash雖然在URL中枷邪，但不被包括在HTTP請(qǐng)求中；用來(lái)指導(dǎo)瀏覽器動(dòng)作诺凡，對(duì)服務(wù)端安全無(wú)用，hash不會(huì)重加載頁(yè)面践惑。

hash 模式下腹泌，僅 hash 符號(hào)之前的內(nèi)容會(huì)被包含在請(qǐng)求中，如http://www.xxx.com尔觉，因此對(duì)于后端來(lái)說(shuō)凉袱，即使沒(méi)有做到對(duì)路由的全覆蓋，也不會(huì)返回 404 錯(cuò)誤侦铜。

history模式：history采用HTML5的新特性专甩；且提供了兩個(gè)新方法：pushState（），replaceState（）可以對(duì)瀏覽器歷史記錄棧進(jìn)行修改钉稍，以及popState事件的監(jiān)聽(tīng)到狀態(tài)變更涤躲。

history 模式下，前端的 URL 必須和實(shí)際向后端發(fā)起請(qǐng)求的 URL 一致贡未，如http://www.xxx.com/items/id种樱。后端如果缺少對(duì) /items/id 的路由處理，將返回 404 錯(cuò)誤俊卤。Vue-Router 官網(wǎng)里如此描述：“不過(guò)這種模式要玩好嫩挤，還需要后臺(tái)配置支持……所以呢，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源消恍，則應(yīng)該返回同一個(gè) index.html 頁(yè)面岂昭，這個(gè)頁(yè)面就是你 app 依賴的頁(yè)面『菰梗”

六约啊、Vue與Angular以及React的區(qū)別邑遏？

（版本在不斷更新，以下的區(qū)別有可能不是很正確棍苹。我工作中只用到vue无宿，對(duì)angular和react不怎么熟）

1.與AngularJS的區(qū)別

相同點(diǎn)：

都支持指令：內(nèi)置指令和自定義指令；都支持過(guò)濾器：內(nèi)置過(guò)濾器和自定義過(guò)濾器枢里；都支持雙向數(shù)據(jù)綁定孽鸡；都不支持低端瀏覽器。

不同點(diǎn)：

AngularJS的學(xué)習(xí)成本高栏豺，比如增加了Dependency Injection特性彬碱，而Vue.js本身提供的API都比較簡(jiǎn)單、直觀奥洼；在性能上巷疼，AngularJS依賴對(duì)數(shù)據(jù)做臟檢查，所以Watcher越多越慢灵奖；Vue.js使用基于依賴追蹤的觀察并且使用異步隊(duì)列更新嚼沿，所有的數(shù)據(jù)都是獨(dú)立觸發(fā)的。

2.與React的區(qū)別

相同點(diǎn)：

React采用特殊的JSX語(yǔ)法瓷患，Vue.js在組件開(kāi)發(fā)中也推崇編寫(xiě).vue特殊文件格式骡尽，對(duì)文件內(nèi)容都有一些約定，兩者都需要編譯后使用擅编；中心思想相同：一切都是組件攀细，組件實(shí)例之間可以嵌套；都提供合理的鉤子函數(shù)爱态，可以讓開(kāi)發(fā)者定制化地去處理需求谭贪；都不內(nèi)置列數(shù)AJAX，Route等功能到核心包锦担，而是以插件的方式加載俭识；在組件開(kāi)發(fā)中都支持mixins的特性。

不同點(diǎn)：

React采用的Virtual DOM會(huì)對(duì)渲染出來(lái)的結(jié)果做臟檢查洞渔；Vue.js在模板中提供了指令鱼的，過(guò)濾器等，可以非常方便痘煤，快捷地操作Virtual DOM凑阶。

七、vue路由的鉤子函數(shù)

首頁(yè)可以控制導(dǎo)航跳轉(zhuǎn)衷快，beforeEach宙橱，afterEach等，一般用于頁(yè)面title的修改。一些需要登錄才能調(diào)整頁(yè)面的重定向功能师郑。

beforeEach主要有3個(gè)參數(shù)to环葵，from，next：

to：route即將進(jìn)入的目標(biāo)路由對(duì)象宝冕，

from：route當(dāng)前導(dǎo)航正要離開(kāi)的路由

next：function一定要調(diào)用該方法resolve這個(gè)鉤子张遭。執(zhí)行效果依賴next方法的調(diào)用參數(shù)〉乩妫可以控制網(wǎng)頁(yè)的跳轉(zhuǎn)菊卷。

八、vuex是什么宝剖？怎么使用洁闰？哪種功能場(chǎng)景使用它？

只用來(lái)讀取的狀態(tài)集中放在store中万细； 改變狀態(tài)的方式是提交mutations扑眉，這是個(gè)同步的事物； 異步邏輯應(yīng)該封裝在action中赖钞。

在main.js引入store腰素，注入。新建了一個(gè)目錄store雪营，….. export 弓千。

場(chǎng)景有：?jiǎn)雾?yè)應(yīng)用中，組件之間的狀態(tài)卓缰、音樂(lè)播放、登錄狀態(tài)砰诵、加入購(gòu)物車

state

Vuex 使用單一狀態(tài)樹(shù),即每個(gè)應(yīng)用將僅僅包含一個(gè)store 實(shí)例征唬，但單一狀態(tài)樹(shù)和模塊化并不沖突。存放的數(shù)據(jù)狀態(tài)茁彭，不可以直接修改里面的數(shù)據(jù)总寒。

mutations

mutations定義的方法動(dòng)態(tài)修改Vuex 的 store 中的狀態(tài)或數(shù)據(jù)。

getters

類似vue的計(jì)算屬性理肺，主要用來(lái)過(guò)濾一些數(shù)據(jù)摄闸。

action

actions可以理解為通過(guò)將mutations里面處里數(shù)據(jù)的方法變成可異步的處理數(shù)據(jù)的方法，簡(jiǎn)單的說(shuō)就是異步操作數(shù)據(jù)妹萨。view 層通過(guò) store.dispath 來(lái)分發(fā) action年枕。

conststore = new Vuex.Store({ //store實(shí)例state:{count:0},mutations:{? ? ? ? ? ? ? ? increment(state) {state.count++}},actions:{ increment(context) {context.commit('increment')}}})

modules

項(xiàng)目特別復(fù)雜的時(shí)候，可以讓每一個(gè)模塊擁有自己的state乎完、mutation熏兄、action、getters,使得結(jié)構(gòu)非常清晰，方便管理摩桶。

constmoduleA = {state:{ ... },mutations:{ ... },actions:{ ... },getters:{ ... }}constmoduleB = {state:{ ... },mutations:{ ... },actions:{ ... }}conststore = new Vuex.Store({modules:{a:moduleA,b:moduleB})

九桥状、vue-cli如何新增自定義指令？

1.創(chuàng)建局部指令

varapp =newVue({? ? el:'#app',? ? data: {? ? ? ? },// 創(chuàng)建指令(可以多個(gè))directives: {// 指令名稱dir1: {? ? ? ? ? ? inserted(el) {// 指令中第一個(gè)參數(shù)是當(dāng)前使用指令的DOMconsole.log(el);console.log(arguments);// 對(duì)DOM進(jìn)行操作el.style.width ='200px';? ? ? ? ? ? ? ? el.style.height ='200px';? ? ? ? ? ? ? ? el.style.background ='#000';? ? ? ? ? ? }? ? ? ? }? ? }})

2.全局指令

Vue.directive('dir2', {? ? inserted(el) {console.log(el);? ? }})

3.指令的使用

十硝清、vue如何自定義一個(gè)過(guò)濾器辅斟？

html代碼：

{{msg| capitalize }}

JS代碼：

varvm=newVue({? ? el:"#app",? ? data:{? ? ? ? msg:''},? ? filters: {? ? ? capitalize: function (value) {if(!value)return''value=value.toString()returnvalue.charAt(0).toUpperCase() +value.slice(1)? ? ? }? ? }})

全局定義過(guò)濾器

Vue.filter('capitalize', function (value) {if(!value)return''value=value.toString()returnvalue.charAt(0).toUpperCase() +value.slice(1)})

過(guò)濾器接收表達(dá)式的值 (msg) 作為第一個(gè)參數(shù)。capitalize 過(guò)濾器將會(huì)收到 msg的值作為第一個(gè)參數(shù)芦拿。

十一士飒、對(duì)keep-alive 的了解？

keep-alive是 Vue 內(nèi)置的一個(gè)組件防嗡，可以使被包含的組件保留狀態(tài)变汪，或避免重新渲染。

在vue 2.1.0 版本之后蚁趁，keep-alive新加入了兩個(gè)屬性: include(包含的組件緩存) 與 exclude(排除的組件不緩存裙盾，優(yōu)先級(jí)大于include) 。

使用方法

<!-- 該組件是否緩存取決于include和exclude屬性 -->

參數(shù)解釋

include - 字符串或正則表達(dá)式他嫡，只有名稱匹配的組件會(huì)被緩存

exclude - 字符串或正則表達(dá)式番官，任何名稱匹配的組件都不會(huì)被緩存

include 和 exclude 的屬性允許組件有條件地緩存。二者都可以用“钢属，”分隔字符串徘熔、正則表達(dá)式、數(shù)組淆党。當(dāng)使用正則或者是數(shù)組時(shí)酷师，要記得使用v-bind 。

使用示例

<!-- 逗號(hào)分隔字符串染乌，只有組件a與b被緩存山孔。 --><!-- 正則表達(dá)式 (需要使用 v-bind，符合匹配規(guī)則的都會(huì)被緩存) --><!-- Array (需要使用 v-bind荷憋，被包含的都會(huì)被緩存) -->

十二台颠、一句話就能回答的面試題

1.css只在當(dāng)前組件起作用

答：在style標(biāo)簽中寫(xiě)入scoped即可 例如：

2.v-if 和 v-show 區(qū)別

答：v-if按照條件是否渲染，v-show是display的block或none勒庄；

3.$route和$router的區(qū)別

答：$route是“路由信息對(duì)象”串前，包括path，params实蔽，hash荡碾，query，fullPath局装，matched玩荠，name等路由信息參數(shù)漆腌。而$router是“路由實(shí)例”對(duì)象包括了路由的跳轉(zhuǎn)方法，鉤子函數(shù)等阶冈。

4.vue.js的兩個(gè)核心是什么闷尿？

答：數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)

5.vue幾種常用的指令

答：v-for 女坑、 v-if 填具、v-bind、v-on匆骗、v-show劳景、v-else

6.vue常用的修飾符？

答：.prevent: 提交事件不再重載頁(yè)面碉就；.stop: 阻止單擊事件冒泡盟广；.self: 當(dāng)事件發(fā)生在該元素本身而不是子元素的時(shí)候會(huì)觸發(fā)；.capture: 事件偵聽(tīng)瓮钥，事件發(fā)生的時(shí)候會(huì)調(diào)用

7.v-on 可以綁定多個(gè)方法嗎筋量？

答：可以

8.vue中 key 值的作用？

答：當(dāng) Vue.js 用 v-for 正在更新已渲染過(guò)的元素列表時(shí)碉熄，它默認(rèn)用“就地復(fù)用”策略桨武。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序锈津， 而是簡(jiǎn)單復(fù)用此處每個(gè)元素呀酸，并且確保它在特定索引下顯示已被渲染過(guò)的每個(gè)元素。key的作用主要是為了高效的更新虛擬DOM琼梆。

9.什么是vue的計(jì)算屬性性誉？

答：在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)，在需要對(duì)數(shù)據(jù)進(jìn)行復(fù)雜處理茎杂，且可能多次使用的情況下错览，盡量采取計(jì)算屬性的方式。好處：①使得數(shù)據(jù)處理結(jié)構(gòu)清晰蛉顽；②依賴于數(shù)據(jù)蝗砾，數(shù)據(jù)更新先较，處理結(jié)果自動(dòng)更新携冤；③計(jì)算屬性內(nèi)部this指向vm實(shí)例；④在template調(diào)用時(shí)闲勺，直接寫(xiě)計(jì)算屬性名即可曾棕；⑤常用的是getter方法，獲取數(shù)據(jù)菜循，也可以使用set方法改變數(shù)據(jù)翘地；⑥相較于methods，不管依賴的數(shù)據(jù)變不變，methods都會(huì)重新計(jì)算衙耕，但是依賴數(shù)據(jù)不變的時(shí)候computed從緩存中獲取昧穿，不會(huì)重新計(jì)算。

10.vue等單頁(yè)面應(yīng)用及其優(yōu)缺點(diǎn)

答：優(yōu)點(diǎn)：Vue 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件橙喘，核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)时鸵。MVVM、數(shù)據(jù)驅(qū)動(dòng)厅瞎、組件化饰潜、輕量、簡(jiǎn)潔和簸、高效彭雾、快速、模塊友好锁保。

缺點(diǎn)：不支持低版本的瀏覽器薯酝，最低只支持到IE9；不利于SEO的優(yōu)化（如果要支持SEO身诺，建議通過(guò)服務(wù)端來(lái)進(jìn)行渲染組件）蜜托；第一次加載首頁(yè)耗時(shí)相對(duì)長(zhǎng)一些；不可以使用瀏覽器的導(dǎo)航按鈕需要自行實(shí)現(xiàn)前進(jìn)霉赡、后退橄务。

1、active-class是哪個(gè)組件的屬性穴亏？嵌套路由怎么定義蜂挪？

答：vue-router模塊的router-link組件。

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

答：在router目錄下的index.js文件中刺覆，對(duì)path屬性加上/:id严肪。? 使用router對(duì)象的params.id

3、vue-router有哪幾種導(dǎo)航鉤子谦屑？?? ?

答：三種驳糯，一種是全局導(dǎo)航鉤子：router.beforeEach(to,from,next)，作用：跳轉(zhuǎn)前進(jìn)行判斷攔截氢橙。第二種：組件內(nèi)的鉤子酝枢；第三種：?jiǎn)为?dú)路由獨(dú)享組件

4、scss是什么悍手？安裝使用的步驟是帘睦？有哪幾大特性袍患？

答：預(yù)處理css，把css當(dāng)前函數(shù)編寫(xiě)竣付，定義變量,嵌套诡延。 先裝css-loader、node-loader古胆、sass-loader等加載器模塊孕暇，在webpack-base.config.js配置文件中加多一個(gè)拓展:extenstion，再加多一個(gè)模塊：module里面test赤兴、loader

4.1妖滔、scss是什么？在vue.cli中的安裝使用步驟是桶良？有哪幾大特性座舍？

答：css的預(yù)編譯。

使用步驟：

第一步：用npm 下三個(gè)loader（sass-loader陨帆、css-loader曲秉、node-sass）

第二步：在build目錄找到webpack.base.config.js，在那個(gè)extends屬性中加一個(gè)拓展.scss

第三步：還是在同一個(gè)文件疲牵，配置一個(gè)module屬性

第四步：然后在組件的style標(biāo)簽加上lang屬性 承二，例如：lang=”scss”

有哪幾大特性:

1、可以用變量纲爸，例如（$變量名稱=值）亥鸠；

2、可以用混合器识啦，例如（）

3负蚊、可以嵌套

5、mint-ui是什么颓哮？怎么使用家妆？說(shuō)出至少三個(gè)組件使用方法？

答：基于vue的前端組件庫(kù)冕茅。npm安裝伤极，然后import樣式和js，vue.use（mintUi）全局引入姨伤。在單個(gè)組件局部引入：import {Toast} from ‘mint-ui’哨坪。組件一：Toast(‘登錄成功’)；組件二：mint-header姜挺；組件三：mint-swiper

6齿税、v-model是什么彼硫？怎么使用炊豪？ vue中標(biāo)簽怎么綁定事件凌箕？

答：可以實(shí)現(xiàn)雙向綁定，指令（v-class词渤、v-for牵舱、v-if、v-show缺虐、v-on）芜壁。vue的model層的data屬性。綁定事件：

7高氮、axios是什么慧妄？怎么使用？描述使用它實(shí)現(xiàn)登錄功能的流程剪芍？

答：請(qǐng)求后臺(tái)資源的模塊塞淹。npm install axios

-S裝好，然后發(fā)送的是跨域罪裹，需在配置文件中config/index.js進(jìn)行設(shè)置饱普。后臺(tái)如果是Tp5則定義一個(gè)資源路由。js中使用import進(jìn)來(lái)状共，然后.get或.post幽告。返回在.then函數(shù)中如果成功绘闷，失敗則是在.catch函數(shù)中

8、axios+tp5進(jìn)階中，調(diào)用axios.post(‘a(chǎn)pi/user’)是進(jìn)行的什么操作锭弊？axios.put(‘a(chǎn)pi/user/8′)呢？

答：跨域盛嘿，添加用戶操作娜饵，更新操作。

9小染、什么是RESTful API翘瓮？怎么使用?

答：是一個(gè)api的標(biāo)準(zhǔn)，無(wú)狀態(tài)請(qǐng)求裤翩。請(qǐng)求的路由地址是固定的资盅，如果是tp5則先路由配置中把資源路由配置好。標(biāo)準(zhǔn)有：.post .put .delete

10踊赠、vuex是什么呵扛？怎么使用？哪種功能場(chǎng)景使用它筐带？

答：vue框架中狀態(tài)管理今穿。在main.js引入store，注入伦籍。新建了一個(gè)目錄store蓝晒，….. export 腮出。場(chǎng)景有：?jiǎn)雾?yè)應(yīng)用中，組件之間的狀態(tài)芝薇。音樂(lè)播放胚嘲、登錄狀態(tài)、加入購(gòu)物車

11洛二、mvvm框架是什么馋劈？它和其它框架（jquery）的區(qū)別是什么？哪些場(chǎng)景適合晾嘶？

答：一個(gè)model+view+viewModel框架妓雾，數(shù)據(jù)模型model，viewModel連接兩個(gè)

區(qū)別：vue數(shù)據(jù)驅(qū)動(dòng)垒迂，通過(guò)數(shù)據(jù)來(lái)顯示視圖層而不是節(jié)點(diǎn)操作君珠。

場(chǎng)景：數(shù)據(jù)操作比較多的場(chǎng)景，更加便捷

12娇斑、自定義指令（v-check策添、v-focus）的方法有哪些？它有哪些鉤子函數(shù)毫缆？還有哪些鉤子函數(shù)參數(shù)唯竹？

答：全局定義指令：在vue對(duì)象的directive方法里面有兩個(gè)參數(shù)，一個(gè)是指令名稱苦丁，另外一個(gè)是函數(shù)浸颓。組件內(nèi)定義指令：directives

鉤子函數(shù)：bind（綁定事件觸發(fā)）、inserted(節(jié)點(diǎn)插入的時(shí)候觸發(fā))旺拉、update（組件內(nèi)相關(guān)更新）

鉤子函數(shù)參數(shù)：el产上、binding

13、說(shuō)出至少4種vue當(dāng)中的指令和它的用法蛾狗？

答：v-if：判斷是否隱藏晋涣；v-for：數(shù)據(jù)循環(huán)出來(lái)；v-bind:class：綁定一個(gè)屬性沉桌；v-model：實(shí)現(xiàn)雙向綁定

14谢鹊、vue-router是什么？它有哪些組件留凭？

答：vue用來(lái)寫(xiě)路由一個(gè)插件佃扼。router-link、router-view

15蔼夜、導(dǎo)航鉤子有哪些兼耀？它們有哪些參數(shù)？

答：導(dǎo)航鉤子有：a/全局鉤子和組件內(nèi)獨(dú)享的鉤子。b/beforeRouteEnter瘤运、afterEnter窍霞、beforeRouterUpdate、beforeRouteLeave

參數(shù)：有to（去的那個(gè)路由）尽超、from（離開(kāi)的路由）、next（一定要用這個(gè)函數(shù)才能去到下一個(gè)路由梧躺，如果不用就攔截）最常用就這幾種

16似谁、Vue的雙向數(shù)據(jù)綁定原理是什么？

答：vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式掠哥，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter巩踏，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者续搀，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)塞琼。

具體步驟：

第一步：需要observe的數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷，包括子屬性對(duì)象的屬性禁舷，都加上setter和getter

這樣的話彪杉，給這個(gè)對(duì)象的某個(gè)值賦值，就會(huì)觸發(fā)setter牵咙，那么就能監(jiān)聽(tīng)到了數(shù)據(jù)變化

第二步：compile解析模板指令派近，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁(yè)面視圖洁桌，并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)渴丸，添加監(jiān)聽(tīng)數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動(dòng)另凌，收到通知谱轨，更新視圖

第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:

1吠谢、在自身實(shí)例化時(shí)往屬性訂閱器(dep)里面添加自己

2土童、自身必須有一個(gè)update()方法

3、待屬性變動(dòng)dep.notice()通知時(shí)工坊，能調(diào)用自身的update()方法娜扇，并觸發(fā)Compile中綁定的回調(diào)，則功成身退栅组。

第四步：MVVM作為數(shù)據(jù)綁定的入口雀瓢，整合Observer、Compile和Watcher三者玉掸，通過(guò)Observer來(lái)監(jiān)聽(tīng)自己的model數(shù)據(jù)變化刃麸，通過(guò)Compile來(lái)解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁司浪，達(dá)到數(shù)據(jù)變化 -> 視圖更新泊业；視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果把沼。

ps：16題答案同樣適合”vue data是怎么實(shí)現(xiàn)的？”此面試題吁伺。

17饮睬、請(qǐng)?jiān)敿?xì)說(shuō)下你對(duì)vue生命周期的理解？

答：總共分為8個(gè)階段創(chuàng)建前/后篮奄，載入前/后捆愁，更新前/后，銷毀前/后窟却。

創(chuàng)建前/后：在beforeCreated階段昼丑，vue實(shí)例的掛載元素$el和數(shù)據(jù)對(duì)象data都為undefined，還未初始化夸赫。在created階段菩帝，vue實(shí)例的數(shù)據(jù)對(duì)象data有了，$el還沒(méi)有茬腿。

載入前/后：在beforeMount階段呼奢，vue實(shí)例的$el和data都初始化了，但還是掛載之前為虛擬的dom節(jié)點(diǎn)切平，data.message還未替換控妻。在mounted階段，vue實(shí)例掛載完成揭绑，data.message成功渲染弓候。

更新前/后：當(dāng)data變化時(shí)，會(huì)觸發(fā)beforeUpdate和updated方法他匪。

銷毀前/后：在執(zhí)行destroy方法后菇存，對(duì)data的改變不會(huì)再觸發(fā)周期函數(shù)，說(shuō)明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽(tīng)以及和dom的綁定邦蜜，但是dom結(jié)構(gòu)依然存在

18依鸥、請(qǐng)說(shuō)下封裝?vue?組件的過(guò)程？

答：首先悼沈，組件可以提升整個(gè)項(xiàng)目的開(kāi)發(fā)效率贱迟。能夠把頁(yè)面抽象成多個(gè)相對(duì)獨(dú)立的模塊，解決了我們傳統(tǒng)項(xiàng)目開(kāi)發(fā)：效率低絮供、難維護(hù)衣吠、復(fù)用性等問(wèn)題。

然后壤靶，使用Vue.extend方法創(chuàng)建一個(gè)組件缚俏，然后使用Vue.component方法注冊(cè)組件。子組件需要數(shù)據(jù)，可以在props中接受定義忧换。而子組件修改好數(shù)據(jù)后恬惯，想把數(shù)據(jù)傳遞給父組件⊙遣纾可以采用emit方法酪耳。

19、你是怎么認(rèn)識(shí)vuex的刹缝？

答：vuex可以理解為一種開(kāi)發(fā)模式或框架碗暗。比如PHP有thinkphp，java有spring等赞草。

通過(guò)狀態(tài)（數(shù)據(jù)源）集中管理驅(qū)動(dòng)組件的變化（好比spring的IOC容器對(duì)bean進(jìn)行集中管理）讹堤。

應(yīng)用級(jí)的狀態(tài)集中放在store中吆鹤； 改變狀態(tài)的方式是提交mutations厨疙，這是個(gè)同步的事物； 異步邏輯應(yīng)該封裝在action中疑务。

20、vue-loader是什么知允？使用它的用途有哪些保屯？

答：解析.vue文件的一個(gè)加載器，跟template/js/style轉(zhuǎn)換成js模塊切蟋。

用途：js可以寫(xiě)es6柄粹、style樣式可以scss或less、template可以加jade等

21旺入、請(qǐng)說(shuō)出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法茵瘾？

答：assets文件夾是放靜態(tài)資源圣絮；components是放組件；router是定義路由相關(guān)的配置;view視圖棒搜；app.vue是一個(gè)應(yīng)用主組件；main.js是入口文件

22克蚂、vue.cli中怎樣使用自定義的組件？有遇到過(guò)哪些問(wèn)題嗎赤屋？

答：第一步：在components目錄新建你的組件文件（smithButton.vue），script一定要export default {

第二步：在需要用的頁(yè)面（組件）中導(dǎo)入：import smithButton from ‘../components/smithButton.vue’

第三步：注入到vue的子組件的components屬性上面,components:{smithButton}

第四步：在template視圖view中使用，?

問(wèn)題有：smithButton命名令哟，使用的時(shí)候則smith-button。

23狠半、聊聊你對(duì)Vue.js的template編譯的理解已维？

答：簡(jiǎn)而言之，就是先轉(zhuǎn)化成AST樹(shù)堂鲜，再得到的render函數(shù)返回VNode（Vue的虛擬DOM節(jié)點(diǎn)）

詳情步驟：

首先缔莲，通過(guò)compile編譯器把template編譯成AST語(yǔ)法樹(shù)（abstract syntax tree 即

源代碼的抽象語(yǔ)法結(jié)構(gòu)的樹(shù)狀表現(xiàn)形式），compile是createCompiler的返回值松靡，createCompiler是用以創(chuàng)建編譯器的雕欺。另外compile還負(fù)責(zé)合并option啦逆。

然后，AST會(huì)經(jīng)過(guò)generate（將AST語(yǔ)法樹(shù)轉(zhuǎn)化成render funtion字符串的過(guò)程）得到render函數(shù)，render的返回值是VNode瘦材，VNode是Vue的虛擬DOM節(jié)點(diǎn)朗和，里面有（標(biāo)簽名、子節(jié)點(diǎn)、文本等等）

VUE面試題

v-show 與 v-if 區(qū)別

動(dòng)態(tài)綁定class的方法

計(jì)算屬性和 watch 的區(qū)別

怎樣理解單向數(shù)據(jù)流

keep-alive

自定義組件的語(yǔ)法糖 v-model 是怎樣實(shí)現(xiàn)的

生命周期

組件通信

路由跳轉(zhuǎn)

vue-router 有哪幾種導(dǎo)航鉤子

Vue.js 2.x 雙向綁定原理

什么是 MVVM，與 MVC 有什么區(qū)別

vuex

this.$nextTick()

vue的原理

理解Vue中的Render渲染函數(shù)

slot插槽

v-show 與 v-if 區(qū)別

v-hsow和v-if的區(qū)別：

v-show是css切換，v-if是完整的銷毀和重新創(chuàng)建痪枫。

使用

頻繁切換時(shí)用v-show，運(yùn)行時(shí)較少改變時(shí)用v-if

v-if=‘false’ v-if是條件渲染，當(dāng)false的時(shí)候不會(huì)渲染

綁定 class 的數(shù)組用法

對(duì)象方法v-bind:class="{'orange': isRipe, 'green': isNotRipe}"

數(shù)組方法v-bind:class="[class1, class2]"

行內(nèi)v-bind:style="{color: color, fontSize: fontSize+'px' }"

計(jì)算屬性和 watch 的區(qū)別

計(jì)算屬性是自動(dòng)監(jiān)聽(tīng)依賴值的變化，從而動(dòng)態(tài)返回內(nèi)容，監(jiān)聽(tīng)是一個(gè)過(guò)程臀脏，在監(jiān)聽(tīng)的值變化時(shí)凡纳，可以觸發(fā)一個(gè)回調(diào)巷怜，并做一些事情。

所以區(qū)別來(lái)源于用法侥涵，只是需要?jiǎng)討B(tài)值磨总，那就用計(jì)算屬性娶牌；需要知道值的改變后執(zhí)行業(yè)務(wù)邏輯鲁驶，才用 watch葛作，用反或混用雖然可行，但都是不正確的用法玖院。

說(shuō)出一下區(qū)別會(huì)加分

computed 是一個(gè)對(duì)象時(shí)郊酒，它有哪些選項(xiàng)？

computed 和 methods 有什么區(qū)別？

computed 是否能依賴其它組件的數(shù)據(jù)谁不？

watch 是一個(gè)對(duì)象時(shí)，它有哪些選項(xiàng)？

有g(shù)et和set兩個(gè)選項(xiàng)

methods是一個(gè)方法，它可以接受參數(shù)爸邢，而computed不能，computed是可以緩存的待诅，methods不會(huì)轧钓。

computed可以依賴其他computed而柑，甚至是其他組件的data

watch 配置

handler

deep 是否深度

immeditate 是否立即執(zhí)行

總結(jié)

當(dāng)有一些數(shù)據(jù)需要隨著另外一些數(shù)據(jù)變化時(shí)，建議使用computed膝迎。

當(dāng)有一個(gè)通用的響應(yīng)數(shù)據(jù)變化的時(shí)候粥帚，要執(zhí)行一些業(yè)務(wù)邏輯或異步操作的時(shí)候建議使用watcher

事件修飾符

綁定一個(gè)原生的click事件， 加native限次，

其他事件修飾符

stop prevent? self

組合鍵

click.ctrl.exact 只有ctrl被按下的時(shí)候才觸發(fā)

組件中 data 為什么是函數(shù)

為什么組件中的 data 必須是一個(gè)函數(shù)芒涡，然后 return 一個(gè)對(duì)象，而 new Vue 實(shí)例里卖漫，data 可以直接是一個(gè)對(duì)象费尽？

因?yàn)榻M件是用來(lái)復(fù)用的，JS 里對(duì)象是引用關(guān)系羊始，這樣作用域沒(méi)有隔離旱幼，而 new Vue 的實(shí)例，是不會(huì)被復(fù)用的店枣，因此不存在引用對(duì)象的問(wèn)題速警。

keep-alive

https://cn.vuejs.org/v2/guide...

自定義組件的語(yǔ)法糖 v-model 是怎樣實(shí)現(xiàn)的

https://www.cnblogs.com/attac...

根據(jù)官方文檔介紹，v-model本質(zhì)上就是語(yǔ)法糖鸯两，即利用v-model綁定數(shù)據(jù)后，其實(shí)就是既綁定了數(shù)據(jù)长豁，又添加了一個(gè)input事件監(jiān)聽(tīng)钧唐，如下：

怎樣理解單向數(shù)據(jù)流

這個(gè)概念出現(xiàn)在組件通信。父組件是通過(guò) prop 把數(shù)據(jù)傳遞到子組件的匠襟，但是這個(gè) prop 只能由父組件修改钝侠，子組件不能修改该园，否則會(huì)報(bào)錯(cuò)。子組件想修改時(shí)帅韧，只能通過(guò) $emit 派發(fā)一個(gè)自定義事件里初，父組件接收到后，由父組件修改忽舟。

一般來(lái)說(shuō)双妨，對(duì)于子組件想要更改父組件狀態(tài)的場(chǎng)景，可以有兩種方案：

在子組件的 data 中拷貝一份 prop叮阅，data 是可以修改的刁品，但 prop 不能：

exportdefault{props: {value:String},? data () {return{currentValue:this.value? ? }? }}

如果是對(duì) prop 值的轉(zhuǎn)換，可以使用計(jì)算屬性：

exportdefault{props: ['size'],? computed: {? ? normalizedSize: function () {? ? ? return this.size.trim().toLowerCase();? ? }? }}

生命周期

創(chuàng)建前后 beforeCreate/created

在beforeCreate 階段浩姥，vue實(shí)例的掛載元素el和數(shù)據(jù)對(duì)象data都為undefined挑随，還未初始化。在created階段勒叠，vue實(shí)例的數(shù)據(jù)對(duì)象有了兜挨，el還沒(méi)有。

載入前后 beforeMount/mounted

在beforeMount階段眯分，vue實(shí)例的$el和data都初始化了暑劝，但還是掛載之前未虛擬的DOM節(jié)點(diǎn)，data尚未替換颗搂。

在mounted階段担猛，vue實(shí)例掛載完成，data成功渲染丢氢。

更新前后 beforeUpdate/updated

當(dāng)data變化時(shí)傅联，會(huì)觸發(fā)beforeUpdate和updated方法。這兩個(gè)不常用疚察，不推薦使用蒸走。

銷毀前后beforeDestory/destoryed

beforeDestory是在vue實(shí)例銷毀前觸發(fā)，一般在這里要通過(guò)removeEventListener解除手動(dòng)綁定的事件貌嫡。實(shí)例銷毀后比驻，觸發(fā)的destroyed。

組件間的通信

父子 props/event? $parent/$children? ? ref? provide/inject

兄弟? bus vuex

跨級(jí) bus? vuex provide.inject

路由的跳轉(zhuǎn)方式

一般有兩種

<router-link to='home'> router-link標(biāo)簽會(huì)渲染為<a>標(biāo)簽岛抄，咋填template中的跳轉(zhuǎn)都是這種别惦；

另一種是編程是導(dǎo)航? 也就是通過(guò)js跳轉(zhuǎn)? 比如router.push('/home')

Vue.js 2.x 雙向綁定原理

這個(gè)問(wèn)題幾乎是面試必問(wèn)的，回答也是有深有淺夫椭〉УВ基本上要知道核心的 API 是通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的 setter / getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)扰付，這也是為什么 Vue.js 2.x 不支持 IE8 的原因（IE 8 不支持此 API堤撵，且無(wú)法通過(guò) polyfill 實(shí)現(xiàn)）。

https://cn.vuejs.org/v2/guide...

什么是 MVVM羽莺，與 MVC 有什么區(qū)別

http://www.ruanyifeng.com/blo...

nextTick()

在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)实昨。在修改數(shù)據(jù)之后，立即使用這個(gè)回調(diào)函數(shù)盐固，獲取更新后的 DOM荒给。

// 修改數(shù)據(jù)vm.msg ='Hello'// DOM 還未更新Vue.nextTick(function(){// DOM 更新})

vue的原理

https://segmentfault.com/a/11...

Vue的模式是m-v-vm模式，即（model-view-modelView）闰挡，通過(guò)modelView作為中間層（即vm的實(shí)例）锐墙，進(jìn)行雙向數(shù)據(jù)的綁定與變化。

通過(guò)建立虛擬dom樹(shù)document.createDocumentFragment(),方法創(chuàng)建虛擬dom樹(shù)长酗。

一旦被監(jiān)測(cè)的數(shù)據(jù)改變溪北，會(huì)通過(guò)Object.defineProperty定義的數(shù)據(jù)攔截，截取到數(shù)據(jù)的變化夺脾。

截取到的數(shù)據(jù)變化之拨，從而通過(guò)訂閱——發(fā)布者模式，觸發(fā)Watcher（觀察者）,從而改變虛擬dom的中的具體數(shù)據(jù)咧叭。

最后蚀乔，通過(guò)更新虛擬dom的元素值，從而改變最后渲染dom樹(shù)的值菲茬，完成雙向綁定

雙向綁定的實(shí)現(xiàn)

object.defineProperty 方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性吉挣，或者修改一個(gè)對(duì)象的現(xiàn)有屬性， 并返回這個(gè)對(duì)象婉弹。語(yǔ)法：Object.defineProperty(obj, prop, descriptor)varobj = {};Object.defineProperty(obj,'hello',{get:function(){//我們?cè)谶@里攔截到了數(shù)據(jù)console.log("get方法被調(diào)用");? },set:function(newValue){//改變數(shù)據(jù)的值睬魂，攔截下來(lái)額console.log("set方法被調(diào)用");? }});obj.hello//輸出為“get方法被調(diào)用”，輸出了值镀赌。obj.hello ='new Hello';//輸出為set方法被調(diào)用氯哮，修改了新值

我們可以做到數(shù)據(jù)的雙向綁定：

varobj = {};Object.defineProperty(obj,'hello',{get:function(){//我們?cè)谶@里攔截到了數(shù)據(jù)console.log("get方法被調(diào)用");? },set:function(newValue){//改變數(shù)據(jù)的值，攔截下來(lái)額console.log("set方法被調(diào)用");document.getElementById('test').value = newValue;document.getElementById('test1').innerHTML = newValue;? }});//obj.hello;//obj.hello = '123';document.getElementById('test').addEventListener('input',function(e){? obj.hello = e.target.value;//觸發(fā)它的set方法})

理解Vue中的Render渲染函數(shù)

https://www.cnblogs.com/tugen...

VUE一般使用template來(lái)創(chuàng)建HTML商佛，然后在有的時(shí)候喉钢，我們需要使用javascript來(lái)創(chuàng)建html，這時(shí)候我們需要使用render函數(shù)良姆。

render函數(shù)return一個(gè)createElement組件中的子元素存儲(chǔ)在組件實(shí)列中$slots.default中。

return createElement('h1', this.title);createElement返回的是包含的信息會(huì)告訴VUE頁(yè)面上需要渲染什么樣的節(jié)點(diǎn)及其子節(jié)點(diǎn)歇盼。我們稱這樣的節(jié)點(diǎn)為虛擬DOM舔痕，可以簡(jiǎn)寫(xiě)為VNode。

createElement 參數(shù)

{String|Object|Function}

一個(gè)HTML標(biāo)簽字符串豹缀，組件選項(xiàng)對(duì)象伯复，或者一個(gè)返回值類型為String/Object的函數(shù)。該參數(shù)是? 必須的

子節(jié)點(diǎn)

子節(jié)點(diǎn)邢笙，可選啸如，String 或 Array

Vue.component('anchored-heading', {render:function(createElement){returncreateElement('h'+this.level,// 標(biāo)簽名稱this.$slots.default// 由子節(jié)點(diǎn)構(gòu)成的數(shù)組)? },props: {level: {type:Number,required:true}? }})

slot插槽

http://www.reibang.com/p/316...

https://vue.docschina.org/v2/...

單個(gè)插槽

當(dāng)子組件模板只有一個(gè)沒(méi)有屬性的插槽時(shí)，父組件傳入的整個(gè)內(nèi)容片段將插入到插槽所在的 DOM 位置氮惯，并替換掉插槽標(biāo)簽本身叮雳。

最初在 <slot> 標(biāo)簽中的任何內(nèi)容都被視為備用內(nèi)容。備用內(nèi)容在子組件的作用域內(nèi)編譯妇汗，并且只有在宿主元素為空帘不，且沒(méi)有要插入的內(nèi)容時(shí)才顯示備用內(nèi)容。

命名插槽

solt元素可以用一個(gè)特殊的特性name來(lái)進(jìn)一步配置如何分發(fā)內(nèi)容杨箭。多個(gè)插槽可以有不同的名字寞焙。

這樣可以將父組件模板中 slot 位置，和子組件 slot 元素產(chǎn)生關(guān)聯(lián)互婿，便于插槽內(nèi)容對(duì)應(yīng)傳遞

作用域插槽scoped slots

可以訪問(wèn)組件內(nèi)部數(shù)據(jù)的可復(fù)用插槽(reusable slot)

在父級(jí)中捣郊，具有特殊特性slot-scope的<template>元素必須存在，表示它是作用域插槽的模板慈参。slot-scope 的值將被用作一個(gè)臨時(shí)變量名呛牲，此變量接收從子組件傳遞過(guò)來(lái)的 prop 對(duì)象。