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