写 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 实现