林某人_

先来个例子 假如我们有个按钮，里面循环了100次，更改了count的值，会发生什么？ 会触发100次的effect。。如果页面复杂了，浏览器就得被玩坏了！ Vue3的视图更新，其实是异步的！不会多次触

例子 查看例子 实现 新增$props 例子中用了this.$props.xx，但是目前我们没有this.$props，我们把新增一个$props对象 componentPublicInstanceP

例子 参考ArrayToArray.js中的 5.2、5.2.2例子 思考 其实我们已经做了首部、尾部对比，并且做了中间对比替换了，但是目前的代码存在性能上的问题 中间乱序部分会全部进行重排 乱序重排

例子 参考ArrayToArray.js中的 5.1、5.1.1例子 实现 主要3个部分 提取新数据的key，旧数据遍历时，用来提取对应key的数据 遍历旧数据，找到与旧数据key对应的新数据，赋值给

对比情况 array -> array 新旧左侧对比，取出差异数据下标 新旧右侧对比，锁定右侧差异位置 新旧数据对比，新增少删 例子 参考 上一篇 中的 ArrayToArray.js 前导思考 Vu

更新对比 children更新主要考虑一下3种情况，其中array->array是最复杂的，这章节先做其他两种情况 text -> array array -> array array -> text

来个案例 实现 更新props 更新props时候主要考虑2种情况 更新 删除 render.ts runtime-dom/index.ts

思考 Vue的 setup函数可以接收 props，并且能通过this.xx获取props的数据 setup可以接收props render可以通过this.xx获取props的数据 props是只读

思考 如何触发侦听收集？ 如何判断是初始化或者是更新？ 基于这两点，逐步实现element更新流程 先来个例子 记得把相关函数暴露出来 依赖收集 在写ref、reative的时候，已经用effect做