vue面試總結3
摘要：
寫 React / Vue 專案時為什麼要在元件中寫 key，其作用是什麼
第一題：key的作用是為了在diff演算法執行時更快的找到對應的節點，提高diff速度。
另一種方式實現vue的響應式原理
Proxy在目標物件之前架設一層“攔截”，外界對該物件的訪問都必須...
寫 React / Vue 專案時為什麼要在元件中寫 key，其作用是什麼
第一題：key的作用是為了在diff演算法執行時更快的找到對應的節點，提高diff速度。
另一種方式實現vue的響應式原理
Proxy在目標物件之前架設一層“攔截”，外界對該物件的訪問都必須先通過這層攔截，因此提供一種機制，可以對外界的訪問進行過濾和改寫。
<input type="text" id="txt" />
<div id="show"></div>
<script type="text/javascript">
var inp = document.getElementById('txt');
var show = document.getElementById('show')
var obj = {}
var objKey = 'text'; // 將鍵儲存起來
// Object.defineProperty
Object.defineProperty(obj, objKey, {
get: function(){
return obj[objKey];
},
set: function(newVal){
show.innerHTML = newVal
}
})
inp.addEventListener('keyup', function(e){
obj[objKey] = e.target.value
})
// proxy的實現
const newObj = new Proxy(obj, {
get: function(target, key, receiver){
return Reflect.get(target, key, receiver);
},
set: function(target, key, value,receiver){
if(key === objKey){
show.innerHTML = value
}
}
})
inp.addEventListener('keyup',function(e){
newObj[objKey] = e.target.value;
})
Object.defineProperty的缺點：
1.不能檢測到增加或刪除的屬性
2.陣列方面的變動，如根據索引改變元素，以及直接改變陣列長度時的變化，不能被檢測到。
Axios的封裝
https://juejin.im/post/5b55c1...