zoukankan      html  css  js  c++  java
  • vue框架整体流程

    1、整体流程

    (1)模板解析成render函数

    (2)响应式监听

    (3)首次渲染,显示页面,绑定依赖

    (4)data属性变化,触发rerender

     

    2、模板解析为render函数

    参考上一篇博客。

    模板的所有信息都被render函数包含。

    模板中用到的data属性,都变成了js变量

    模板中的v-for等都变成了js逻辑

    render函数返回vnode

     

    3、响应式监听

    响应式监听主要使用的是:Object.defineProperty方法。

     

    4、首次渲染,显示页面,绑定依赖

    记住在首次渲染时,会收集依赖,只收集触发Object.defineProperty下get方法的属性,其他的不收集,避免重复渲染。

    主要使用的_update 方法。

    __patch__方法将vnode渲染为DOM,完成初次渲染。

    5、data属性变化触发重新渲染

    set监听到属性变化

    set中执行updateComponent

    updateComponent执行vm._render

    生成vnode和prevVnode,通过patch比对

    重新渲染dom,生成html。

  • 相关阅读:
    最长公共子序列(LCS)
    数组分割问题
    Trie树
    BitMap(比特位)
    KMP算法——字符串匹配
    排序算法
    概率问题
    【设计模式】——访问者模式
    【设计模式】——解释器模式
    【设计模式】——享元模式
  • 原文地址:https://www.cnblogs.com/mengfangui/p/10201698.html
Copyright © 2011-2022 走看看