About front-end view updates

preface

After receiving the sharing task, I have been having a headache. I don’t know what content to share. I can do a better job of sharing this time. Later, I happened to see an article on the Internet, which was very enlightening and led me to make this content

The code address: (https://codepen.io/collection…

The code is very subtle, just more than a hundred lines of code, restore the core idea of VUE response. And I spent a long time to read this code, feeling that I and yu Yu Creek between the front level or a lot of gap.



(Lei Jun: poetic code)

Analysis of the

Vue2 uses watchEffect (side effect) at mount to determine if it is first generated

If yes, generate the DOM destruct and update it to H5 via JS (virtual DOM).

If no, check the code passed in before and after, check and update the tag type, props, and children. And re-render the different parts.



Vue2 uses object.defineProperty, hijks the data via set, notifies the corresponding Watcher (watchEffect above) with de.notify (), and watcher calls _update to update the view

When does the Effect function that generates the virtual DOM refresh page in Dep listen in? The answer is when the first screen loads. Dep and Watcher are in a one-to-many relationship, allowing you to monitor multiple watchEffect groups simultaneously

A relatively complete flow chart

Summary and Outlook

The official documentation mentions that VUE3’s object interceptor object. DefineProperty has been replaced with Proxy. After a few experiments, I found that Proxy is an outer wrapper around object.defineProperty, so I’m blocking your interception. Looking around the Internet, I found that the advantages of comparing defineProperty might be the ability to intercept arrays, the new delete method, and more freedom.

As explained above, in VUE2, when we modify the passed obj in the child component, it triggers the parent component to re-render, which actually triggers the set hijacking of the date listening on the parent component.

We can infer that the object passed to the subcomponent in VUE3 becomes a copy of the deep copy, so this problem will no longer be triggered. React is the same. (Idea of unidirectional data flow)

After writing these, I feel that I have a deeper understanding of the front-end framework, and it is not impossible to make my own front-end framework. Of course, objectively speaking, this discussion is only a small part of the principles of the front-end framework, and there are a lot of optimizations and functions that are not covered. In fact, it is just a good introduction, hoping to spread more thinking about the front-end framework.

Refer to the article

https://mp.weixin.qq.com/s/Do…

https://www.cnblogs.com/datia…

https://www.cnblogs.com/weblf…

Thank you for watching