cwjxyp的博客

处理方法：直接将多余的老dom元素删除即可；处理方法：直接将新的儿子节点放入对应的老节点中即可；处理方法：执行diff比对，即：乱序比对；针对情况 3 新老儿子节点的比对，采用了“头尾双指针”的方法优先对新老儿子节点的“头头、尾尾、头尾、尾头”节点进行比对，若均未能命中，最后再执行乱序比对；

一般节点没有key值，标签相同既可以复用，当标签相同不希望复用时可以使用key属性对节点进行标记，key值不相同，即使标签名相同的两个元素，也不会进行复用。比对前，针对于【情况 1】“老的有儿子，新的没有儿子”和【情况 2】“老的没有儿子，新的有儿子”这两种特殊情况，优先进行了特殊处理；的属性值为字符串类型，不能直接进行替换，需要对样式属性进行收集，再进行比较和更新；当以上两种情况均不满足，即【情况 3】新老节点都有儿子时，就必须进行。是一个树型结构,diff算法是将新、老两个虚拟节点树进行比对。

Vue流程图：2.初始化与更新流程分析Vue的初始化流程，在挂载时会调用mountComponent方法：在mountComponent方法中，会创建渲染watcher：当数据更新时，会进入defineProperty的set方法：此时，就会调用dep.notify()，通知对应watcher执行update方法更新视图：在Watcher类的update方法中，调用了queueWatcher方法，对watcher进行了查重并缓存：flushschedulerQueue方法执行时，会调用wat

观测一个响应式数据，当数据发生变化时通知并执行相应的回调函数。这个属性即可深度监听对象数据；如果你想在页面进来时就执行。watch有多重形式，可能是字符串、函数、数组。还可以支持字符串的写法。值得注意的是，设置了。在监听对象变化的时候，加上。是否是对象，如果是对象将。是一个字符串的话，会从。实例找到这个方法赋值给。这个属性，再将对象的。从这里我们也能看出来，

实现computed多次取值只执行一次get方法：dirty初始值为true，在取值方法中设置为false，将返回值放到watcher上，后续取值判断dirty为false，则直接取watcher上的值。渲染watcher中包含多个计算属性watcher，计算属性里又依赖了多个属性，更新引用的属性值，每个属性有自己的dep，会收集watcher，收集到的就是计算属性watcher。脏值dirty刚刚开始为true，修改计算属性依赖的属性，只会引起dirty的变化，并不会重新渲染视图。