vue原理相關(guān)總結(jié)

一、vue2.0的雙向綁定是怎么實(shí)現(xiàn)的

1、view和model相互實(shí)時(shí)更新原理：Object.defineProperty數(shù)據(jù)劫持+發(fā)布者-訂閱者(依賴收集)模式
2、observer，compile，watcher
（1）observe是一個(gè)數(shù)據(jù)監(jiān)聽(tīng)器，核心方法是Object.defineProperty
（2）watcher是一個(gè)訂閱者，將Observer發(fā)來(lái)的update消息處理，執(zhí)行更新
（3）compile是一個(gè)指令解析器，對(duì)需要監(jiān)聽(tīng)的節(jié)點(diǎn)和屬性進(jìn)行掃描和解析。
3、此模式的優(yōu)點(diǎn)：不需要顯式調(diào)用，可以直接通知變化，更新視圖；劫持了屬性setter，不需要額外的diff操作
4、Object.defineProperty缺點(diǎn)
（1）不能監(jiān)聽(tīng)數(shù)組
（2）不能監(jiān)聽(tīng)整個(gè)對(duì)象，只能監(jiān)聽(tīng)屬性
（3）不能監(jiān)聽(tīng)屬性的增刪，只能監(jiān)聽(tīng)變化
5、3.0版本使用Proxy
（1）可以監(jiān)聽(tīng)數(shù)組
（2）可直接監(jiān)聽(tīng)整個(gè)對(duì)象，不用層層遞歸屬性
（3）get和set時(shí)候直接有參數(shù)，不需要單獨(dú)存儲(chǔ)變量
（4）new Proxy()會(huì)返回一個(gè)新對(duì)象，不會(huì)污染源對(duì)象。
6、參考文檔：https://blog.nowcoder.net/n/8517450fe4fd4220b4078f9c61e42ec1#:~:text=Vue%20%E6%95%B0%E6%8D%AE%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A,%E6%89%A7%E8%A1%8C%E5%AF%B9%E5%BA%94%E7%9A%84%E6%9B%B4%E6%96%B0%E5%87%BD%E6%95%B0%E3%80%82

二、數(shù)據(jù)不更新的問(wèn)題

1、更新的原理：在數(shù)據(jù)讀取時(shí)收集依賴，在賦值時(shí)通知依賴更新。
2、object有defineProperty方法，通過(guò)getter，setter只監(jiān)聽(tīng)了屬性的讀取和賦值，但是新增屬性和刪除屬性沒(méi)有檢測(cè)，所以專門提供了$set和$delete來(lái)實(shí)現(xiàn)

3、array，沒(méi)有defineProperty方法，沒(méi)有setter，通過(guò)get和新建數(shù)組方法攔截器修改原生方法push,pop,shift,unshift,splice,sort,reserve來(lái)實(shí)現(xiàn)監(jiān)聽(tīng)，而通過(guò)修改數(shù)組下標(biāo)操作數(shù)組的不會(huì)被檢測(cè)，所以專門提供了$set和$delete來(lái)實(shí)現(xiàn)

4、$set(target, key, value)和$delete(target, propertyName/index)方法原理
（1）判斷target是否是undefined，null，或者原始類型,或者vue實(shí)例，或者vue實(shí)例的跟數(shù)據(jù)對(duì)象
（2）target為數(shù)組，則還是通過(guò)調(diào)用splice操作索引更新數(shù)據(jù)
（3）target為對(duì)象，且為響應(yīng)式，則調(diào)用defineReactive操作數(shù)據(jù)
（4）更新完數(shù)據(jù)后通知依賴更新

三、computed和watch和methods

1、computed
（1）設(shè)計(jì)初衷：為了使模板中的邏輯運(yùn)算更簡(jiǎn)單
（2）適用于數(shù)據(jù)被重復(fù)使用或者計(jì)算復(fù)雜費(fèi)時(shí)的場(chǎng)景；依賴其他數(shù)據(jù)的場(chǎng)景
（3）讀取緩存，依賴不變，則不需重新計(jì)算。（根據(jù)dirty標(biāo)志判斷）
2、watch是對(duì)數(shù)據(jù)的監(jiān)聽(tīng)回調(diào)
3、computed和watch的區(qū)別
相同點(diǎn)：都會(huì)觀察頁(yè)面的數(shù)據(jù)變化
不同點(diǎn)：（1）computed是讀取緩存，watch每次都要重新執(zhí)行；
（2）watch更適合數(shù)據(jù)變化時(shí)的異步操作和開(kāi)銷較大的操作。
4、computed和methods的區(qū)別
computed依賴緩存，可以定義getter和setter，但是methods不行

四、vue-router的模式區(qū)別

1、abstract：非瀏覽器環(huán)境下使用
2、hash：
（1）默認(rèn)。監(jiān)聽(tīng)hashchange實(shí)現(xiàn)。
（2）有點(diǎn)，兼容性好，ie8支持
（3）缺點(diǎn)：看起來(lái)奇怪
3、history：
（1）h5新增的。允許開(kāi)發(fā)者直接修改前端路由而不重新觸發(fā)請(qǐng)求頁(yè)面
（2）實(shí)現(xiàn)原理：監(jiān)聽(tīng)popstate事件。能監(jiān)聽(tīng)到用戶點(diǎn)擊瀏覽器的前進(jìn)后退事件或者手動(dòng)調(diào)用go，back，forward事件；不能監(jiān)聽(tīng)到pushState和replaceState事件。
（3）為了避免瀏覽器刷新出現(xiàn)的404頁(yè)面，需要在服務(wù)端配置兼容。
（4）如果瀏覽器不支持，會(huì)降級(jí)到hash模式
* 通過(guò)vue.use插件機(jī)制和vue.mixin將store在beforeCreate和destroyed生命周期進(jìn)行混入。

五、vuex解決了什么問(wèn)題

1、vuex解決了vue項(xiàng)目中的數(shù)據(jù)狀態(tài)管理問(wèn)題
2、是組件通信的一種方式。
3、原理：創(chuàng)建了單一的狀態(tài)樹(shù)，包含state，mutation，action，getter，module。
4、view(dispatch)action(commit)mutation(mutate)state(render)view
5、通過(guò)vue的data和computed，讓state變成響應(yīng)式，
6、通過(guò)vue.use插件機(jī)制和vue.mixin將store在beforeCreate生命周期進(jìn)行混入。


六、nextTick是怎么是實(shí)現(xiàn)的

1、作用：將回調(diào)延遲到下次DOM更新循環(huán)之后執(zhí)行
2、原因：VUE在更新DOM時(shí)是異步的，vue檢測(cè)到數(shù)據(jù)變化后，不會(huì)立即更新DOM，而是會(huì)開(kāi)啟一個(gè)事件隊(duì)列，并緩沖同一時(shí)間循環(huán)中的所有數(shù)據(jù)變更，在下一次tick中，執(zhí)行更新DOM。
3、js的運(yùn)行機(jī)制：js是單線程的，基于事件循環(huán)，有宏任務(wù)和微任務(wù)。
4、內(nèi)部原理：
    （1）能力檢測(cè)：Promise.then(微), MutationObserve(微)，setImmediate(微),setTimeout(宏)
    （2）將回調(diào)函數(shù)推入回調(diào)隊(duì)列，鎖上易步鎖，執(zhí)行回調(diào)。

七、keep-alive內(nèi)置組件和LRU算法（隊(duì)列）

1、自身不會(huì)渲染成DOM，沒(méi)有常規(guī)的<template>標(biāo)簽，是個(gè)函數(shù)組件，被他包裹的組件，切換時(shí)會(huì)被緩存在內(nèi)存中，而不是銷毀。
    （1）可以有條件的緩存:include（匹配到的緩存）,exclude（匹配到的不緩存）,max(最多可以緩存多少組件實(shí)例)
2、原理：內(nèi)部維護(hù)了this.cache（緩存的組件對(duì)象）和this.keys（this.cache中的key），運(yùn)用LRU策略。
    （1）命中了緩存的組件要調(diào)整組件key的順序。
    （2）緩存的組件數(shù)量如果超過(guò)this.max時(shí)，要?jiǎng)h除第一個(gè)緩存組件。
    （3）LRU(Least recently used，最近最少使用)：根據(jù)數(shù)據(jù)的歷史訪問(wèn)記錄來(lái)進(jìn)行淘汰數(shù)據(jù)。“如果數(shù)據(jù)最近被訪問(wèn)過(guò)，那么將來(lái)被訪問(wèn)的幾率也更高。”
3、生命周期鉤子：activated和deactivated，被keep-alive包括的組件激活和停用時(shí)調(diào)用。先停用組件的deactivated，再激活組件的activated



點(diǎn)擊左下角閱讀原文，到 SegmentFault 思否社區(qū) 和文章作者展開(kāi)更多互動(dòng)和交流，掃描下方”二維碼“或在“公眾號(hào)后臺(tái)“回復(fù)“ 入群 ”即可加入我們的技術(shù)交流群，收獲更多的技術(shù)文章~

- END -