vue工作原理分析
2024-08-20 08:53:40
初始化
在 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进行变化
最新文章
- sql中 truncate 、delete与drop区别
- windows service 1053错误 启动失败
- MFC学习笔记(一)
- 理解SQL Server是如何执行查询的 (1/3)
- mysql主从复制(超简单)
- mongoDB 使用手册
- 《Play for Java》学习笔记(五)Form
- linux记录登录ip方法
- java 集装箱 arraylist 用法
- 【转】CXF+Spring+Eclipse简明示例
- 解决 for xml path encode 的问题
- Myeclispe下struts-config.xml文件无法图形界面打开
- Web文件上传方法总结大全
- ROI-Align解决方案
- Android Studio开发实用网站收集
- GitHub 二次验证收不到短信咋办?
- PCB常见的拓扑结构 (转)
- Linux系统的优势
- tfrecord
- LightOJ 1137 - Expanding Rods 基础计算几何