1. js中的閉包是什么？

2. v-if和v-show之間的區(qū)別？

3. v-for中key值的作用？

4. vue中插槽的作用？

5. js的執(zhí)行機(jī)制

詳解：

1. js中的閉包是什么？

閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)。

2.v-if和v-show之間的區(qū)別？

相同點(diǎn)：v-if與v-show都可以動(dòng)態(tài)控制dom元素顯示隱藏

實(shí)現(xiàn)本質(zhì)方法區(qū)別：

• vue-show本質(zhì)就是標(biāo)簽display:none;，控制隱藏

• vue-if是動(dòng)態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素

編譯的區(qū)別

• v-show其實(shí)就是在控制css

• v-if切換有一個(gè)局部編譯/卸載的過程，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件

編譯的條件

• v-show都會(huì)編譯，初始值為false，只是將display設(shè)為none，但它也編譯了

• v-if初始值為false，就不會(huì)編譯了

性能

• v-show只編譯一次，后面其實(shí)就是控制css，而v-if不停的銷毀和創(chuàng)建，故v-show性能更好一點(diǎn)。

3.v-for中key值的作用？

? ? ? ?key的作用主要是為了高效的更新虛擬DOM。另外vue中在使用相同標(biāo)簽名元素的過渡切換時(shí)，也會(huì)使用到key屬性，其目的也是為了讓vue可以區(qū)分它們，否則vue只會(huì)替換其內(nèi)部屬性而不會(huì)觸發(fā)過渡效果。

? ? ? ? 在用v-for更新已渲染的元素列表的時(shí)候，會(huì)使用就地復(fù)用的策略；這就是說列表數(shù)據(jù)修改的時(shí)候，他會(huì)根據(jù)key值去判斷某個(gè)值是否修改，如果修改了就重新渲染，不然就復(fù)用之前的元素。

4.vue中插槽的作用？

? ? ? ? 插槽就是Vue實(shí)現(xiàn)的一套內(nèi)容分發(fā)的API，將<slot></slot>元素作為承載分發(fā)內(nèi)容的出口，沒有插槽的情況下在組件標(biāo)簽內(nèi)些一些內(nèi)容是不起任何作用的。

? ? ? ? 插槽內(nèi)可以是任意內(nèi)容。在<child-component>你好</child-component>內(nèi)放置一些內(nèi)容如上，輸出內(nèi)容還是在組件中的內(nèi)容，直接在父組件的<child-component>標(biāo)簽中定義的內(nèi)容不會(huì)被渲染。在子組件template中加入<slot>元素占位，便能渲染父組件<child-component>標(biāo)簽下的內(nèi)容。

? ? 具名插槽，當(dāng)需要多個(gè)插槽時(shí)，可以使用<slot>的特性：name。這個(gè)特性可以用來定義額外的插槽。

<div id="root">
? ? ? ?<child>
? ? ? ? ? ?<header slot="header">header</header>
? ? ? ? ? ?<footer slot="footer">footer</footer>
? ? ? ?</child>
? ?</div> ? ? ??

????Vue.component('child',{
? ? ? ? ? ?template:`<div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?????????<slot name="header">default header</slot>
? ? ? ? ? ? ? ? ? ? ? ? ? ?????????<div>content</div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?????????<slot name="footer">default footer</slot>
? ? ? ? ? ? ? ? ? ? ? ?????</div>`
? ? ? ? ? ?}
? ? ? ?)
? ? ? ?var vm=new Vue({
? ? ? ? ? ?el:'#root'
? ? ? ?})
//輸出結(jié)果是 ：

header ??

content ??

footer

? ? ? ? 插槽默認(rèn)內(nèi)容 ，插槽可以提供一個(gè)默認(rèn)內(nèi)容，如果如果父組件沒有為這個(gè)插槽提供了內(nèi)容，會(huì)顯示默認(rèn)的內(nèi)容。如果父組件為這個(gè)插槽提供了內(nèi)容，則默認(rèn)的內(nèi)容會(huì)被替換掉。

? ? ? ? 作用域插槽，作用域插槽就是父組件在調(diào)用子組件的時(shí)候給子組件傳了一個(gè)插槽，這個(gè)插槽為作用域插槽，該插槽必須放在template標(biāo)簽里面，同時(shí)聲明從子組件接收的數(shù)據(jù)放在一個(gè)自定義屬性內(nèi)，并定義該數(shù)據(jù)的渲染方式。（解決的問題：調(diào)用了兩次child組件，因?yàn)檎{(diào)用的是同一個(gè)子組件，所以顯示的內(nèi)容完全一樣。如何在每次調(diào)用時(shí)能有各自的渲染效果？）

<div id="root">
? ? ? ?<child>
? ? ? ? ? ? ? <template slot-scope="props"><!--該插槽必須放在template標(biāo)簽內(nèi)-->
? ? ? ? ? ? ? ? ? ? <li> {{ props.value }} </li> <!--定義渲染方式-->
? ? ? ? ? ? ? </template>
? ? ? ?</child>
? ? ? ?<child>
? ? ? ? ? ? ?<template slot-scope="props">
? ? ? ? ? ? ? ? ? ? ?<h1> {{ props.value }} </h1><!--定義渲染方式-->
? ? ? ? ? ? ? </template>
? ? ? ?</child>
? ?</div>

Vue.component('child',{
? ? ? ? ? ?data: function () {
? ? ? ? ? ? ? ?????return {
? ? ? ? ? ? ? ? ? ?????????list:[1,2,3,4]
? ? ? ? ? ? ? ?????}
? ? ? ? ? ?},
? ? ? ? ? ?template: `<div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?????????<ul>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????????<slot v-for="value in list" :value=value>//使用slot占位
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????????</slot>
? ? ? ? ? ? ? ? ? ? ? ? ? ?????????</ul>
? ? ? ? ? ? ? ? ? ? ? ?????</div>`
? ? ? ?})
? ? ? ?var vm=new Vue({
? ? ? ? ? ?el: '#root'
? ? ? ?})

5.js的執(zhí)行機(jī)制：Event loop

• 同步和異步任務(wù)分別進(jìn)入不同的執(zhí)行"場所"，同步的進(jìn)入主線程，異步的進(jìn)入Event Table并注冊(cè)函數(shù)。

• 當(dāng)指定的事情完成時(shí)，Event Table會(huì)將這個(gè)函數(shù)移入Event Queue。

• 主線程內(nèi)的任務(wù)執(zhí)行完畢為空，會(huì)去Event Queue讀取對(duì)應(yīng)的函數(shù)，進(jìn)入主線程執(zhí)行。

• 上述過程會(huì)不斷重復(fù)，也就是常說的Event Loop(事件循環(huán))。

? ? setTimeout這個(gè)函數(shù)，是經(jīng)過指定時(shí)間后，把要執(zhí)行的任務(wù)加入到Event Queue中，又因?yàn)槭菃尉€程任務(wù)要一個(gè)一個(gè)執(zhí)行，如果前面的任務(wù)需要的時(shí)間太久，那么只能等著，導(dǎo)致真正的延遲時(shí)間遠(yuǎn)遠(yuǎn)大于設(shè)置的時(shí)間長度。

? ? setInterval會(huì)每隔指定的時(shí)間將注冊(cè)的函數(shù)置入Event Queue，如果前面的任務(wù)耗時(shí)太久，那么同樣需要等待。唯一需要注意的一點(diǎn)是，對(duì)于setInterval(fn,ms)來說，我們已經(jīng)知道不是每過ms秒會(huì)執(zhí)行一次fn，而是每過ms秒，會(huì)有fn進(jìn)入Event Queue。一旦setInterval的回調(diào)函數(shù)fn執(zhí)行時(shí)間超過了延遲時(shí)間ms，那么就完全看不出來有時(shí)間間隔了。

除了廣義的同步任務(wù)和異步任務(wù)，我們對(duì)任務(wù)有更精細(xì)的定義：

• macro-task(宏任務(wù))：包括整體代碼script，setTimeout，setInterval

• micro-task(微任務(wù))：Promise，process.nextTick

? ? ? ? 不同類型的任務(wù)會(huì)進(jìn)入對(duì)應(yīng)的Event Queue，比如setTimeout和setInterval會(huì)進(jìn)入相同的Event Queue。

? ? ? ? 進(jìn)入整體代碼(宏任務(wù))后，開始第一次循環(huán)。接著執(zhí)行所有的微任務(wù)。然后再次從宏任務(wù)開始，找到其中一個(gè)任務(wù)隊(duì)列執(zhí)行完畢，再執(zhí)行所有的微任務(wù)。