前端猎手
哈喽，大家好
我是法医
快来和法医一起看看
今天的前端每日一题吧
10月19日~面试题：
10月18日~参考答案：
Vue3.x 响应式数据原理
这个问题的回答，可以从以下方面进行：
- Vue3.x 响应式数据原理是什么？
- Proxy 只会代理对象的第一层，那么 Vue3 又是怎样处理这个问题的呢？
- 监测数组的时候可能触发多次 get/set，那么如何防止触发多次呢？
参考答案：
- Vue3.x 响应式数据原理是什么？
在 Vue 2 中，响应式原理就是使用的 Object.defineProperty 来实现的。但是在 Vue 3.0 中采用了 Proxy，抛弃了 Object.defineProperty 方法。
究其原因，主要是以下几点：
- Object.defineProperty 无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应
- Object.defineProperty 只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。Proxy 可以劫持整个对象，并返回一个新的对象。
- Proxy 不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。
- Proxy 有多达 13 种拦截方法
- Proxy作为新标准将受到浏览器厂商重点持续的性能优化
- Proxy 只会代理对象的第一层，那么 Vue3 又是怎样处理这个问题的呢？
判断当前 Reflect.get 的返回值是否为 Object，如果是则再通过 reactive 方法做代理， 这样就实现了深度观测。
- 监测数组的时候可能触发多次 get/set，那么如何防止触发多次呢？
我们可以判断 key 是否为当前被代理对象 target 自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行 trigger。
每天都会有一道面试题，大家的积极参与和讨论，是我继续下去的动力，希望大家踊跃互动，共同进步！保持学习，每天进步一点点！
大家可以将自己的想法在评论区留言，答案我会在明天每日一题中公布！
