成人午夜高潮a∨猛片,www夜插内射视频网站

為什麼在Vue3.0 採用了Proxy,拋棄了Object.defineProperty？

Object.defineProperty 本身有一定的監(jiān)控到數組下標變化的能力,但是在Vue 中,從性能/體驗的性價比考慮,尤大大就棄用了這個特性(Vue 為什麼不能檢測數組變動)。為了解決這個問題,經過vue 內部處理後可以使用以下幾種方法來監(jiān)聽數組

push();
pop();
shift();
unshift();
splice();
sort();
reverse();

由於只針對了以上7 種方法進行了hack 處理,所以其他數組的屬性也是檢測不到的,還是具有一定的限制。

Object.defineProperty 只能劫持物件的屬性,因此我們需要對每個物件的每個屬性進行遍歷。 Vue 2.x 裡,是透過遞歸遍歷 data 物件來實現對資料的監(jiān)控的,如果屬性值也是物件那麼需要深度遍歷,顯然如果能劫持一個完整的物件是才是更好的選擇。

Proxy 可以劫持整個物件,並回傳一個新的物件。 Proxy 不僅可以代理物件,還可以代理數組。也可以代理動態(tài)增加的屬性。

v-for 為什麼要加key
##更準確
：因為帶key 就不是就地復用了，在sameNode 函數a.key === b.key 對比中可以避免就地復用的情況。所以會更加準確。

更快

：利用key 的唯一性產生map 物件來取得對應節(jié)點，比遍歷方式更快

如何從真實DOM到虛擬DOM##涉及到Vue中的模板編譯原理，主要過程：
ast
樹，
ast
最佳化樹

#將 ast 樹產生程式碼

#為什麼Vue採用非同步渲染？

Vue

是元件級更新，如果不採用非同步更新，那麼每次更新資料都會對目前元件進行重新渲染，所以為了效能， Vue 會在本輪資料更新後，在非同步更新視圖。核心思想 nextTick 。 dep.notify（） 通知watcher進行更新， subs[i].update 依序呼叫watcher 的

update

， queueWatcher 將watcher 去重放入佇列， nextTick（

flushSchedulerQueue

）在下一tick中刷新watcher隊列（非同步）。

為什麼vue元件中data必須是一個函數？

對象為參考類型，當複用元件時，由於資料對像都指向同一個data對象，當在一個元件中修改data時，其他重用的元件中的data會同時被修改；而使用傳回物件的函數，由於每次傳回的都是一個新物件（Object的實例），引用位址不同，則不會出現這個問題。

MVC 與MVVM 區(qū)別

MVC
MVC 全名是Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟體設計典範

Model（模型）：是應用程式中用來處理應用程式資料邏輯的部分。通常模型物件負責在資料庫中存取資料

View（檢視）：是應用程式中處理資料顯示的部分。通常視圖是依據模型資料建立的

Controller（控制器）：是應用程式中處理使用者互動的部分。通?？刂破髫撠煆囊晥D讀取數據，控制用戶輸入，並向模型發(fā)送數據

MVC 的想法：一句話描述就是Controller 負責將Model 的數據用View 顯示出來，換句話說就是在Controller 裡面把Model 的資料賦值給View。

######MVVM#########MVVM 新增了 VM 類別###

ViewModel 層：做了兩件事達到了數據的雙向綁定一是將【模型】轉化成【視圖】，即將后端傳遞的數據轉化成所看到的頁面。實現的方式是：數據綁定。二是將【視圖】轉化成【模型】，即將所看到的頁面轉化成后端的數據。實現的方式是：DOM 事件監(jiān)聽。

MVVM 與 MVC 最大的區(qū)別就是：它實現了 View 和 Model 的自動同步，也就是當 Model 的屬性改變時，我們不用再自己手動操作 Dom 元素，來改變 View 的顯示，而是改變屬性后該屬性對應 View 層顯示會自動改變（對應Vue數據驅動的思想）

整體看來，MVVM 比 MVC 精簡很多，不僅簡化了業(yè)務與界面的依賴，還解決了數據頻繁更新的問題，不用再用選擇器操作 DOM 元素。因為在 MVVM 中，View 不知道 Model 的存在，Model 和 ViewModel 也觀察不到 View，這種低耦合模式提高代碼的可重用性

注意：Vue 并沒有完全遵循 MVVM 的思想這一點官網自己也有說明

那么問題來了為什么官方要說 Vue 沒有完全遵循 MVVM 思想呢？

嚴格的 MVVM 要求 View 不能和 Model 直接通信，而 Vue 提供了$refs 這個屬性，讓 Model 可以直接操作 View，違反了這一規(guī)定，所以說 Vue 沒有完全遵循 MVVM。

Vue 為什么要用 vm.$set() 解決對象新增屬性不能響應的問題？你能說說如下代碼的實現原理么？

1）Vue為什么要用vm.$set() 解決對象新增屬性不能響應的問題

Vue使用了Object.defineProperty實現雙向數據綁定
在初始化實例時對屬性執(zhí)行 getter/setter 轉化
屬性必須在data對象上存在才能讓Vue將它轉換為響應式的（這也就造成了Vue無法檢測到對象屬性的添加或刪除）

所以Vue提供了Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value)

2）接下來我們看看框架本身是如何實現的呢?

Vue 源碼位置：vue/src/core/instance/index.js

export?function?set?(target:?Array<any>?|?Object,?key:?any,?val:?any):?any?{
??//?target?為數組??
??if?(Array.isArray(target)?&&?isValidArrayIndex(key))?{
????//?修改數組的長度,?避免索引>數組長度導致splcie()執(zhí)行有誤
????target.length?=?Math.max(target.length,?key)
????//?利用數組的splice變異方法觸發(fā)響應式??
????target.splice(key,?1,?val)
????return?val
??}
??//?key?已經存在，直接修改屬性值??
??if?(key?in?target?&&?!(key?in?Object.prototype))?{
????target[key]?=?val
????return?val
??}
??const?ob?=?(target:?any).__ob__
??//?target?本身就不是響應式數據,?直接賦值
??if?(!ob)?{
????target[key]?=?val
????return?val
??}
??//?對屬性進行響應式處理
??defineReactive(ob.value,?key,?val)
??ob.dep.notify()
??return?val
}

我們閱讀以上源碼可知，vm.$set 的實現原理是：

如果目標是數組，直接使用數組的 splice 方法觸發(fā)相應式；
如果目標是對象，會先判讀屬性是否存在、對象是否是響應式，
最終如果要對屬性進行響應式處理，則是通過調用 defineReactive 方法進行響應式處理

defineReactive 方法就是 Vue 在初始化對象時，給對象屬性采用 Object.defineProperty 動態(tài)添加 getter 和 setter 的功能所調用的方法

Vue3.0 和 2.0 的響應式原理區(qū)別

Vue3.x 改用 Proxy 替代 Object.defineProperty。因為 Proxy 可以直接監(jiān)聽對象和數組的變化，并且有多達 13 種攔截方法。

相關代碼如下

import?{?mutableHandlers?}?from?"./baseHandlers";?//?代理相關邏輯
import?{?isObject?}?from?"./util";?//?工具方法

export?function?reactive(target)?{
??//?根據不同參數創(chuàng)建不同響應式對象
??return?createReactiveObject(target,?mutableHandlers);
}
function?createReactiveObject(target,?baseHandler)?{
??if?(!isObject(target))?{
????return?target;
??}
??const?observed?=?new?Proxy(target,?baseHandler);
??return?observed;
}

const?get?=?createGetter();
const?set?=?createSetter();

function?createGetter()?{
??return?function?get(target,?key,?receiver)?{
????//?對獲取的值進行放射
????const?res?=?Reflect.get(target,?key,?receiver);
????console.log("屬性獲取",?key);
????if?(isObject(res))?{
??????//?如果獲取的值是對象類型，則返回當前對象的代理對象
??????return?reactive(res);
????}
????return?res;
??};
}
function?createSetter()?{
??return?function?set(target,?key,?value,?receiver)?{
????const?oldValue?=?target[key];
????const?hadKey?=?hasOwn(target,?key);
????const?result?=?Reflect.set(target,?key,?value,?receiver);
????if?(!hadKey)?{
??????console.log("屬性新增",?key,?value);
????}?else?if?(hasChanged(value,?oldValue))?{
??????console.log("屬性值被修改",?key,?value);
????}
????return?result;
??};
}
export?const?mutableHandlers?=?{
??get,?//?當獲取屬性時調用此方法
??set,?//?當修改屬性時調用此方法
};

Vue模版編譯原理知道嗎，能簡單說一下嗎？

簡單說，Vue的編譯過程就是將template轉化為render函數的過程。會經歷以下階段：

生成AST樹
優(yōu)化
codegen

首先解析模版，生成AST語法樹(一種用JavaScript對象的形式來描述整個模板)。使用大量的正則表達式對模板進行解析，遇到標簽、文本的時候都會執(zhí)行對應的鉤子進行相關處理。

Vue的數據是響應式的，但其實模板中并不是所有的數據都是響應式的。有一些數據首次渲染后就不會再變化，對應的DOM也不會變化。那么優(yōu)化過程就是深度遍歷AST樹，按照相關條件對樹節(jié)點進行標記。這些被標記的節(jié)點(靜態(tài)節(jié)點)我們就可以跳過對它們的比對，對運行時的模板起到很大的優(yōu)化作用。

編譯的最后一步是將優(yōu)化后的AST樹轉換為可執(zhí)行的代碼。

MVVM的優(yōu)缺點?

優(yōu)點:

分離視圖（View）和模型（Model），降低代碼耦合，提?視圖或者邏輯的重?性: ?如視圖（View）可以獨?于Model變化和修改，?個ViewModel可以綁定不同的"View"上，當View變化的時候Model不可以不變，當Model變化的時候View也可以不變。你可以把?些視圖邏輯放在?個ViewModel??，讓很多view重?這段視圖邏輯
提?可測試性: ViewModel的存在可以幫助開發(fā)者更好地編寫測試代碼
?動更新dom: 利?雙向綁定,數據更新后視圖?動更新,讓開發(fā)者從繁瑣的?動dom中解放

缺點:

Bug很難被調試: 因為使?雙向綁定的模式，當你看到界?異常了，有可能是你View的程式碼有Bug，也可能是Model的程式碼有問題。資料綁定使得?個位置的Bug被快速傳遞到別的位置，要定位原始出問題的地?就變得不那麼容易了。另外，資料綁定的宣告是指令式地寫在View的模版當中的，這些內容是沒辦法去打斷點debug的
?個?的模組中model也會很?，雖然使??便了也很容易保證了資料的?致性，當時?期持有，不釋放內存就造成了花費更多的內存
對於?型的圖形應?程序，視圖狀態(tài)較多，ViewModel的建置與維護的成本都會?較?。

Vue data 中某一個屬性的值改變後，視圖會立即同步執(zhí)行重新渲染嗎？

不會立即同步執(zhí)行重新渲染。 Vue 實作響應式並不是資料變更後 DOM 立即變化，而是依照一定的策略進行 DOM 的更新。 Vue 在更新 DOM 時是非同步執(zhí)行的。只要偵聽到資料變化， Vue 將開啟一個佇列，並緩衝在同一事件循環(huán)中發(fā)生的所有資料變更。

如果同一個watcher被多次觸發(fā)，只會被推入到佇列中一次。這種在緩衝時去除重複資料對於避免不必要的計算和 DOM 操作是非常重要的。然後，在下一個的事件循環(huán)tick中，Vue 刷新佇列並執(zhí)行實際（已去重的）工作。

diff演算法

時間複雜度： 個樹的完全diff 演算法是一個時間複雜度為O(n*3） ，vue進行最佳化轉換成O(n) 。

理解：

最小量更新， key 很重要。這個可以是這個節(jié)點的唯一標識，告訴diff 演算法，在更改前後它們是同一個DOM節(jié)點
- 擴展v-for 為什麼要有key ，沒有key 會暴力復用，舉例子的話隨便說一個比如移動節(jié)點或增加節(jié)點（修改DOM），加key 只會移動減少操作DOM。
只有是同一個虛擬節(jié)點才會進行精細化比較，否則就是暴力刪除舊的，插入新的。
只進行同層比較，不會進行跨層比較。

diff演算法的最佳化策略：四個命中查找，四個指標

舊前與新前（先比開頭，後插入和刪除節(jié)點的這種情況）
舊後與新後（比結尾，前插入或刪除的情況）
舊前與新後（頭與尾比，此種發(fā)生了，涉及移動節(jié)點，那麼新前指向的節(jié)點，移動到舊後之後）
舊後與新前（尾與頭比，此種發(fā)生了，涉及移動節(jié)點，那麼新前指向的節(jié)點，移動到舊前之前）

--- 問完上面這些如果都能很清楚的話，基本O了---

以下的這些簡單的概念，你肯定也是沒有問題的啦?

Vue的優(yōu)點

#輕量級框架：只專注於視圖層，是一個建構資料的視圖集合，大小只有幾十kb ；
簡單易學：國人開發(fā)，中文文檔，不存在語言障礙，易於理解和學習；
雙向資料綁定：保留了angular 的特點，在資料操作方面更為簡單；
元件化：保留了react 的優(yōu)點，實作了html 的封裝和重用，在構建單頁應用方面有著獨特的優(yōu)勢；
視圖，數據，結構分離：使數據的更改更為簡單，不需要進行邏輯代碼的修改，只需要操作數據就能完成相關操作；
虛擬DOM：dom 操作是非常耗費效能的，不再使用原生的dom 操作節(jié)點，極大解放dom 操作，但具體操作的還是dom 不過是換了另一種方式；
運行速度更快：相比較於react 而言，同樣是操作虛擬dom，就效能而言， vue 存在很大的優(yōu)勢。

vue-router 路由鉤子函數是什麼執(zhí)行順序是什麼

路由鉤子的執(zhí)行流程, 鉤子函數種類有:全域守衛(wèi)、路由守衛(wèi)、元件守衛(wèi)

完整的導航解析流程:

#導航被觸發(fā)。
在失活的元件裡呼叫 beforeRouteLeave 守衛(wèi)。
呼叫全域的 beforeEach 守衛(wèi)。
在重複使用的元件裡呼叫 beforeRouteUpdate 守衛(wèi) (2.2 )。
在路由配置裡呼叫 beforeEnter。
解析非同步路由元件。
在被啟動的元件裡呼叫 beforeRouteEnter。
呼叫全域的 beforeResolve 守衛(wèi) (2.5 )。
導航被確認。
呼叫全域的 afterEach 鉤子。
觸發(fā) DOM 更新。
調用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調函數，創(chuàng)建好的組件實例會作為回調函數的參數傳入。

Vue.js的template編譯

簡而言之，就是先轉化成AST樹，再得到的render函數返回VNode（Vue的虛擬DOM節(jié)點），詳細步驟如下：

首先，通過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即源代碼的抽象語法結構的樹狀表現形式），compile是createCompiler的返回值，createCompiler是用以創(chuàng)建編譯器的。另外compile還負責合并option。

然后，AST會經過generate（將AST語法樹轉化成render funtion字符串的過程）得到render函數，render的返回值是VNode，VNode是Vue的虛擬DOM節(jié)點，里面有（標簽名、子節(jié)點、文本等等）

$nextTick 是什么？

Vue 實現響應式并不是在數據發(fā)生后立即更新 DOM，使用 vm.$nextTick 是在下次 DOM 更新循環(huán)結束之后立即執(zhí)行延遲回調。在修改數據之后使用，則可以在回調中獲取更新后的 DOM。

說說Vue的生命周期吧

什么時候被調用？

beforeCreate ：實例初始化之后，數據觀測之前調用
created：實例創(chuàng)建萬之后調用。實例完成：數據觀測、屬性和方法的運算、 watch/event 事件回調。無 $el .
beforeMount：在掛載之前調用，相關 render 函數首次被調用
mounted：了被新創(chuàng)建的vm.$el替換，并掛載到實例上去之后調用改鉤子。
beforeUpdate：數據更新前調用，發(fā)生在虛擬DOM重新渲染和打補丁，在這之后會調用改鉤子。
updated：由于數據更改導致的虛擬DOM重新渲染和打補丁，在這之后會調用改鉤子。
beforeDestroy：實例銷毀前調用，實例仍然可用。
destroyed：實例銷毀之后調用，調用后，Vue實例指示的所有東西都會解綁，所有事件監(jiān)聽器和所有子實例都會被移除

每個生命周期內部可以做什么？

created：實例已經創(chuàng)建完成，因為他是最早觸發(fā)的，所以可以進行一些數據、資源的請求。
mounted：實例已經掛載完成，可以進行一些DOM操作。
beforeUpdate：可以在這個鉤子中進一步的更改狀態(tài)，不會觸發(fā)重渲染。
updated：可以執(zhí)行依賴于DOM的操作，但是要避免更改狀態(tài)，可能會導致更新無線循環(huán)。
destroyed：可以執(zhí)行一些優(yōu)化操作，清空計時器，解除綁定事件。

ajax放在哪個生命周期？：一般放在 mounted 中，保證邏輯統(tǒng)一性，因為生命周期是同步執(zhí)行的， ajax 是異步執(zhí)行的。單數服務端渲染 ssr 同一放在 created 中，因為服務端渲染不支持 mounted 方法。 什么時候使用beforeDestroy？：當前頁面使用 $on ，需要解綁事件。清楚定時器。解除事件綁定， scroll mousemove 。

Vue 怎么用 vm.$set() 解決對象新增屬性不能響應的問題？

受現代 JavaScript 的限制，Vue 無法檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉化，所以屬性必須在 data 對象上存在才能讓 Vue 將它轉換為響應式的。但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 來實現為對象添加響應式屬性，那框架本身是如何實現的呢？

我們查看對應的 Vue 源碼：vue/src/core/instance/index.js

export?function?set?(target:?Array<any>?|?Object,?key:?any,?val:?any):?any?{
??//?target?為數組??
??if?(Array.isArray(target)?&&?isValidArrayIndex(key))?{
????//?修改數組的長度,?避免索引>數組長度導致splcie()執(zhí)行有誤
????target.length?=?Math.max(target.length,?key)
????//?利用數組的splice變異方法觸發(fā)響應式??
????target.splice(key,?1,?val)
????return?val
??}
??//?key?已經存在，直接修改屬性值??
??if?(key?in?target?&&?!(key?in?Object.prototype))?{
????target[key]?=?val
????return?val
??}
??const?ob?=?(target:?any).__ob__
??//?target?本身就不是響應式數據,?直接賦值
??if?(!ob)?{
????target[key]?=?val
????return?val
??}
??//?對屬性進行響應式處理
??defineReactive(ob.value,?key,?val)
??ob.dep.notify()
??return?val
}

我們閱讀以上源碼可知，vm.$set 的實現原理是：

如果目標是數組，直接使用數組的 splice 方法觸發(fā)相應式；
如果目標是對象，會先判讀屬性是否存在、對象是否是響應式，最終如果要對屬性進行響應式處理，則是通過調用 defineReactive 方法進行響應式處理（ defineReactive 方法就是 Vue 在初始化對象時，給對象屬性采用 Object.defineProperty 動態(tài)添加 getter 和 setter 的功能所調用的方法）

（學習視頻分享：web前端開發(fā)、編程基礎視頻）

以上是2023年vue高頻面試題分享（附答案分析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發(fā)現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn