前端每日一题(10.19题目+10.18答案)

我心飞翔 分类:vue

前端猎手

哈喽,大家好

我是法医

快来和法医一起看看

今天的前端每日一题吧

10月19日~面试题:

前端每日一题(10.19题目+10.18答案)

10月18日~参考答案:

Vue3.x 响应式数据原理

这个问题的回答,可以从以下方面进行:

  • Vue3.x 响应式数据原理是什么?
  • Proxy 只会代理对象的第一层,那么 Vue3 又是怎样处理这个问题的呢?
  • 监测数组的时候可能触发多次 get/set,那么如何防止触发多次呢?

参考答案:

  1. Vue3.x 响应式数据原理是什么?

在 Vue 2 中,响应式原理就是使用的 Object.defineProperty 来实现的。但是在 Vue 3.0 中采用了 Proxy,抛弃了 Object.defineProperty 方法。

究其原因,主要是以下几点:

  • Object.defineProperty 无法监控到数组下标的变化,导致通过数组下标添加元素,不能实时响应
  • Object.defineProperty 只能劫持对象的属性,从而需要对每个对象,每个属性进行遍历,如果,属性值是对象,还需要深度遍历。Proxy 可以劫持整个对象,并返回一个新的对象。
  • Proxy 不仅可以代理对象,还可以代理数组。还可以代理动态增加的属性。
  • Proxy 有多达 13 种拦截方法
  • Proxy作为新标准将受到浏览器厂商重点持续的性能优化
  1. Proxy 只会代理对象的第一层,那么 Vue3 又是怎样处理这个问题的呢?

判断当前 Reflect.get 的返回值是否为 Object,如果是则再通过 reactive 方法做代理, 这样就实现了深度观测。

  1. 监测数组的时候可能触发多次 get/set,那么如何防止触发多次呢?

我们可以判断 key 是否为当前被代理对象 target 自身属性,也可以判断旧值与新值是否相等,只有满足以上两个条件之一时,才有可能执行 trigger。

每天都会有一道面试题,大家的积极参与和讨论,是我继续下去的动力,希望大家踊跃互动,共同进步!保持学习,每天进步一点点!

大家可以将自己的想法在评论区留言,答案我会在明天每日一题中公布!

回复

我来回复
  • 暂无回复内容