共计 972 个字符，预计需要花费 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 实现
