1.什么是vue的生命周期？

Vue實(shí)例從創(chuàng)建到銷(xiāo)毀的過(guò)程猴贰，就是生命周期对雪。也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)米绕、編譯模板瑟捣、掛載DOM->渲染、更新->渲染栅干、卸載等一系列過(guò)程迈套，我們稱(chēng)這是Vue的生命周期。

2.vue生命周期的作用是什么碱鳞？

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

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

它可以總共分為8個(gè)階段：創(chuàng)建前/后,載入前/后贵白，更新前/后率拒，銷(xiāo)毀前/銷(xiāo)毀后

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

第一次頁(yè)面加載時(shí)會(huì)觸發(fā)beforeCreate,created,beforeMount,mounted

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

DOM渲染在mounted中就已經(jīng)完成了

6.生命周期鉤子的一些使用方法：

1.beforecreate:可以在加個(gè)loading事件猬膨，在加載實(shí)例是觸發(fā)

2.created:初始化完成時(shí)的事件寫(xiě)在這里，如在這結(jié)束loading事件呛伴，異步請(qǐng)求也適宜在這里調(diào)用

3.mounted:掛載元素勃痴，獲取到dom節(jié)點(diǎn)

4.updated:如果對(duì)數(shù)據(jù)統(tǒng)一處理，在這里寫(xiě)上相應(yīng)函數(shù)

5.beforeDestroy:可以一個(gè)確認(rèn)停止事件的確認(rèn)框

6.nextTick:更新數(shù)據(jù)后立即操作dom

7.v-show與v-if的區(qū)別

v-show是css切換热康，v-if是完整的銷(xiāo)毀和重新創(chuàng)建

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

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

使用v-if的時(shí)候，如果值為false姐军，那么頁(yè)面將不會(huì)有這個(gè)html標(biāo)簽生成

v-show則是不管值是為true還是false污它，html元素都會(huì)存在，只是css中的display顯示或隱藏

v-show 僅僅控制元素的顯示方式庶弃，將 display 屬性在 block 和 none 來(lái)回切換；而v-if會(huì)控制這個(gè) DOM 節(jié)點(diǎn)的存在與否德澈。當(dāng)我們需要經(jīng)常切換某個(gè)元素的顯示/隱藏時(shí)歇攻，使用v-show會(huì)更加節(jié)省性能上的開(kāi)銷(xiāo)；當(dāng)只需要一次顯示或隱藏時(shí)梆造，使用v-if更加合理缴守。

8.開(kāi)發(fā)中常用的指令有哪些?

v-model:一般用在表達(dá)輸入，很輕松的實(shí)現(xiàn)表單控件和數(shù)據(jù)的雙向綁定

v-html：更新元素的innerHTML

v-show與v-if：條件渲染镇辉，注意二者區(qū)別

v-on:click:可以簡(jiǎn)寫(xiě)為@click,@綁定一個(gè)事件屡穗。如果事件觸發(fā)了，就可以指定事件的處理函數(shù)

v-for：基于源數(shù)據(jù)多次渲染元素或模板

v-bind:當(dāng)表達(dá)式的值改變時(shí)忽肛，將其產(chǎn)生的連帶影響村砂，響應(yīng)式地作用于DOM語(yǔ)法

v-bind:title=”msg”簡(jiǎn)寫(xiě)：title="msg"

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

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

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

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

10.路由跳轉(zhuǎn)方式

1.router-link標(biāo)簽會(huì)渲染為標(biāo)簽，咋填template中的跳轉(zhuǎn)都是這種屹逛；

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

12.computed和watch有什么區(qū)別

computed

computed是計(jì)算屬性，也就是計(jì)算值罕模，它更多用于計(jì)算值的場(chǎng)景

computed具有緩存性评腺，computed的值在getter執(zhí)行后是會(huì)緩存的，只有在它依賴(lài)的屬性值改變之后淑掌，下一次獲取computed的值時(shí)重新調(diào)用對(duì)應(yīng)的getter來(lái)計(jì)算

computed適用于計(jì)算比較消耗性能的計(jì)算場(chǎng)景

watch

watch更多的是[觀察]的作用蒿讥，類(lèi)似于某些數(shù)據(jù)的監(jiān)聽(tīng)回調(diào)，用于觀察props $emit或者本組件的值，當(dāng)數(shù)據(jù)變化時(shí)來(lái)執(zhí)行回調(diào)進(jìn)行后續(xù)操作

無(wú)緩存性芋绸，頁(yè)面重新渲染時(shí)值不變化也會(huì)執(zhí)行

小結(jié)

當(dāng)我們要進(jìn)行數(shù)值計(jì)算媒殉，而且依賴(lài)于其他數(shù)據(jù)，那么把這個(gè)數(shù)據(jù)設(shè)計(jì)為computed

如果你需要在某個(gè)數(shù)據(jù)變化時(shí)做一些事情侥钳，使用watch來(lái)觀察這個(gè)數(shù)據(jù)變化适袜。

13.vue組件的scoped屬性的作用

在style標(biāo)簽上添加scoped屬性，以表示它的樣式作用于當(dāng)下的模塊舷夺，很好的實(shí)現(xiàn)了樣式私有化的目的苦酱；

但是也得慎用：樣式不易（可）修改，而很多時(shí)候给猾，我們是需要對(duì)公共組件的樣式做微調(diào)的疫萤；

解決辦法：

①：使用混合型的css樣式：（混合使用全局跟本地的樣式） /* 全局樣式 */ /* 本地樣式 */

②：深度作用選擇器（>>>）如果你希望 scoped 樣式中的一個(gè)選擇器能夠作用得“更深”，例如影響子組件敢伸，你可以使用 >>> 操作符： .a >>> .b { /* ... */ }

14.vue是漸進(jìn)式的框架的理解：(主張最少,沒(méi)有多做職責(zé)之外的事)

Vue的核心的功能扯饶，是一個(gè)視圖模板引擎，但這不是說(shuō)Vue就不能成為一個(gè)框架池颈。如下圖所示尾序，這里包含了Vue的所有部件，在聲明式渲染（視圖模板引擎）的基礎(chǔ)上躯砰，我們可以通過(guò)添加組件系統(tǒng)每币、客戶(hù)端路由、大規(guī)模狀態(tài)管理來(lái)構(gòu)建一個(gè)完整的框架琢歇。更重要的是兰怠，這些功能相互獨(dú)立，你可以在核心功能的基礎(chǔ)上任意選用其他的部件李茫，不一定要全部整合在一起揭保。可以看到魄宏，所說(shuō)的“漸進(jìn)式”秸侣，其實(shí)就是Vue的使用方式，同時(shí)也體現(xiàn)了Vue的設(shè)計(jì)的理念

在我看來(lái)宠互，漸進(jìn)式代表的含義是：主張最少塔次。視圖模板引擎

每個(gè)框架都不可避免會(huì)有自己的一些特點(diǎn)，從而會(huì)對(duì)使用者有一定的要求名秀，這些要求就是主張励负，主張有強(qiáng)有弱，它的強(qiáng)勢(shì)程度會(huì)影響在業(yè)務(wù)開(kāi)發(fā)中的使用方式匕得。

比如說(shuō)继榆，Angular巾表，它兩個(gè)版本都是強(qiáng)主張的，如果你用它略吨，必須接受以下東西：

必須使用它的模塊機(jī)制- 必須使用它的依賴(lài)注入- 必須使用它的特殊形式定義組件（這一點(diǎn)每個(gè)視圖框架都有集币，難以避免）

所以Angular是帶有比較強(qiáng)的排它性的，如果你的應(yīng)用不是從頭開(kāi)始翠忠，而是要不斷考慮是否跟其他東西集成鞠苟，這些主張會(huì)帶來(lái)一些困擾。

Vue可能有些方面是不如React秽之，不如Angular当娱，但它是漸進(jìn)的，沒(méi)有強(qiáng)主張考榨，你可以在原有大系統(tǒng)的上面跨细，把一兩個(gè)組件改用它實(shí)現(xiàn)，當(dāng)jQuery用河质；也可以整個(gè)用它全家桶開(kāi)發(fā)冀惭，當(dāng)Angular用；還可以用它的視圖掀鹅，搭配你自己設(shè)計(jì)的整個(gè)下層用散休。也可以函數(shù)式，都可以乐尊，它只是個(gè)輕量視圖而已戚丸，只做了自己該做的事，沒(méi)有做不該做的事科吭，僅此而已。

漸進(jìn)式的含義猴鲫，我的理解是：沒(méi)有多做職責(zé)之外的事对人。

15.vue.js的兩個(gè)核心是什么(數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)拂共。)

數(shù)據(jù)驅(qū)動(dòng):Object.defineProperty和存儲(chǔ)器屬性: getter和setter（所以只兼容IE9及以上版本）牺弄，可稱(chēng)為基于依賴(lài)收集的觀測(cè)機(jī)制,核心是VM，即ViewModel宜狐，保證數(shù)據(jù)和視圖的一致性势告。

16.vue常用修飾符

修飾符分為：一般修飾符，事件修身符抚恒，按鍵咱台、系統(tǒng)

①一般修飾符：

.lazy：v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 。你可以添加 lazy 修飾符俭驮，從而轉(zhuǎn)變?yōu)槭褂?change 事件進(jìn)行同步

<inputv-model.lazy="msg">

.number

.trim

1.如果要自動(dòng)過(guò)濾用戶(hù)輸入的首尾空白字符

② 事件修飾符

<av-on:click.stop="doThis"></a><!-- 阻止單擊事件繼續(xù)傳播 -->

<formv-on:submit.prevent="onSubmit"></form> <!-- 提交事件不再重載頁(yè)面 -->

<av-on:click.stop.prevent="doThat"></a> <!-- 修飾符可以串聯(lián) -->

<formv-on:submit.prevent></form> <!-- 只有修飾符 -->

<divv-on:click.capture="doThis">...</div> <!-- 添加事件監(jiān)聽(tīng)器時(shí)使用事件捕獲模式 -->?<!-- 即元素自身觸發(fā)的事件先在此處處理回溺，然后才交由內(nèi)部元素進(jìn)行處理 -->

<divv-on:click.self="doThat">...</div> <!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) --> <!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->

<av-on:click.once="doThis"></a> <!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 -->

③按鍵修飾符

全部的按鍵別名:

.enter.tab.delete(捕獲“刪除”和“退格”鍵).esc.space.up.down.left.right.ctrl.alt.shift.meta

或者

④系統(tǒng)修飾鍵 （可以用如下修飾符來(lái)實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器春贸。）

.ctrl.alt.shift.meta

或者Dosomething

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

vue組件中data值不能為對(duì)象，因?yàn)閷?duì)象是引用類(lèi)型遗遵，組件可能會(huì)被多個(gè)實(shí)例同時(shí)引用萍恕。

如果data值為對(duì)象，將導(dǎo)致多個(gè)實(shí)例共享一個(gè)對(duì)象车要，其中一個(gè)組件改變data屬性值允粤，其它實(shí)例也會(huì)受到影響。