1窑滞、vue中父子組件傳值毡证，父組件異步請求电爹，子組件不能實(shí)時更新怎么解決？（vue中數(shù)據(jù)不能實(shí)時更新怎么解決料睛？）
首先了解父子組件生命周期執(zhí)行順序 ==>
加載渲染數(shù)據(jù)過程
父組件 beforeCreate -->
父組件 created -->
父組件 beforeMount -->
子組件 beforeCreate -->
子組件 created -->
子組件 beforeMount -->
子組件 mounted -->
父組件 mounted -->
原因：因?yàn)樯芷谥粫?zhí)行一次丐箩，數(shù)據(jù)是要等到異步請求以后才能拿到，那么子組件的mounted鉤子執(zhí)行的時候恤煞，還沒有拿到父組件傳遞過來的數(shù)據(jù)屎勘，但是又必須要打印出來結(jié)果，那這樣的話居扒，就只能去打印props中的默認(rèn)值空字符串了概漱，所以打印的結(jié)果是一個空字符串。
解決辦法：
1.使用v-if控制組件渲染的時機(jī)
初始還沒拿到后端接口的異步數(shù)據(jù)的時候喜喂，不讓組件渲染瓤摧，等拿到的時候再去渲染組件竿裂。使用v-if="變量"去控制，初始讓這個變量為false姻灶，這樣的話铛绰，子組件就不會去渲染，等拿到數(shù)據(jù)的時候产喉，再讓這個變量變成true捂掰。
2.使用watch監(jiān)聽數(shù)據(jù)的變化
3.使用VueX
2、vue 首屏加載怎么優(yōu)化曾沈？
- 把不常改變的庫放到 index.html 中这嚣，通過 cdn 引入，然后找到 build/webpack.base.conf.js 文件塞俱，在 module.exports = { } 中添加以下代碼
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
}
2.vue 路由的懶加載（import或者require懶加載姐帚。）
3.不生成 map 文件，找到 config/index.js障涯，修改為 productionSourceMap: false
4.vue 組件盡量不要全局引入
5.使用更輕量級的工具庫
6.開啟gzip壓縮
3罐旗、Vue 中 for循環(huán)為什么加 key？
為了性能優(yōu)化唯蝶， 因?yàn)関ue是虛擬DOM九秀，更新DOM時用diff算法對節(jié)點(diǎn)進(jìn)行一一比對，比如有很多l(xiāng)i元素粘我，要在某個位置插入一個li元素鼓蜒，但沒有給li上加key，那么在進(jìn)行運(yùn)算的時候征字，就會將所有l(wèi)i元素重新渲染一遍都弹，但是如果有key，那么它就會按照key一一比對li元素匙姜，只需要創(chuàng)建新的li元素畅厢，插入即可，不需要對其他元素進(jìn)行修改和重新渲染氮昧。
key也不能是li元素的index或详，因?yàn)榧僭O(shè)我們給數(shù)組前插入一個新元素，它的下標(biāo)是0郭计，那么和原來的第一個元素重復(fù)了，整個數(shù)組的key都發(fā)生了改變椒振，這樣就跟沒有key的情況一樣了
4昭伸、Vue 中 nextTick的作用是：該方法中的代碼會在當(dāng)前渲染完成后執(zhí)行莺葫，就解決了異步渲染獲取不到更新后DOM的問題了。 n e x t T i c k 的 原 理 ： nextTick的原理：nextTick的原理：nextTick本質(zhì)是返回一個Promise 枪眉。
應(yīng)用場景：在created()里面想要獲取操作Dom捺檬，把操作DOM的方法放在$nextTick中
5、vue生命周期
beforeCreate：創(chuàng)建前贸铜。此時堡纬，組件實(shí)例剛剛創(chuàng)建，還未進(jìn)行數(shù)據(jù)觀測和事件配置蒿秦，拿不到任何數(shù)據(jù)烤镐。
created：創(chuàng)建完成。vue 實(shí)例已經(jīng)完成了數(shù)據(jù)觀測渤早，屬性和方法的計算(比如props职车、methods、data鹊杖、computed和watch此時已經(jīng)拿得到)悴灵，未掛載到DOM，不能訪問到el屬性骂蓖，el屬性积瞒，ref屬性內(nèi)容為空數(shù)組常用于簡單的ajax請求，頁面的初始化登下。
beforeMount：掛載前茫孔。掛在開始之前被調(diào)用，相關(guān)的render函數(shù)首次被調(diào)用（虛擬DOM）被芳。編譯模板缰贝，把data里面的數(shù)據(jù)和模板生成html，完成了el和data 初始化畔濒，注意此時還沒有掛在html到頁面上剩晴。
mounted：掛載完成。也就是模板中的HTML渲染到HTML頁面中，此時可以通過DOM API獲取到DOM節(jié)點(diǎn)赞弥，$ref屬性可以訪問常用于獲取VNode信息和操作毅整，ajax請求，mounted只會執(zhí)行一次绽左。
beforeUpdate：在數(shù)據(jù)更新之前被調(diào)用悼嫉，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前，不會觸發(fā)附加地重渲染過程拼窥。
updated：更新后戏蔑。在由于數(shù)據(jù)更改導(dǎo)致地虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用，
beforeDestroy;銷毀前闯团。在實(shí)例銷毀之前調(diào)用辛臊，實(shí)例仍然完全可用。（一般在這一步做一些重置的操作房交，比如清除掉組件中的定時器 和 監(jiān)聽的dom事件）
destroyed：銷毀后彻舰。在實(shí)例銷毀之后調(diào)用，調(diào)用后候味，vue實(shí)列指示的所有東西都會解綁刃唤，所有的事件監(jiān)聽器會被移除。
其他：
activated：在keep-alive組件激活時調(diào)用
deactivated：在keep-alive組件停用時調(diào)用
6白群、New 操作符具體干了什么尚胞？
1.創(chuàng)建一個空對象: 并且 this 變量引入該對象,同時還繼承了函數(shù)的原型
2.設(shè)置原型鏈 空對象指向構(gòu)造函數(shù)的原型對象
3.執(zhí)行函數(shù)體 修改構(gòu)造函數(shù) this 指針指向空對象,并執(zhí)行函數(shù)體
4.判斷返回值 返回對象就用該對象,沒有的話就創(chuàng)建一個對象
7、module帜慢、export笼裳、import 有什么作用？
module粱玲、export躬柬、import 是 ES6 用來統(tǒng)一前端模塊化方案的設(shè)計思路和實(shí)現(xiàn)方案。
export抽减、import 的出現(xiàn)統(tǒng)一了前端模塊化的實(shí)現(xiàn)方案允青，整合規(guī)范了瀏覽器/服務(wù)端的模塊化方
法，用來取代傳統(tǒng)的 AMD/CMD卵沉、requireJS颠锉、seaJS、commondJS 等等一系列前端模塊不同的
實(shí)現(xiàn)方案史汗，使前端模塊化更加統(tǒng)一規(guī)范琼掠，JS 也能更加能實(shí)現(xiàn)大型的應(yīng)用程序開發(fā)。
import 引入的模塊是靜態(tài)加載（編譯階段加載）而不是動態(tài)加載（運(yùn)行時加載）停撞。
import 引入 export 導(dǎo)出的接口值是動態(tài)綁定關(guān)系瓷蛙，即通過該接口，可以取到模塊內(nèi)部實(shí)時的值
8、vue的雙向綁定原理速挑？
Vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過 Object.defineProperty()來劫持各個屬性的 setter副硅，getter姥宝，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)恐疲。
1腊满、需要 observe 的數(shù)據(jù)對象進(jìn)行遞歸遍歷，包括子屬性對象的屬性培己，都加上 setter 和 getter碳蛋，
這樣的話，給這個對象的某個值賦值省咨，就會觸發(fā) setter肃弟，那么就能監(jiān)聽到了數(shù)據(jù)變化
2、compile 解析模板指令零蓉，將模板中的變量替換成數(shù)據(jù)笤受，然后初始化渲染頁面視圖，并將每個指令對應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)敌蜂，添加監(jiān)聽數(shù)據(jù)的訂閱者箩兽，一旦數(shù)據(jù)有變動，收到通知章喉，更新視圖
9汗贫、描述下 vue 從初始化頁面--修改數(shù)據(jù)--刷新頁面 UI 的過程？
當(dāng) Vue 進(jìn)入初始化階段時秸脱，一方面 Vue 會遍歷 data 中的屬性落包，并用 Object.defineProperty 將它轉(zhuǎn)化成 getter/setter 的形式，實(shí)現(xiàn)數(shù)據(jù)劫持(暫不談 Vue3.0 的 Proxy)撞反；另一方面妥色，Vue 的指令編譯器 Compiler 對元素節(jié)點(diǎn)的各個指令進(jìn)行解析，初始化視圖遏片，并訂閱 Watcher 來更新試圖嘹害，此時 Watcher 會將自己添加到消息訂閱器 Dep 中，此時初始化完畢吮便。
當(dāng)數(shù)據(jù)發(fā)生變化時笔呀，觸發(fā) Observer 中 setter 方法，立即調(diào)用 Dep.notify(),Dep 這個數(shù)組開始遍歷所有的訂閱者髓需，并調(diào)用其 update 方法许师，Vue 內(nèi)部再通過 diff 算法，patch 相應(yīng)的更新完成對訂閱者視圖的改變。
10微渠、vue-router 有哪些鉤子函數(shù)?
關(guān)于 vue-router 中的鉤子函數(shù)主要分為 3 類
1搭幻、全局鉤子函數(shù)要包含 beforeEach
1,1）beforeEach 函數(shù)有三個參數(shù),分別是
1,2）to:router 即將進(jìn)入的路由對象
1,3）from:當(dāng)前導(dǎo)航即將離開的路由
1,4）next:function,進(jìn)行管道中的一個鉤子，如果執(zhí)行完了,則導(dǎo)航的狀態(tài)就是 confirmed
（確認(rèn)的）否則為 false,終止導(dǎo)航
2逞盆、單獨(dú)路由獨(dú)享組件
2,1）beforeEnter
3檀蹋、組件內(nèi)鉤子
3,1）beforeRouterEnter
3,2）beforeRouterUpdate
3,3）beforeRouterLeave
