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。

  • 相关阅读:
    springmvc 处理静态资源
    springmvc jsp 获取 上下文
    springmvc 如何设置首页
    servlet-mapping url-pattern / 和 /*区别
    nginx支持php
    openresty 变量
    git tag用法
    python 导入模块,__init__.py 的作用
    python 转码问题
    python装饰器
  • 原文地址:https://www.cnblogs.com/mengfangui/p/10201698.html
Copyright © 2011-2022 走看看