Vue2怎么实现响应式原理的？前端面试必知必会100题（八股文汇总）第1题

前言

今年的就业行情不容乐观，随着一线互联网大厂的裁员潮不断涌来，流入社会的专业人士越来越多，这便导致互联网行业的就业压力和竞争越来越大，为了让各位开发者拥有更强的竞争力，这里小编把曾经总结的一些必知必会八股文分享出来，希望大家能找到心仪的工作！亲测，打遍中小厂无敌手，面试通过率高达90%~

第1题：Vue2怎么实现响应式原理的？

（主要讲的是数据双向绑定）
核心点：Object.defineProperty() 接收3个参数

defineProperty是设置对象属性，利用属性里的set和get实现了响应式双向绑定;
·
语法:Object.defineProperty(要设置的对象,要修改的对象的属性,属性描述)
·
属性描述:
1、configurable - 表示此属性能否被delete，默认false;
2、enumerable - 表示此属性能否被枚举，默认为false;
3、value - 设置此属性对应的值，默认为undefined;
4、writable - 设置value属性能否被修改值，为true时方可被改变，默认为false;
5、get - 给属性提供getter方法，默认为undefined，访问该属性时，该方法会被执行，默认参数为this 对象;
6、set - 给属性提供setter方法，默认为undefined，属性值修改时，会执行该方法，唯一参数为新的 值;

初始化时，对data对象进行遍历，用defineProperty重新定义所有属性，当页面取到对应属性时，进行 依赖收集Dep，收集当前组件的watcher,如果属性发生变化，通知相关的依赖进行更新操作update。

总结:
数据劫持结合发布者-订阅者模式的方式来实现数据的响应式。

vue在初始化的时候:在initState方法中会调取initData方法初始化data数据，对data对象进行遍历， 在这个方法中会调observe(监听器，观察者)对用户的数据进行监听，在observe中会对对象new Observe实例化创建监听，在observe中对数据进行判断:

如果是数组执行observeArray深度进行监听，继续执行observe方法，如果当前传入的是对象则执行 this.walk，对对象进行循环，重新定义对象的属性，这时使用的就是defineReactive，它是vue中的一个 核心方法，用来定义响应式。在defineReactive方法中实例化了一个Dep(发布者)，通过 Object.defineProperty对数据进行拦截，把这些 property 全部转为 getter/setter。get数据的时候，通 过dep.depend触发Watcher(订阅者)的依赖收集，收集订阅者。

如果数据是数组，执行dependArray，对数组中的每个值通过depend都添加到依赖。set时，会对数据 进行比较，如果数据发生了变化会通过dep.notify发布通知，通知watcher，更新视图。

vue源代码路径:src/core/instance/state.js src/core/observe/index.js

更多题目：后续不断更新中～可前往个人主页查看