vue面試總結3

寫 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...

Vue computed 實現

diff 算法實現

Vue complier 實現