• Vue.js 运行机制全局概览浅读


    前一段时间看了一下笔者写的这个,写的还是很好地,记录一下。

    1.总体流程

    初始化及挂载 

    new Vue() 之后。 Vue 会调用 _init 函数进行初始化,也就是这里的 init 过程,它会初始化生命周
    期、事件、 props、 methods、 data、 computed 与 watch 等。其中重要的是通过
    Object.defineProperty 设置 settergetter 函数,用来实现「 响应式」以及「 依赖收集」。

    初始化之后调用 $mount 会挂载组件,如果是运行时编译,即不存在 render function 但是存在
    template 的情况,需要进行「 编译」步骤。

    编译 

    compile编译可以分成 parseoptimizegenerate 三个阶段,终需要得到 render function。 

    parse:用正则解析template模板中的指令、class、style等数据,形成AST(抽象语法树)。

    optimize :用来标记静态节点,将来更新视图的时候,通过diff算法会跳过静态节点,达到优化的一个目的。

    generate:将AST转化成render function字符串,得到结果是 render 的字符串以及 staticRenderFns 字符串。

    响应式

    当 render function 被渲染的时候,因为会读取所需对象的值,所以会触发 getter 函数进行「 依赖收
    集」,「 依赖收集」的目的是将观察者 Watcher 对象存放到当前闭包中的订阅者 Dep 的 subs 中。

    形成如下所示的这样一个关系。

    在修改对象的值的时候,会触发对应的 setter, setter 通知之前「 依赖收集」得到的 Dep 中的每一个
    Watcher,告诉它们自己的值改变了,需要重新渲染视图。这时候这些 Watcher 就会开始调用 update 来
    更新视图。

    Virtual DOM

    Virtual DOM 其实就是一棵以 JavaScript 对
    象( VNode 节点)作为基础的树,用对象属性来描述节点,实际上它只是一层对真实 DOM 的抽象。

    更新视图 

    patch()方法对比新VNode和旧VNode,通过diff算法得到差异,进行对应修改。

    https://www.666ss.club/blog

  • 相关阅读:
    python3----数据结构
    Java的同步容器和并发容器
    Java基础——IO
    JVM(2)——GC算法和收集器
    Java集合(2)——深入理解ArrayList、Vector和LinkedList
    java线程(7)——阻塞队列BlockingQueue
    JVM(1)——简介
    java泛型——基本使用
    java线程(6)——线程池(下)
    java线程(5)——线程池(上)
  • 原文地址:https://www.cnblogs.com/sxdjy/p/10365548.html
Copyright © 2020-2023  润新知