10.new Vue过程中做了什么

23 阅读1分钟
  • 内部会初始化组件绑定事件,初始化组件的父子关系$parent $children $root
  • 初始化响应式数据data、computed、props、watch、method,同时也初始化provide和inject方法,内部会对数据进行劫持,对象会采用defineProperty,数组重写七个方法
  • 再看一下用户是否传入el属性template或者renderrender的优先级更高,如果用户写的是template模板,会做模板编译三部曲,最终拿到render函数
  • 内部挂载会产生一个watcher,会调用render函数触发依赖收集,内部还会给所有的响应式数据增加dep属性,让属性记录当前的watcher,用户修改时触发watcher重新渲染
  • vue更新时会采用比对新旧虚拟dom的方式进行diff算法更新

lifecycle.png