2023前端面试题汇总(vue+html5+css3+js)

1.vue2响应式原理/数据绑定的原理

vue会遍历data中所有的属性,并通过object.defindepropty来给每个属性加上getter和setter。

    getter和setter使vue能够追踪依赖,在属性被修改时通知变化。

    每个组件实例都会有一个自身的watcher实例,他会把组件渲染时用到的属性记录为依赖,当依赖的数据发生变化时,会通知watcher,

    从而他关联的组件都会更新。

    Vue实现响应式数据的原理主要是通过数据劫持(Data observation)和发布-订阅模式(发布-订阅模式)相结合的方式来实现的。

    当我们在Vue中定义一个data对象时,Vue会对这个对象进行遍历,把每个属性都通过Object.defineProperty()方法转换成getter和setter,并注入到Vue实例中的$data中,也就是实现了对属性的改变监控。这样,当我们改变data中的数据时,setter方法会被触发,同时也会通知Watcher对象,Watcher会通知组件,组件会更新视图。

    而发布-订阅模式主要是通过Dep类来实现的。在getter中,Vue会实例化一个Dep对象,用于收集Watcher对象,当该属性被修改时,会通知Dep中所有的Watcher对象执行更新操作。而在setter中,当属性被改变时,会通知Dep中所有的Watcher对象执行更新操作。

    总结一下,Vue实现响应式数据的原理主要是通过Object.defineProperty()方法实现数据劫持,同时通过Dep类和Watcher对象实现发布-订阅模式࿰

猜你喜欢

转载自blog.csdn.net/weixin_49662044/article/details/130062511