1.setup replaces beforeCreate and created
In the combined api of vue3, the function execution in setup is equivalent to executing in beforeCreate and created in the option api
2. The life cycle of the combined API needs to be introduced and used
In addition to beforeCreate and created, the use of other life cycles need to be introduced in advance (lightweight)
3. Available life cycle
Except that beforeCreate and created are replaced by setup , the mapping between optional API and combined API is as follows:
Creation stage
beforeMount -> onBeforeMount is called before mounting, and the DOM cannot be accessed at this time
mounted -> onMounted , called after the mount is complete, and the page DOM can be accessed normally at this time
update phase
beforeUpdate -> onBeforeUpdate , called when the data is updated , before the virtual DOM is patched. At this time, the data in the memory has been modified, but it has not been updated to the page, and the old DOM can be accessed
updated -> onUpdated , called after the data is updated , at this time the memory data has been modified, the page data has also been updated, and the new DOM can be accessed
uninstall phase
beforeUnmount -> onBeforeUnmount , called before the component is unmounted
unmounted -> onUnmounted , called after the component instance is unmounted.
Other scene triggers
errorCaptured -> onErrorCaptured , called whenever an event handler or lifecycle hook throws an error
renderTracked -> onRenderTracked , state tracking, the new hook function introduced by vue3, is only useful in the development environment , used to track all responsive variables and methods, once the page is updated, it will track them and return an event object
renderTriggered -> onRenderTriggered , state triggering, is also a newly introduced hook function of vue3, which is only valid in the development environment , similar to the effect of onRenderTracked , but it will not track all responsive variable methods, only fixed-point tracking of changed data , the same returns an event object
activated -> onActivated , used with keep-alive, called when the component wrapped by keep-alive is activated
deactivated -> onDeactivated , used with keep-alive, called when the component wrapped by keep-alive is deactivated
Reference article: https://www.jianshu.com/p/7ae98973038b