Vue life cycle and react lifecycle comparison [recommended]

Individual believes that React and Vue’s business logic is similar, and Vue encapsulates a more concise method on React, which is more convenient, such as providing convenient instructions (V-for, V-IF, V- MODEL, but also provides more properties (Computed, Watch), I still prefer to use React, closer to JS native, easier to understand it.

A Vue life cycle is shown in the following figure (very clear), compiled, updated, destroyed


Two Vue Life Cycle Chestnut After the Vue’s CREATED event, this is the Vue instance, which is important

    VUE life cycle      {{a}}   I am Content 2   var myvue = new Vue ({EL: ".test", DATA: {A: "I am content, enter myvue.a = 123456 in the console, you can change my value"}, CREATED: FUNCTION () {// Synchronized after the instance is created. At this time, the instance has ended the parsing option, which means that it has established: data binding, calculation properties, method, Watcher / event callback. // But did not start DOM Compile, $ EL does not exist, but the instance exists, that is, this.a exists, can be printed. ConsoLe.log ("established");}, beforeCompile: function () {console.log ("Not started to compile");}, compiled: function () {// is called after compiling end. At this time, all instructions have taken effect, so data changes will trigger DOM updates. But not guaranteed $ EL has been inserted into the document. Console.log ("Compilation Finish");}, ready: function () {// is called after the completion end and the $ EL first inserted the document, as called after the first Attached hook. Note must be inserted by the VUE (such as VM. $ Appendto (), etc., or instruction updates to trigger the Ready hook. Console.log ("Everything is ready");}, attached: function () {//myvue. $appendto (".test2 ") is temporarily triggered, do not know how to solve // ​​in VM. $ EL Insert DOM transfer. Must be inserted by a command or instance (such as $ appendto ()), directly operating VM. $ EL does not trigger this hook. Console.log ("Insert DOM Success");}, detached: function () {// Trigger event MyVue. $ destroy (true), where the parameter TRUE controls whether to delete the DOM node or MyVue. $ transove () // in VM The $ EL is called when it is removed from the DOM. Must be deleted by the instruction or instance method, directly operating the VM. $ EL does not trigger this hookson. Console.log ("Delete DOM Success");}, beforeDestroy: Function () {// Trigger mode, play myvue in Console. $ destroy (); // When you start destroying instances. The example still has functions. Console.log ("destruction");}, destroyed: function () {// Trigger mode, play MyVue in Console. $ destroy (); where MyVue. $ destroy (true) is deleting DOM nodes, triggered detached Functions, but instances still exist // call after the instance is destroyed. At this time, all the bindings and instances of the instance have been tied, note that all sub-instances have also been destroyed. Console.log ("Designed");}}); 
1. React Life Cycle React life cycle is divided into three states 1. Initialization 2. Update 3. Destruction

• Initialization 1, GetDefaultProps ()

Sets the default PROPS, or use the UFaultProps to set the default properties of the component.

2, getInitialState ()

vue生命周期和react生命周期对比【推荐】 Nothing when using ES6 Class syntax This hook function can define this.State directly in the Constructor. You can access this.props

3, ComponentWILLmount ()

When the component is initialized, only the component update is not called, and the entire lifecycle is only called once, and State can be modified.

4, render ()

Rect is the most important step, create virtual DOM, perform DIFF algorithms, updating the DOM tree here. You cannot change State at this time.

5, ComponentDidMount ()

When the component renders are called, only once.

• Update

6, ComponentWillReceivePs (NextPROPS)

When the component is initialized, the component is called when the component accepts new PROPS.

7, ShouldComponentUpdate (NextProps, NextState)

Reactivity optimization is a very important part of performance optimization. When the components receive new State or PROPS, we can set this comparison whether the two PROPs and State are the same, if the same is the same, returns FALSE to block updates, because the same attribute status will generate the same DOM tree, this is not required Create a new DOM tree and the old DOM tree for DIFF algorithm comparison, saving a lot of performance, especially when the DOM structure is complex

8, ComponentWillUpdata (NextPROPS, NextSTATATE)

When the component is initialized Do not call, only when the component will be updated, you can modify State

9, render ()

component rendering

10, ComponentDidUpdate ()

When the component is initialized, it is not called, and the component update is called, and the DOM node can be obtained at this time.

• Uninstall

11, ComponentWillunmount ()


When the component will be invoked, some event monitors and timers need to be cleared at this time.


The above is the Vue life cycle introduced by Xiaobian, and the life cycle comparison, I hope that everyone can help, if everyone If you have any questions, please leave a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment