掘金小册子
1、运行机制概览
如何尽享展示
如何处理用户输入
2、响应式系统的基本原理
Object.defined()
mvvm
3、响应式系统的依赖追踪原理
getter 的时候收集改动
setter 的时候 notify 所有的有关联的进行改动
4、实现 virtual dom 下的 VNode 节点
(1)什么是虚拟dom
虚拟: 不是真实的 dom tree 中node
是用 js 描述 dom 节点
(2)为什么要使用虚拟dom
dom 更新浏览器重绘
js 处理的效率高
能跨平台
(3)虚拟dom 的实现的原理
用js 对象来描述 树形结构
tag
prop
children
如何链接形成树形结构
children 属性
创建一个虚拟的node描述来追踪更新实际的dom
是一种数据-视图绑定解决方案
使用js 来描述dom 结构、
vue 是依赖追踪
(3)普通的dom tree 节点 node
createElement(tagName, , children)
(4)虚拟dom 有什么新特性
跨平台 不是真是的 dom ,可以根据平台使用对应平台的 api
(4)主要包含哪些技术点
Object.defined() getter 和 setter
diff
patch
next-tick 视图更新机制
5、template 模版是怎么通过 Compile 编译的
6、数据状态更新时的差异diff 和 patch 机制
7、批量异步更新策略及 netTick 原理
8、Vuex 状态管理的工作原理
Object.defined()为每一个属性设置了getter 和setter
Object.defined(data, ‘a’, {
set () {
},
get () {
}
})
实现对属性 a 的设置和获取操作。
在get 的是欧收集依赖,在设置的时候触发之前收集的依赖
const dep= []
Object.defined(data, ‘a’, {
set () { // 执行
dep.forEach(fn => fn())
},
get () {
dep.push(fn)
}
})
如何收集依赖
new Vue()
$mount
compile() –> parse optimize generate
render function –> watcher & vdom
初始化 _init 会初始化生命周期、事件、props、methods、data、computed、watch
通过 Object.defineProperty 设置 setter 和 getter 实现响应式和依赖收集
挂载
编译 分析(parse)-优化(optimize)-生成(generate)
parse 使用正则等方式解析template 模版中得指令、clas、style 等数据,形成ast (抽象语法树)
optimize
主要是标记京台节点 。当update 新界面的时候 会有一个patch 得过程。
diff 算法会直接跳过静态节点,减少比较过程,优化patch 性能
generate
将 ast 转化成 render function 字符串的过程
响应式
render function getter 依赖收集—-watcher