一、什么是SPA，及他的優(yōu)缺點(diǎn)

SPA:single page application? 單頁(yè)面應(yīng)用? ? 僅在web頁(yè)面初始化時(shí)加載相應(yīng)的HTML、JavaScript和CSS。一旦加載完成，不會(huì)因?yàn)橛脩?hù)的操作而進(jìn)行頁(yè)面的重新加載或跳轉(zhuǎn)；取而代之的是路由機(jī)制實(shí)現(xiàn)內(nèi)容的變換、UI與用戶(hù)的交互，避免頁(yè)面的重新加載。

優(yōu)點(diǎn)：【1】體驗(yàn)好、快? ? 【2】相對(duì)服務(wù)器壓力小? ? ? ?【3】前后端職責(zé)分離

缺點(diǎn)：【1】首屏首次加載慢? ? ? ? 【2】不利于SEO(搜索引擎優(yōu)化)

二、new Vue() 發(fā)生了什么

創(chuàng)建vue實(shí)例，它內(nèi)部執(zhí)行了根實(shí)例的初始化過(guò)程

1.initMixin(Vue)????//實(shí)現(xiàn)init函數(shù)? ? [1].合并配置項(xiàng)，如路由，狀態(tài)管理，渲染函數(shù)等；[2].initLifecycle(vm)//初始化$parent,$root,$children,$refs；初始化生命周期? [3].initEvents(vm)//處理父組件傳遞的監(jiān)聽(tīng)器; 初始化事件? ?[4].initRender(vm)//slots,$scopedSlots,_c(),$createElement(); 初始化渲染? ?[5].callHook(vm, 'beforeCreate'); 調(diào)用生命周期鉤子函數(shù)? ?[6].initInjections(vm)//獲取注入數(shù)據(jù)，隔代傳值；初始化Injections? ? [7].initState(vm)//初始化props,data,methods,computed,watch;? ? ? [8].initProvide(vm)//提供注入數(shù)據(jù)? 初始化Provide? ? ? ?[8]//callHook(vm, 'created')? ? ?調(diào)用生命周期鉤子函數(shù)

初始化工作完成后，判斷用戶(hù)是否傳入el選項(xiàng)，如果傳入調(diào)用$mount函數(shù)進(jìn)入模板編譯與掛載階段；如果沒(méi)有傳入el選項(xiàng)，則不進(jìn)入下一個(gè)生命周期階段，需要用戶(hù)手動(dòng)執(zhí)行

總結(jié)：主要邏輯：合并配置，調(diào)用一些初始化函數(shù)，觸發(fā)生命周期鉤子函數(shù)，調(diào)用$mount開(kāi)啟下一個(gè)階段

三、Vue.use是干啥的，原理是啥

用來(lái)使用插件的，可以在插件中擴(kuò)展組件、指令、方法等

原理：

1.檢查是否已經(jīng)注冊(cè)，如果已經(jīng)注冊(cè)，則跳出

2.處理入?yún)?/p>

3.執(zhí)行注冊(cè)方法，調(diào)用定義好的install方法，傳入處理好的參數(shù)，如果沒(méi)有install方法并且插件本身為function則直接進(jìn)行注冊(cè)

四、請(qǐng)說(shuō)一下響應(yīng)式數(shù)據(jù)的理解

核心是觀察者模式。數(shù)據(jù)是被觀察的一方，發(fā)生改變時(shí)，通知所有的觀察者。

1.Object:通過(guò)Object.defineProperty方法來(lái)實(shí)現(xiàn)的

????【1】.data通過(guò)observe(Object.defineProperty方法)轉(zhuǎn)換成getter/setter的形式來(lái)追蹤變化

????【2】.當(dāng)外界通過(guò)watcher(觀察者)讀取數(shù)據(jù)時(shí)，觸發(fā)getter從而將watcher添加到依賴(lài)中

????【3】.當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，觸發(fā)setter，從而向Dep中的依賴(lài)（watcher）發(fā)送通知

????【4】.watcher接受到通知后，會(huì)向外界發(fā)送通知，從而觸發(fā)視圖更新等。

2.數(shù)組同上，不同點(diǎn)在于它沒(méi)有Object.defineProperty方法，它的setter方法是通過(guò)重寫(xiě)方法來(lái)實(shí)現(xiàn)的

注意：Proxy與Object.defineProperty 優(yōu)劣對(duì)比

Proxy優(yōu)點(diǎn)：1.可以直接監(jiān)聽(tīng)對(duì)象而非屬性（Object.defineProperty只能監(jiān)聽(tīng)屬性）? ? 2.可以直接監(jiān)聽(tīng)數(shù)組的變化（Object.defineProperty不能監(jiān)聽(tīng)數(shù)組變化）? ? 3.有多種攔截方法（Object.defineProperty不具備攔截方法）? ? 4.返回的是一個(gè)新的對(duì)象，我們可以直接操作這個(gè)新的對(duì)象（Object.defineProperty只能遍歷屬性修改）

Object.defineProperty優(yōu)點(diǎn)：兼容性好

五、虛擬DOM

1.簡(jiǎn)介：通過(guò)js描述的DOM結(jié)點(diǎn)，

2.why: 操作真實(shí)的DOM很耗性能

3.vue 通過(guò)vnode類(lèi)來(lái)實(shí)例化不同的dom結(jié)點(diǎn)。通過(guò)補(bǔ)繳差異化的結(jié)點(diǎn)來(lái)渲染，以節(jié)約性能

4.Dom-Diff算法 patch過(guò)程---》以新的VNode為基準(zhǔn)，改造舊的oldVNode使之成為跟新的VNode一樣，這就是patch過(guò)程要干的事

5.虛擬DOM過(guò)程就是render函數(shù)結(jié)果VNode到視圖顯示的過(guò)程

六、模板編譯

把用戶(hù)寫(xiě)的模板進(jìn)行編譯，就會(huì)產(chǎn)生VNode。模板編譯過(guò)程就是把用戶(hù)寫(xiě)的模板經(jīng)過(guò)一系列處理最終生成render函數(shù)的過(guò)程。

AST：抽象語(yǔ)法樹(shù)

實(shí)施流程：模板解析階段------>優(yōu)化階段------>代碼生成階段

模板解析階段:<template></template>標(biāo)簽內(nèi)的模板使用正則等方式解析成抽象語(yǔ)法樹(shù)(AST)????包括（1）parseHTML HTML解析器（2）parseText 文本解析（3）parseFilters 過(guò)濾器解析

優(yōu)化階段:(1)在AST中找到所有靜態(tài)結(jié)點(diǎn)并打上標(biāo)記????(2)在AST中找到所有靜態(tài)根結(jié)點(diǎn)并打上標(biāo)記

代碼生成階段：根據(jù)模板對(duì)應(yīng)的抽象語(yǔ)法樹(shù)AST生成一個(gè)函數(shù)，通過(guò)調(diào)用這個(gè)函數(shù)就可以得到模板對(duì)應(yīng)的虛擬DOM

七、Vue的生命周期方法有哪些？一般在哪一步發(fā)起請(qǐng)求及原因

初始化階段：為Vue實(shí)例上初始化一些屬性，事件以及相應(yīng)式數(shù)據(jù)? ? ? 包含的方法：? new Vue()? ? ?beforeCreate? ? create

模板編譯階段：將模板編譯成渲染函數(shù)

掛載極端：將實(shí)例掛載到指定的DOM上，及將模板渲染到真實(shí)的DOM上????包含的方法：beforeMount? ? mounted? ? beforeUpdate? ? update

銷(xiāo)毀階段：將實(shí)例自身從父組件中刪除，并消除依賴(lài)追蹤及事件監(jiān)聽(tīng)器????????包含的方法：beforeDestory? ? destoryed

總共分為8個(gè)階段：創(chuàng)建前/后，載入前/后，更新前/后，銷(xiāo)毀前/后。

1.創(chuàng)建前/后：

? ??[1].beforeCreate階段：vue實(shí)例的掛載el和數(shù)據(jù)對(duì)象data都是undefined,還沒(méi)有初始化? ? data、methods、computed、watch上的數(shù)據(jù)和方法不能被訪問(wèn)

? ??[2].created階段：vue實(shí)例的數(shù)據(jù)對(duì)象data有了，el還沒(méi)有? ? 可以做一些初始數(shù)據(jù)的獲取

2.載入前/后：?

????[1].beforeMount階段：vue實(shí)例的el和數(shù)據(jù)對(duì)象data都初始化了，還沒(méi)有掛載之前為虛擬的dom結(jié)點(diǎn)? ? 當(dāng)前階段虛擬Dom已經(jīng)創(chuàng)建完成，即將開(kāi)始渲染。在此時(shí)也可以對(duì)數(shù)據(jù)更改，不會(huì)觸發(fā)updated。??

? ? [2].mounted階段：vue實(shí)例掛載完成，data.message成功渲染。? ? 真實(shí)的Dom掛載完畢，數(shù)據(jù)完成雙向綁定，可以訪問(wèn)到Dom結(jié)點(diǎn)，使用$refs屬性對(duì)Dom進(jìn)行操作。

3.更新前/后：????

?????[1].beforeUpdate階段：數(shù)據(jù)更新時(shí)調(diào)用，虛擬DOM打補(bǔ)丁之前，更新之前訪問(wèn)現(xiàn)有的DOM，比如手動(dòng)一處已添加的事件監(jiān)聽(tīng)器。? ? 可以更改數(shù)據(jù)，不會(huì)造成重渲染??

????[2].updated階段：虛擬DOM重新渲染和打補(bǔ)丁后，避免在這個(gè)階段操作數(shù)據(jù)，防止死循環(huán)。

4.銷(xiāo)毀前/后：? ?

? ? [1].beforeDestory階段：實(shí)例銷(xiāo)毀前調(diào)用，還可以用，this能獲得實(shí)例，用于銷(xiāo)毀定時(shí)器，解綁事件? ??

?????[2].destoryed階段：實(shí)例銷(xiāo)毀后調(diào)用，調(diào)用后所有事件監(jiān)聽(tīng)會(huì)被移除，所有的子實(shí)例都會(huì)被銷(xiāo)毀

第一次頁(yè)面加載順序：beforeCreate ----> created?----> beforeMounted?----> mounted

可以在created中請(qǐng)求數(shù)據(jù)，如果需要頁(yè)面加載完成之后的條件的話，可以在mounted中請(qǐng)求

八、生命周期鉤子是如何實(shí)現(xiàn)的

生命周期鉤子函數(shù)就是回調(diào)函數(shù)，當(dāng)創(chuàng)建組件實(shí)例的過(guò)程中會(huì)調(diào)用對(duì)應(yīng)的鉤子函數(shù)

九、Vue的父組件和子組件生命周期執(zhí)行順序

第一次頁(yè)面加載順序：beforeCreate ----> created?----> beforeMounted?----> mounted

父子mount:????父beforeCreate ----> 父created?----> 父beforeMounted?---->?子beforeCreate ---->?子created?---->?子beforeMounted?---->?子mounted?----> 父mounted

父子update：????父beforeUpdate ---->??子beforeUpdate ---->??子update ---->??父update

父/子update：? ? 父/子beforeUpdate ---->??父/子update

父子destory:????????父beforeDestory ---->??子beforeDestory?---->??子destoryed ---->?父destoryed

總結(jié)：父組件等待子組件完成后，才執(zhí)行自己對(duì)應(yīng)完成的鉤子

十、數(shù)據(jù)相關(guān)的方法

1.$watch方法

data () {a: 1,b: 2,c: {d: 3,e: 4}}

兩種監(jiān)聽(tīng)方法:

[1].第一種:

?this.$watch(() => this.a + this.b,(newVal, oldVal) => {console.log('newVal:', newVal, '? oldVal:', oldVal)})

或者

this.$watch('a',(newVal, oldVal) => {console.log('newVal:', newVal, '? oldVal:', oldVal)})

setTimeout(() => {this.a = 111}, 1000)

[1].第二種:

watch: {a (val) {console.log('a:', val)}},

2.$set方法

this.c.d=100? ? =>?????this.$set(this.c, 'd', 100)

3.$delete方法

this.$delete(this.c, 'd')

十一、事件相關(guān)方法

vm.$on(event,callback)? 監(jiān)聽(tīng)當(dāng)前實(shí)例的自定義事件? ? ? ?

vm.$emit(eventName,[...args])? 觸發(fā)當(dāng)前實(shí)例上的事件? ? ??

vm.$off([event,callback])? ?移除自定義事件監(jiān)聽(tīng)? ? 1.如果沒(méi)有參數(shù)，移除所有的監(jiān)聽(tīng)? ? 2.如果只提供事件，則移除該事件所有監(jiān)聽(tīng)? ? 3.如果同時(shí)提供了事件與回調(diào)，則只移除這個(gè)回調(diào)的監(jiān)聽(tīng)器? ? ??

vm.$once(event,callback)? ? 監(jiān)聽(tīng)一個(gè)自定義事件，只觸發(fā)一次。一旦觸發(fā)，監(jiān)聽(tīng)器就移除

十二、生命周期相關(guān)方法

1.vm.$mount([elementOrSelector])

作用：如果Vue實(shí)例在實(shí)例化時(shí)沒(méi)有收到el選項(xiàng)，則它處于“未掛載”狀態(tài)，沒(méi)有關(guān)聯(lián)的DOM元素。可以使用vm.$mount()手動(dòng)地掛載一個(gè)未掛載的實(shí)例。如果沒(méi)有提供elementOrSelector參數(shù)，模板將被渲染為文檔之外的元素，并且你必須使用原生DOM API把它插入文檔中。這個(gè)方法返回實(shí)例本身，因此可以鏈?zhǔn)秸{(diào)用其他實(shí)例方法。

2.vm.$forceUpdate()

作用：迫使Vue實(shí)例重新渲染。注意它僅僅影響實(shí)例本身和插槽內(nèi)容的子組件，而不是所有子組件

3.vm.$nextTick([callback])

用法：將回調(diào)延遲到下次DOM更新循環(huán)后執(zhí)行。在修改數(shù)據(jù)后立即使用它，然后等待DOM更新

JS的運(yùn)行機(jī)制：JS執(zhí)行的是單線程，它是基于事件循環(huán)的。

1.所有同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧。

2.主線程之外，還存在一個(gè)“任務(wù)隊(duì)列”。只要異步任務(wù)有了結(jié)果，就在“任務(wù)隊(duì)列”之中放置一個(gè)事件。

3.一旦“執(zhí)行?！敝兴械耐饺蝿?wù)執(zhí)行完畢，系統(tǒng)就會(huì)讀取“任務(wù)隊(duì)列”。那些對(duì)應(yīng)的異步任務(wù)，結(jié)束等待狀態(tài)，進(jìn)入執(zhí)行棧，開(kāi)始執(zhí)行。

4.主線程不斷重復(fù)上面第三部。

4.vm.$destroy()

用法：完全銷(xiāo)毀一個(gè)實(shí)例。清理它與其他實(shí)例的連接，解綁它的全部指令及事件監(jiān)聽(tīng)器。

十三、Vue中的組件的data 為什么是一個(gè)函數(shù)

組件中的data寫(xiě)成一個(gè)函數(shù)，數(shù)據(jù)以函數(shù)返回值形式定義，這樣復(fù)用一次組件，就返回一份新的data，類(lèi)似于給每個(gè)組件實(shí)例創(chuàng)建一個(gè)私有的數(shù)據(jù)空間，讓各個(gè)組件維護(hù)自己的數(shù)據(jù)。而單純的寫(xiě)成對(duì)象形式，就使得所有組件實(shí)例公用一份data，就會(huì)造成一個(gè)變，全都會(huì)變得結(jié)果。

十四、組件間的通信有哪幾種

父子組件通信、隔代組件通信、兄弟組件通信

1.props/$emit 適用于父子間通信

2.ref于$parent/$children?適用于父子間通信

3.EventBus($emit/$on)??適用于父子、隔代、兄弟間通信

4.$attrs/$listeners??適用于隔代通信

5.provide/inject?????適用于隔代通信

6.vuex?????適用于父子、隔代、兄弟間通信

十五、組件中寫(xiě)name選項(xiàng)有哪些好處

1.可以通過(guò)遞歸找到組件

2.通過(guò)name屬性實(shí)現(xiàn)緩存功能(keep-alive)

3.通過(guò)name識(shí)別組件（跨組件通信）

十六、keep-alive 平時(shí)使用在哪里？原理？

主要用于組件緩存，采用LRU算法。最近最久未使用法。

常用include/exclude,允許組件有條件緩存

通過(guò)生命周期activated/deactivated，得知當(dāng)前是否是處于活躍狀態(tài)

十七、Vue.minxin的使用場(chǎng)景和原理

Vue.minxin作用是抽離公共業(yè)務(wù)邏輯，采用策略模式進(jìn)行合并，如果混入數(shù)據(jù)沖突，采用就近原則。

十八、全局API分析

1.Vue.extend(options)

使用基礎(chǔ)Vue構(gòu)造器，創(chuàng)建一個(gè)“子類(lèi)”。參數(shù)是一個(gè)高寒組件選項(xiàng)的對(duì)象。

2.Vue.directive(id,[definition])?

自定義指令，如同v-model、v-show、v-html

注冊(cè)或獲取全局指令

// 注冊(cè) 及鉤子函數(shù)

Vue.directive('my-directive',{bind:function(){},inserted:function(){},update:function(){},componentUpdated:function(){},unbind:function(){}})

// 注冊(cè) (指令函數(shù))

Vue.directive('my-directive',function(){// 這里將會(huì)被 `bind` 和 `update` 調(diào)用})

// getter，返回已注冊(cè)的指令

var myDirective=Vue.directive('my-directive')

3.Vue.filter(id,[definition])

作用：注冊(cè)或獲取全局過(guò)濾器

4.Vue.component(id,[definition])

作用：注冊(cè)或獲取全局組件。注冊(cè)還會(huì)自動(dòng)使用給定的id設(shè)置組件的名稱(chēng)

5.Vue.compile(template)

作用：在render函數(shù)中編譯模板字符串。只在獨(dú)立構(gòu)建時(shí)有效

6.Vue.observable(object)

用法：讓一個(gè)對(duì)象可響應(yīng)。vue內(nèi)部會(huì)用它來(lái)處理data函數(shù)返回的對(duì)象。返回的對(duì)象可以直接用于渲染函數(shù)和計(jì)算屬性?xún)?nèi)，并且會(huì)在反生改變時(shí)觸發(fā)相應(yīng)的更新。也可以作為最小化的夸組件狀態(tài)存儲(chǔ)器。

十九、Vue-router有幾種鉤子函數(shù)？具體是什么及執(zhí)行流程是怎樣的？

Vue-router鉤子函數(shù)的作用：用來(lái)攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消

鉤子的分類(lèi)：全局守衛(wèi)? ? 路由獨(dú)享守衛(wèi)? ? 局部守衛(wèi)

全局守衛(wèi)：beforeEach//路由跳轉(zhuǎn)前觸發(fā)? ? beforeResolve//路由跳轉(zhuǎn)前觸發(fā)，beforeEach之后，afterEach之前?? ? afterEach//路由跳轉(zhuǎn)后觸發(fā)?

路由獨(dú)享守衛(wèi)：只能在這個(gè)路由下起作用? ? beforeEnter//beforeEach前調(diào)用

局部守衛(wèi)：組件內(nèi)執(zhí)行的鉤子函數(shù)，相當(dāng)于為配置路由的組件添加的生命周期鉤子函數(shù)。beforeRouteEnter ---> beforeRouteUpdate?---> beforeRouteLeave

路由A?--->?路由B 流程:

A組件的?beforeRouteLeave?---> 全局的beforeEach ---> 復(fù)用組件的beforeRouteUpdate?---> B路由的beforeEnter?--->?B組件的beforeRouteEnter?---> 全局的beforeResolve ---> 導(dǎo)航確認(rèn)?---> 全局的afterEach?---> 觸發(fā)DOM更新?---> 用創(chuàng)建好的實(shí)例用beforeRouteEnter

二十、vue-router兩種模式的區(qū)別

vue-router有三種模式：hash、history、abstract

1.hash模式：hash + hashChange

hash雖然在URL中，但不被包括在HTTP請(qǐng)求中。hash不會(huì)重加載頁(yè)面，通過(guò)監(jiān)聽(tīng)hash(#)的變化來(lái)執(zhí)行js代碼從而改變頁(yè)面。

window.addEventListener('hashchange',function(){self.urlChange()})

使用URL hash值來(lái)作路由，支持所有瀏覽器，包括不支持HTML5 History Api的瀏覽器；

2.history模式：history + popState

HTML5推出history API，由pushState()記錄操作歷史，監(jiān)聽(tīng)popstate事件來(lái)監(jiān)聽(tīng)到狀態(tài)變更；

依賴(lài)HTML5 History Api和服務(wù)器配置。

3.abstract

支持所有JavaScript運(yùn)行環(huán)境，如Node.js服務(wù)器端。如果發(fā)現(xiàn)沒(méi)有瀏覽器的API，路由會(huì)自動(dòng)強(qiáng)制進(jìn)入這個(gè)模式。

二十一、Vue中key的作用和公眾原理，及理解

例如：v-for="(item,itemIndex) in tabs" :key="itemIndex"

key的作用主要是為了高效的更新虛擬DOM，其原理是vue在patch過(guò)程中通過(guò)key可以精準(zhǔn)判斷兩個(gè)節(jié)點(diǎn)是否是同一個(gè)，從而避免頻繁更新不同元素，使得整個(gè)patch過(guò)程更加高效，減少DOM操作量，提高性能。

二十二、Vue中的diff原理

vue的diff算法是平級(jí)比較，不考慮跨級(jí)比較的情況。內(nèi)部采用深度遞歸的方式+雙指針的方式進(jìn)行比較。

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

1.v-for優(yōu)先于v-if被解析

2.如果同時(shí)出現(xiàn)，每次渲染都是先執(zhí)行循環(huán)條件。比較浪費(fèi)性能

3.要避免出現(xiàn)這種情況。可以在外層嵌套template，用v-if判斷。

4.如果條件出現(xiàn)在循環(huán)內(nèi)部，通過(guò)計(jì)算提前過(guò)濾掉

二十四、v-if與v-show的區(qū)別

v-if 條件變成真時(shí)，才渲染。

v-show 不管是否是否為真，都要渲染，每次條件改變，只是基于css的display進(jìn)行切換

所以：v-if用于不需要頻繁切換的場(chǎng)景；v-show適用于頻繁切換條件

二十五、computed和watch的區(qū)別和運(yùn)用場(chǎng)景

computed：計(jì)算屬性。依賴(lài)其他屬性值，并且computed的值有緩存，只有它依賴(lài)的屬性值發(fā)生改變，下一次獲取computed的值時(shí)才會(huì)重新計(jì)算computed的值；

watch：監(jiān)聽(tīng)數(shù)據(jù)的變化。每當(dāng)監(jiān)聽(tīng)數(shù)據(jù)變化時(shí)都會(huì)執(zhí)行回調(diào)進(jìn)行后續(xù)操作。

運(yùn)用場(chǎng)景：

1.當(dāng)我們需要進(jìn)行數(shù)值計(jì)算，并且依賴(lài)于其他數(shù)據(jù)時(shí)，應(yīng)該使用computed，因?yàn)榭梢岳胏omputed的緩存特性，避免每次獲取值時(shí)，都要重新計(jì)算；

2.當(dāng)我們需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷(xiāo)較大的操作時(shí)，應(yīng)該使用watch，使用watch選項(xiàng)允許我們執(zhí)行異步操作，限制我們執(zhí)行該操作的評(píng)率，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)。這些都是計(jì)算屬性無(wú)法做到的。

二十六、如何理解自定義指令？

從編譯原理 => 代碼生成?=> 指令鉤子實(shí)現(xiàn) 來(lái)概述

1.在生成ast語(yǔ)法樹(shù)時(shí)，遇到指令會(huì)給當(dāng)前元素添加directives屬性

2.通過(guò)genDirextives生成指令代碼

3.在patch前將指令的鉤子提取到cbs中，在patch過(guò)程中調(diào)用對(duì)應(yīng)的鉤子

4.當(dāng)執(zhí)行指令對(duì)應(yīng)的鉤子函數(shù)時(shí)，調(diào)用對(duì)應(yīng)指令定義的方法

二十七、V-model的原理是什么？

v-model本質(zhì)就是一個(gè)語(yǔ)法糖，可以看成是value+input方法的語(yǔ)法糖。可以通過(guò)model書(shū)信的prop和event書(shū)信來(lái)進(jìn)行自定義。元素的v-model，會(huì)根據(jù)標(biāo)簽的不同生成不同的事件和屬性。

v-model在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：

1.text和textarea元素使用value屬性和input事件

2.checkbox和radio元素使用checked屬性和change事件

3.select字段將value作為prop并將change作為事件

二十八、Vue性能優(yōu)化

1）編碼階段

盡量減少data中的數(shù)據(jù)，data中的數(shù)據(jù)會(huì)增加getter和setter，會(huì)收集對(duì)應(yīng)的watcher

使用key：有利于將舊虛擬結(jié)點(diǎn)列表與新虛擬結(jié)點(diǎn)相同的結(jié)點(diǎn)更新。

使用凍結(jié)對(duì)象：可以?xún)?yōu)化頁(yè)面渲染

使用計(jì)算屬性：計(jì)算屬性有緩存，可以減少計(jì)算，提高性能

使用v-show代替v-if：避免頻繁渲染

SPA頁(yè)面采用keep-alive緩存組件

使用路由懶加載、異步組件

防抖、節(jié)流

第三方模塊按需導(dǎo)入

長(zhǎng)列表滾動(dòng)到可視區(qū)域動(dòng)態(tài)加載

圖片懶加載

2）用戶(hù)體驗(yàn)

骨架屏

可以使用緩存