基本流程:数据改变-->虚拟DOM(计算变更)-->操作真实DOM-->视图更新
Diff算法:
当数据发生改变时,set
方法会调用Dep.notify
通知所有订阅者Watcher
,订阅者就会调用patch
给真实的DOM
打补丁,更新相应的视图
先遍历老节点,再遍历新节点,比较只会在同层级进行, 不会跨层级比较
1,了解节点对象:
{sel(选择器,div),data(样式),childre()||text(),elm(对应的真实DOM元素),key}
2,path函数:
1)使用场景:
1页面首次渲染的时候执行,把vnode渲染到空的容器中 path(container,vnode)
2数据更新时,新节点替换老节点 path(vnode,newnode)
2)函数具体内容:
1第一个参数不是vnode类型,初始化状态,全部新建DOM元素
2,是vnode类型,调用samvnode函数(比较传入的两个节点的key和sel)
相同:调用pathVnode函数
不相同:通过createElm创建DOM元素,插入新的DOM元素,删除老的DOM元素
3,pathVnode函数(当key和sel相同的时候调用)
1)函数主要内容:
对比两个节点的children或者(text),如果相同,直接返回,如果不同,一切以新的vnode为准
1,新vnode有children,旧的需要删除原来的text,添加新的children,或者更新children
2,新vnode有text,旧的需要删除原来的children,添加新的text,或者更新text
3,新老vnode 都有children ,更新children的时候需要用updateChildren
4,UpdateChildren函数:
1,新节点的start与旧节点的start比较,,新节点的start与旧节点的end比较,新节点的end与旧节点的start比较,,新节点的end与旧节点的end比较,(start++,end--)
2,如果相同,调用pathVnode函数
3,如果都不相同:拿到新节点中第一个孩子的key,与老节点的所有孩子的key比较,找不到,直接创建DOM元素,找到了(key相等)再比较sel,如果sel不相等,创建DOM元素,如果sel相等,递归调用pathVnode函数