Vue

生命周期

vue2:

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

• 創(chuàng)建前/后： 在beforeCreate階段，由于還未初始化，vue實例的掛載元素el和數(shù)據(jù)對象data都為undefined。在created階段，vue實例的數(shù)據(jù)對象data有了，el還沒有。
• 載入前/后：在beforeMount階段，vue實例的$el和data都初始化了，但掛載之前還是為虛擬的dom節(jié)點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。
• 更新前/后：當data變化時，會觸發(fā)beforeUpdate和updated方法。
• 銷毀前/后：在執(zhí)行destroy方法后，對data的改變不會再觸發(fā)周期函數(shù)，說明此時vue實例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定，但是dom結(jié)構(gòu)依然存在。

vue3:

• beforeCreate -> 使用 setup()
• created -> 使用 setup()
• beforeMount -> onBeforeMount
• mounted -> onMountedbefore
• Update -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

MVVM

mvvm是一種設計思想。

Model代表數(shù)據(jù)模型，可以在model中定義數(shù)據(jù)修改和操作的業(yè)務邏輯;

view表示ui組件，負責將數(shù)據(jù)模型轉(zhuǎn)換為ui展現(xiàn)出來，它做的是數(shù)據(jù)綁定的聲明、 指令的聲明、 事件綁定的聲明。

而viewModel是一個同步view和model的對象。

在mvvm框架中，view和model之間沒有直接的關(guān)系，它們是通過viewModel來進行交互的。

mvvm不需要手動操作dom，只需要關(guān)注業(yè)務邏輯就可以了。

mvvm 的核心是數(shù)據(jù)劫持、數(shù)據(jù)代理、數(shù)據(jù)編譯和"發(fā)布訂閱模式"。

mvvm和mvc的區(qū)別在于：mvvm是數(shù)據(jù)驅(qū)動的，而MVC是dom驅(qū)動的。

mvvm的優(yōu)點在于不用操作大量的dom，不需要關(guān)注model和view之間的關(guān)系，而MVC需要在model發(fā)生改變時，需要手動的去更新view。

大量操作dom使頁面渲染性能降低，使加載速度變慢，影響用戶體驗。

雙向綁定原理

vue2是利用ES5的Object.defineProperty，

局限：只能監(jiān)聽對象屬性的變化；不能利用索引直接設置一個數(shù)組項,也不能修改數(shù)組的長度

Object.defineProperty(object, "key", {
  get() { return bValue; },
  set(newValue) { bValue = newValue; },
  enumerable : true,
  configurable : true
});

Vue3.0中的響應式采用了ES6中的 Proxy 方法，可以監(jiān)聽對象某個屬性值的變化，還可以監(jiān)聽對象屬性的新增和刪除，而且還可以監(jiān)聽數(shù)組。

var proxy = new Proxy({}, {
  get: function(target, propKey) {
    return 35;
  }
  set: function(obj, prop, value) {
	obj[prop] = value;
    return true;
  }
});

虛擬dom

虛擬dom本質(zhì)是將目標所需的 UI 通過數(shù)據(jù)結(jié)構(gòu)“虛擬”地表示出來，保存在內(nèi)存中，然后將真實的 DOM 與之保持同步。

在渲染之前，會使用新生成的虛擬節(jié)點和上一次生成的虛擬節(jié)點進行對比，只渲染不同的部分。

虛擬DOM在vue中主要提供與真實節(jié)點對應的虛擬節(jié)點vnode,然后需要將vnode和oldVnode進行比對，然后更新視圖，對比兩個虛擬節(jié)點的算法是patch算法。

(在 vue 里面diff 算法就是通過 patch 函數(shù)來完成的，所有有的時候也叫 patch 算法.)

v-for為什么要用key

Vue 默認按照“就地更新”的策略來更新通過 v-for 渲染的元素列表。當數(shù)據(jù)項的順序改變時，Vue 不會隨之移動 DOM 元素的順序，而是就地更新每個元素，確保它們在原本指定的索引位置上渲染。

key能提高diff效率其實是需要分情況的。

不用 key：

就地復用節(jié)點。在比較新舊兩個節(jié)點是否是同一個節(jié)點的過程中會判斷成新舊兩個節(jié)點是同一個節(jié)點，因為 a.key 和 b.key 都是 undefined。

所以不會重新創(chuàng)建節(jié)點和刪除節(jié)點，只會在節(jié)點的屬性層面上進行比較和更新。所以可能在某種程度上（創(chuàng)建和刪除節(jié)點方面）會有渲染性能上的提升；無法維持組件的狀態(tài)。

由于就地復用節(jié)點的關(guān)系，可能在維持組件狀態(tài)方面會導致不可預知的錯誤，比如無法維持改組件的動畫效果、開關(guān)等狀態(tài)；也有可能會帶來性能下降。

因為是直接就地復用節(jié)點，如果修改的組件，需要復用的很多節(jié)點，順序又和原來的完全不同的話，那么創(chuàng)建和刪除的節(jié)點數(shù)量就會比帶 key 的時候增加很多，性能就會有所下降；

用 key：

維持組件的狀態(tài)，保證組件的復用。因為有 key 唯一標識了組件，不會在每次比較新舊兩個節(jié)點是否是同一個節(jié)點的時候直接判斷為同一個節(jié)點，而是會繼續(xù)在接下來的節(jié)點中找到 key 相同的節(jié)點去比較，能找到相同的 key 的話就復用節(jié)點，不能找到的話就增加或者刪除節(jié)點。

查找性能上的提升。

有 key 的時候，會生成 hash，這樣在查找的時候就是 hash 查找了，基本上就是 O(1) 的復雜度。

節(jié)點復用帶來的性能提升。因為有 key 唯一標識了組件，所以會盡可能多的對組件進行復用（盡管組件順序不同），那么創(chuàng)建和刪除節(jié)點數(shù)量就會變少，這方面的消耗就會下降，帶來性能的提升。

總結(jié)：性能提升不能只考慮一方面，不是 diff 快了性能就快，不是增刪節(jié)點少了性能就快，不考慮量級的去評價性能，都只是泛泛而談。

key也不能是li元素的index，因為假設我們給數(shù)組前插入一個新元素，它的下標是0，那么和原來的第一個元素重復了，整個數(shù)組的key都發(fā)生了改變，這樣就跟沒有key的情況一樣了。

nextTick

vue 采用的異步更新策略，當監(jiān)聽到數(shù)據(jù)發(fā)生變化的時候不會立即去更新DOM，而是開啟一個任務隊列，并緩存在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更;

這種做法帶來的好處就是可以將多次數(shù)據(jù)更新合并成一次，減少操作DOM的次數(shù)，如果不采用這種方法，假設數(shù)據(jù)改變100次就要去更新100次DOM，而頻繁的DOM更新是很耗性能的。

nextTick 接收一個回調(diào)函數(shù)作為參數(shù)，并將這個回調(diào)函數(shù)延遲到DOM更新后才執(zhí)行；

使用場景：想要操作 基于最新數(shù)據(jù)生成的DOM 時，就將這個操作放在 nextTick 的回調(diào)中；

實現(xiàn)原理：將傳入的回調(diào)函數(shù)包裝成異步任務，異步任務又分微任務和宏任務，為了盡快執(zhí)行所以優(yōu)先選擇微任務；

v-show、v-if的區(qū)別

v-if 是“真實的”按條件渲染，因為它確保了在切換時，條件區(qū)塊內(nèi)的事件監(jiān)聽器和子組件都會被銷毀與重建。

v-if 也是惰性的：如果在初次渲染時條件值為 false，則不會做任何事。條件區(qū)塊只有當條件首次變?yōu)?true 時才被渲染。

相比之下，v-show 簡單許多，元素無論初始條件如何，始終會被渲染，只有 CSS display 屬性會被切換。

總的來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要頻繁切換，則使用 v-show 較好；如果在運行時綁定條件很少改變，則 v-if 會更合適。

實現(xiàn)方式：v-if會調(diào)用addIfCondition方法，生成vnode的時候會忽略對應節(jié)點，render的時候就不會渲染；

v-show會生成vnode，render的時候也會渲染成真實節(jié)點，只是在render過程中會在節(jié)點的屬性中修改show屬性值，也就是常說的display；

vue單頁面應用如何首頁優(yōu)化

VUE首頁加載過慢，其原因是因為它是一個單頁應用，需要將所有需要的資源都下載到瀏覽器端并解析。

• cdn加速
• 路由懶加載
• 首頁加 loading 或 骨架屏 （僅僅是優(yōu)化體驗）
• 首頁使用SSR，其他頁面前端渲染
• 優(yōu)化js體積，使用分包等策略減少chunk-vendors.js的體積
• 優(yōu)化第三方庫，按需引入，減少不必要的引入
• 圖片壓縮，使用字體圖標等
• 開啟gizp壓縮；
• 使網(wǎng)站的css、js 、xml、html 等靜態(tài)資源在傳輸時進行壓縮，經(jīng)過Gzip壓縮后資源可以變?yōu)樵瓉淼?0%甚至更小，盡管這樣會消耗一定的cpu資源，但是會節(jié)約大量的出口帶寬來提高訪問速度.

Vue 的父組件和子組件生命周期鉤子執(zhí)行順序是什么

加載渲染過程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子組件更新過程 父beforeUpdate->子beforeUpdate->子updated->父updated

父組件更新過程 父beforeUpdate->父updated

銷毀過程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

Vue 中的 computed 是如何實現(xiàn)的

總結(jié)：computed本身是通過代理的方式代理到組件實例上的，所以讀取計算屬性的時候，執(zhí)行的是一個內(nèi)部的getter，而不是用戶定義的方法。

computed內(nèi)部實現(xiàn)了一個惰性的watcher，在實例化的時候不會去求值，其內(nèi)部通過dirty屬性標記計算屬性是否需要重新求值。

當computed依賴的任一狀態(tài)（不一定是return中的）發(fā)生變化，都會通知這個惰性watcher，讓它把dirty屬性設置為true。

所以，當再次讀取這個計算屬性的時候，就會重新去求值。

React 不同之處

vue和react的區(qū)別

兩者都是管理全局狀態(tài)的工具庫，總的來說都是讓 View 通過某種方式觸發(fā) Store 的事件或方法，Store 的事件或方法對 State 進行修改或返回一個新的 State，State 改變之后，View 發(fā)生響應式改變。

Redux： view——>actions——>reducer——>state變化——>view變化（同步異步一樣）

Vuex： view——>commit——>mutations——>state變化——>view變化（同步操作） view——>dispatch——>actions——>mutations——>state變化——>view變化（異步操作）

vuex:

對于簡單應用來說，使用 Vuex 是繁瑣冗余，可以使用用響應式 API 做簡單狀態(tài)管理，用 reactive() 來創(chuàng)建一個響應式對象，并在不同組件中導入它。

State

Vuex 使用單一狀態(tài)樹——是的，用一個對象就包含了全部的應用層級狀態(tài)。

至此它便作為一個“唯一數(shù)據(jù)源 (SSOT)”而存在。這也意味著，每個應用將僅僅包含一個 store 實例。

單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過程中也能輕易地取得整個當前應用狀態(tài)的快照.Vuex通過 store 選項，把 state 注入到了整個應用中，這樣子組件能通過 this.$store 訪問到 state 了

Mutation

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。

Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字符串的事件類型 (type)和一個回調(diào)函數(shù) (handler)。

這個回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)。

注意：mutation 必須是同步函數(shù)

Action

Action 類似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接變更狀態(tài)。

Action 可以包含任意異步操作

Action 通過 store.dispatch 方法觸發(fā)

以上就是一篇Vue、React重點詳解大全的詳細內(nèi)容，更多關(guān)于Vue、React的資料請關(guān)注腳本之家其它相關(guān)文章！