Vue实现双向绑定的原理以及响应式数据的方法-创新互联

一、vue中的响应式属性

Vue中的数据实现响应式绑定

1、对象实现响应式：

是在初始化的时候利用definePrototype的定义set和get过滤器，在进行组件模板编译时实现water的监听搜集依赖项，当数据发生变化时在set中通过调用dep.notify进行发布通知，实现视图的更新。

2、数组实现响应式：

对于数组则是通过继承重写数组的方法splice、pop、push、shift、unshift、sort、reverse、等可以修改原数组的方式实现响应式的，但是通过length以及直接利用item[index]方式修改数组是不能实现响应式的改变dom（这种两种方式涉及到数组的内部实现）。在数据更新后为了避免过于频繁的进行dom的操作，在vue中会将更新的dom进行批量操作，而不是直接有数据更新就刷新dom，vue将需要更新的dom压入异步队列记性批量操作，提高性能。

下面具体的实现，实现原理大致如下：

对象中实现双向数据绑定，可以直接在浏览器查看效果：

 
 


 
 

  
  {{ text }}