zoukankan      html  css  js  c++  java
  • vue工作原理分析

    初始化

    在 new Vue() 时会调⽤用_init()进⾏行行初始化,会初始化各种实例例⽅方法、全局⽅方法、执⾏行行⼀一些⽣生命周期、

    初始化props、 data等状态。其中最重要的是data的「响应化」处理理。

    初始化之后调⽤用 $mount 挂载组件,主要执⾏行行编译和⾸首次更更新

    编译

    编译模块分为三个阶段

    1. parse:使⽤用正则解析template中的vue的指令(v-xxx) 变量量等等 形成抽象语法树AST

    2. optimize:标记⼀一些静态节点,⽤用作后⾯面的性能优化,在diff的时候直接略略过

    3. generate:把第⼀一部⽣生成的AST 转化为渲染函数 render function

    虚拟dom

    Virtual DOM 是react⾸首创, Vue2开始⽀支持,就是⽤用 JavaScript 对象来描述dom结构,数据修改的时

    候,我们先修改虚拟dom中的数据,然后数组做diff,最后再汇总所有的diff,⼒力力求做最少的dom操作,

    毕竟js⾥里里对⽐比很快,⽽而真实的dom操作太慢

    Vue的工作原理思路分析:

    1、 首先使用Object. defineProperty()的原理来实现劫持监听所有属性

    2、 每次在页面中使用一个属性就会产生一个watcher

    3、 而watcher是通过dep来管理的,相同的属性的实例在一个dep中统一管理

    4、 当其中一个属性变化的时候会通知dep变化,再通知dep中管理的对应的watcher进行变化

  • 相关阅读:
    KVM安装以及远程连接
    开博客祭
    CQOI 2021
    琐记——学长们
    大事祭
    关于洛谷与博客园的博客的一些声明
    CSP-S 2020 & NOIP 2020 日记与游记
    调和级数
    快速乘
    二叉堆
  • 原文地址:https://www.cnblogs.com/wyongz/p/11446770.html
Copyright © 2011-2022 走看看