Vue响应式原理

发表于 | 分类于 ，

vue运行过程

  • new Vue(),创建Vue实例化对象
  • vue初始化init,在这个过程中会初始化生命周期,执行beforeCreated,初始化data,props,computed,watcher,执行created
  • 初始化后,对vue实例进行挂载,如果没有render方法,定义了template,执行编译阶段,开始解析template,将template编译成render function
  • beforeMounted阶段将通过vue的render方法将生成虚拟DOM
  • mounted阶段,将虚拟DOM转化成真实的DOM文档,进行页面渲染,并完成数据双向绑定

什么是响应式

不直接操作dom,当数据改变时,通过监听更新到到视图上,当视图上的改变,比如某个事件的操作,也会反过来更新数据.

vue2.x响应式

  • 在vue初始化init阶段,初始化数据,创建一个数据源data,构建一个Observer(数据观察者)对象,该对象会调用defineReactive(defineReactive通过Object.defineProperty设置对象的key属性)拦截每个属性的getter,setter方法
  • 在触发render function阶段,将与vue实例中和视图相关的数据通过getter进行依赖收集,(依赖收集器中内置一个watcher的数据订阅者)
  • 当数据发生变化,会被Observer观察到,触发setter,然后有依赖收集器(Dep实例的notify)通知到watcher并通知视图进行变化

vue2.x响应式弊端

  • Object.defineProperty无法对属性进行响应式监听,所以如果对数组中某个索引进行修改,删除,新增等操作需要使用vue.set,vue.delete的方法
  • Object.defineProperty设置setter,getter时,如果对象嵌套对象,需要通过递归,不断的对对象实现监听