【面试题】今日面试题整理== 数据响应式原理

数据响应式原理

• 数据变了，视图跟着变
• 把data中的所有数据通过Object.defineProperty方法进行数据劫持结合观察者模式，实现数据响应式

---

1、对data中的数据进行递归遍历出来使用Object.defineProperty，使用get读取到里面的数据，将每一个转换后的属性创建一个Dep被观察者,

2、对模板中的属性进行编译使用compiler方法提取出来，变成一个watcher（观察者），加入到对应的dep队列中

3、当data中的数据发生变化时，由于数据被劫持了，vue内部是知道的，就会调用对应的dep(被观察者)去通知观察者列表中所有的 watcher

4、观察者得到消息就会去更新视图

---

常会被提问的点：

1.data中数据改变了为什么vue会知道？

• 答：这是由于数据被劫持了

2. 数据变了一个,为什么组件中一堆用到这个数据的地方全变了?

• 答：用到了观察者模式，这是一对多的关系

3.为什么数据必须在data中初始化,后添加的为什么不是响应式 ？

• 答：因为只有在初始化的时候对data中的数据使用了Object.defineProperty，进行数据劫持，全部转换，所以后添加的就不是响应式的 ，错过了转化的时机

4.为什么数组的索引不是响应式的？

• 答：Vue官方出于对性能的考虑，所以没有对数组进行转换
• 数组想要实现响应式，也可以使用pop()，push()，shift()，unshift(),splice(),sort()；reverse()；或者this.$set（）方法

---