面试官：请你简单的说说什么是Vue的响应式。

小明：mvvm就是视图模型模型视图，只有数据改变视图就会同时更新。

面试官：说的很好，回去等通知吧。

小明：....

Vue响应式原理

先看官方的说法

简单理解就是实例data，Vue通过遍历data中所有对象通过Observer劫持监听所以属性，然后数据一旦发生变化，就通知编译解析变化，更新视图。

首先创建一个data，需要将data变成响应式数据，创建Observer 函数传值data，如果data不是一个对象或者是空就不用处理直接return

 <script>function Observer(targer){if(typeof targer !== 'object' || targer ===null){return targer}}const data = {name:'海海',age:18,info:{address:'广州'},fava:[1,2,3,4,5]}Observer(data)</script>

其他的处理

这里只处理数组，其他

判断是否等于数组，如果等于，如果不等于就循环target，声明响应式函数 defineReactive

传值targer，循环的key和targer[key],然后在 defineReactive调用我们的 Object.defineProperty

 function Observer(targer){if(typeof targer !== 'object' || targer ===null){return targer}if(Array.isArray(targer)) {// 数组}else{for(let key in targer){// 响应式数据的函数defineReactive(targer,key,targer[key])}}}

`Object.defineProperty`

（Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。）

传入我们的参数

拿到get set方法

get

初始值直接return 我们的value

set

第一个参数是最新的值 newValue

判断如果我们传入的value和newValue不相等，那么就把newValue赋值给value

        function defineReactive(targer,key,value){Object.defineProperty(targer,key,{get(){return value},set(newValue){if(newValue !== value) {value =newValue}}})}

那么问题又来了，如果是一个对象需要监听，我们刚刚的操作只监听到了第一层，如果监听的内容是上面的info就相当于监听了整个对象，答案也很简单，我们只需要在调用defineReactive的时候在调用一次Observer在进入一次循环，当不是object就自动结束了

        function defineReactive(targer,key,value){Observer(value)Object.defineProperty(targer,key,{get(){return value},set(newValue){if(newValue !== value) {value =newValue}}})}

视图更新

我们这里在模仿一下视图更新定义函数 updataView

        function updataView(){console.log('视图更新了')}

调用

显示视图更新。

数组

先定义一个值 oldArrayProperty 然后将Array.prototype赋值给oldArrayProperty，

然后针对原型对象创建 Object.create()

定义一个 arrProto 来接收。

然后声明数组 ['push','pop','unshift','shift','reverse','sort','splice'] 进行循环

   const oldArrayProperty =Array.prototypeconst arrProto = Object.create(oldArrayProperty)const fn = ['push','pop','unshift','shift','reverse','sort','splice']fn.forEach((method)=>{arrProto[method] = function(){} })

然后调用更新视图 updataView return 将oldArrayProperty对应的方法匹配上return出来

        const oldArrayProperty =Array.prototypeconst arrProto = Object.create(oldArrayProperty)const fn = ['push','pop','unshift','shift','reverse','sort','splice']fn.forEach((method)=>{arrProto[method] = function(){updataView()return oldArrayProperty[method].call(this,...arguments)} })

然后回到Observer方法中，将arrProto赋值给 targer的__proto__原型链上，最后在将targer循环调用Observer，进行数据更新。

  if(Array.isArray(targer)) {// 数组targer.__proto__ =arrProtofor(let i=0;i<targer.length;i++) {Observer(targer[i])}}

测试

到这里我们的监听数据变化并自动更新就完成了。

完整代码

    <script>function defineReactive(targer,key,value){Observer(value)Object.defineProperty(targer,key,{get(){return value},set(newValue){if(newValue !== value) {value =newValueupdataView()}}})}const oldArrayProperty =Array.prototypeconst arrProto = Object.create(oldArrayProperty)const fn = ['push','pop','unshift','shift','reverse','sort','splice']fn.forEach((method)=>{arrProto[method] = function(){updataView()return oldArrayProperty[method].call(this,...arguments)} })function Observer(targer){if(typeof targer !== 'object' || targer ===null){return targer}if(Array.isArray(targer)) {// 数组targer.__proto__ =arrProtofor(let i=0;i<targer.length;i++) {Observer(targer[i])}}else{for(let key in targer){// 响应式数据的函数defineReactive(targer,key,targer[key])}}}function updataView(){console.log('视图更新了')}const data = {name:'海海',age:18,info:{address:'广州'},fava:[1,2,3,4,5]}Observer(data)</script>

如果你还有什么问题你可以选择↓↓↓

微信公众号搜索海海学前端 了解更多