【面试】Vue数据响应式原理(以面试者的角度回答)-普通版和面试版

掘金同人账号：🍧summer holiday,不定时发送【对标大厂的必会面试题】、【必会常用算法】、【必会高并发解决】、【优化】等专题栏目供大家学习观看

简易版

vue将组件中的模板通过AST生成render函数，生成render函数时，vue会将这个组件中所有的data中的数据进行深度遍历然后将每个属性通过Objcet.definProperty()定义成访问器属性，在vue中还有一个用来记录这些被依赖的值的对象叫做watcher，当我们getter时vue会去watcher拿到数据并返回，当我们setter时，它会去通知watcher我们这个值变了，然后新值是什么，watcher接到通知修改值后，会去通过重新调用组件的render函数，组件的render函数会根据watcher的数据进行生成new vutrue DOM tree（新虚拟dom树），然后vue丢掉旧的虚拟dom树，将新的虚拟dom树替换上去，然后虚拟dom树生成相对应的真实dom，最终页面重新渲染完成，当然了vue只会替换掉更改了的那部分虚拟dom树，其他的虚拟dom树不会变，所以vue的效率比直接更改真实dom的效率高

详细版

在vue响应式原理中拥有这么几个对象做事：

1. Observer
2. Dependency
3. Wathcer
4. Scheduler

首先，vue会将当前组件中的data需要响应式的数据拿到，对data进行深度遍历，然后会调用Observer将所有的属性通过Object.defineProperty将属性定义成访问器属性，然后当遇到属性，对象本身，数组本身(包括数组内部的对象)时会生成Dependency在这个访问器属性中，当我们这个数据变化时Dependency会去通知与这个属性相绑定的函数们，那么它是怎么记录这些相绑定的函数们呢？这时候vue响应式底层的watcher就出来了，他其实就是vue实例上的$watch，它会在我们render即将运行时在全局挂上一个对象，然后render运行时依赖到的函数就将它们加入到这个watcher中，一个组件至少会生成一个$watcher因为他们都会有一个函数就是render，然后当render执行完后这个全局变量也就完事了，vue会将他放在$watch中，然后当我们属性改变时dep会去通知watcher调用这些函数，可是如果我们这些函数里面拥有很多的操作要改，那不是我更改一个就要创建一个新的vutrueDOMtree，然后去渲染一次页面，那可想而知，这个渲染频率的效率一定不会高，所以watcher会将他想要执行的函数们告诉Scheduler，Scheduler做什么呢？它会将这些需要改变的操作放在一个队列中，然后当这些函数执行完后也就是同步JS代码（注意这些函数其实是执行了的，他们的操作并没有直接引用，所以我们上面说成没有执行函数）执行完后，Scheduler也记录完了我们这个函数需要更改的内容，然后Scheduler会去判断当前浏览器版本是否支持微队列，如果支持会将其放在微队列中去异步执行，而如果不支持则放在宏队列中也就是使用setTimeout，去异步执行，放入进去后因为同步JS代码都执行完毕了，所以浏览器就会去看微队列里面有没有东西，然后发现里面有Scheduler加入的东西，于是浏览器就去执行这些操作，然后render也在里面运行render生成新的vutrueDOMtree，拿到与其对应得旧虚拟dom树，替换掉，然后虚拟dom会生成对应得真实dom从次完成页面重新渲染，然后完成响应式变化，他只会替换相对应得部分虚拟dom树，并不会是全部，所以只需要修改一小部分因此效率比直接修改真实dom得高，以上就是vue得响应式底层原理，谢谢