JS问题整理与思考--vue 的整个实现流程

vue 的整个实现流程

  • 第一步:解析模版成render函数
  • 第二步:响应式开始监听
  • 第三步:首次渲染,显示页面,且绑定依赖
  • 第四步:data属性变化,触发rerender

第一步:解析模版成render函数

  • with的用法(不要用,问题比较多)
  • 模版中所有信息都被render函数包含
  • 模版中用到的data中的属性,都变成了JS变量
  • 模版中v-model,v-for,v-on都变成了JS逻辑
  • render 函数返回vnode

第二步:响应式开始监听

  • Object.defineProperty
  • 将data的属性代理到vm上

第三步:首次渲染,显示页面,且绑定依赖

  • 初次渲染,执行updateComponent,执行vm.render()
  • 执行render函数,回访问到vm.list和vm.title
  • 会被响应式的get方法监听到(为什么要get,是因为set方法只监听get过的属性,节省性能)
  • 执行updateComponent,会走到vdom的path方法
  • patch将vnode渲染成DOM,初次渲染完成

第四步:data属性变化,触发rerender

  • 修改属性,被响应式的set监听到
  • set中执行updateCoponent
  • updateComponent重新执行vm._render()
  • 生成vnode和prevVnode,通过patch进行对比
  • 渲染到html中

随机浏览