共计 1065 个字符，预计需要花费 3 分钟才能阅读完成。
对于前端视图更新 前言
接到分享工作后始终比拟头疼，不晓得分享什么内容，可能把此次分享做的比拟好。起初偶尔在网上看到一篇文章，十分有启发性，疏导我做出了本次的内容
代码地址：（https://codepen.io/collection…
代码写的很精妙，短短一百多行代码，还原进去 VUE 响应式的核心思想。而我花了很长的工夫去浏览这段代码，感叹我和尤雨溪之间的前端程度还是有不少差距的。
（雷军：诗一样的代码）
剖析
vue2 在 mount（筹备阶段）时通过 watchEffect（副作用）判断是否首次生成
是的话就生成 DOM 解构并通过 JS 更新到 H5 中（虚构 DOM）
否的话就判断前后两次传入的代码，别离判断和更新 tag 类型，传入的 props，判断 children（子组件）。并把不同的局部从新渲染。
vue2 应用 Object.defineProperty, 通过 set 劫持数据，应用 dep.notify() 告诉对应 watcher（上文的 watchEffect），watcher 调用_update 更新视图
Dep 中负责生成虚构 DOM 刷新页面的的 Effect（副作用函数）在什么时候监听进去的呢，答案是在首屏加载的时候。Dep 和 Watcher 是一对多的关系，能够同时监听多组 watchEffect 数据
一个较为残缺的流程图
总结和瞻望
官网文档中提到 VUE3 的 object 拦截器 Object.defineProperty 曾经替换成了 Proxy。在几个小试验之后，我发现 Proxy 是 Object.defineProperty 的外层封装，相当于我拦挡了你的拦挡。网上找了一下材料，发现比照 defineProperty 长处可能是能拦挡数组，新增了 delete 办法，还有更高的自由度。
上文能够解释为什么 VUE2 咱们在子组件中批改传入的 obj，会触发父组件的从新渲染，其实是触发了监听在父组件上的 date 的 set 劫持。
能够揣测出 VUE3 中传入子组件的 object 变成了一份深拷贝的复制品，就不会再触发这个问题了，react 同理。（单向数据流思维）
写完这些，感觉对前端框架的了解又深刻了，感觉做出本人的前端框架也不是不可能。当然，主观的来说这次探讨的只是前端框架的一小部分原理，其外还有大量的优化和性能没有波及，实际上只是抛砖引玉，心愿能发散出更多对前端框架的思考。
参考文章
https://mp.weixin.qq.com/s/Do…
https://www.cnblogs.com/datia…
https://www.cnblogs.com/weblf…
谢谢观看
