对于前端视图更新前言
接到分享工作后始终比拟头疼，不晓得分享什么内容，可能把此次分享做的比拟好。起初偶尔在网上看到一篇文章，十分有启发性，疏导我做出了本次的内容
代码地址：（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...
谢谢观看