vue中响应式实现原理

vue中响应式实现原理

所谓响应式布局，主要做的就是两件事：

1. 如何监听属性发生改变
2. 当得知属性发生改变时，如何通知所有使用该属性的页面发生改变

当我们使用vue框架开发我们的前端页面时，我们最常做的两步就是绑定元素和定义属性`

const el = new Vue{
      el:'#app',
      data:{
              message:"hello",
      }
}

如上图所示样式，仅仅简单的几句，但是在编码的过程中，你是否考虑过如何实现响应式原理的呢？下面我们一起来一探究竟：

• 当我们写好上面的几行代码后，vue在后台给我们做的事情是很多的，这主要分为两条主线。首先，el属性会由vue内部的complied类来进行编译，随后将编译完成的view进行展示。第二条主线是observe对象在vue内部对data数据的操作。

• 我们首先来看第一条主线操作：当vue接收到传入的el属性元素时，会首先根据document中的根据属性获取标签操作获取标签，然后将标签渲染初始化到页面上形成view展示给我们，这也是我们看到的初始页面。

• 第二条主线主要就是监听数据变化，并且对属性做出响应式改变。当data传入时，vue会利用object.key().foreach函数对其进行遍历，对里面每一个变量都进行重新绑定，这主要由defineproperty函数完成。在该函数内部包含有set方法和get方法。其中我们可以在set方法内监听到事件改变，在get方法内获取有哪些页面元素调用我们的这个属性，我们的Den类中定义一个add方法，有对象访问我们这个属性，就将该访问对象保存到列表中，来让我们到时候更新属性值使用。下面是详细过程：

  • （1）当属性发生改变时，我们就可以在set方法内监听到，为每一个属性都创建一个Den对象，里面还定义第二个方法—update方法，我们可以调用这个方法，去替我们更新所有用到该属性的页面
  • （2) 在该方法内我们就遍历刚刚我们通过add方法添加的列表，将列表内的元素都取出来遍历，然后调用watch观察者对象中的update方法，去更新自身属性值。其中我们在列表中保存的访问该属性的对象就是观察者类对象，观察者类是页面解析获取标签后的封装类。

  至此，vue内部便实现了从监听属性值变化到去页面寻找属性值进行修正的整个过程。如果有什么没看明白的或者错误理解，可以留言交流啊。