1. In Vue, there are the following life cycles:
beforeCreate
Data observation and event configuration are performed when the instance is initially created. At this time, the properties and methods on the component's data, methods, computed and watch cannot be accessed and used.
created
It is executed after the instance is created, that is, after the Vue instance completes initial work such as data observation. At this stage, various initialization operations are completed, but the rendering of DOM nodes is not started.
beforeMount
Called before the mount starts: the relevant render function is called for the first time.
mounted
el is replaced by the newly created vm.$el and the hook is called after being mounted to the instance. This stage completes the process of template rendering and mounting components to the page.
beforeUpdate
Called when data is updated, before the virtual DOM is re-rendered and patched.
updated
This hook is called after virtual DOM re-rendering and patching due to data changes.
beforeDestroy
Called before the instance is destroyed. At this step, the instance is still fully available.
destroyed
Called after the instance is destroyed. When this hook is called, everything pointed to by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed.
These life cycle functions can help developers perform corresponding operations at different stages, such as requesting data in the created hook, or operating the DOM in the mounted hook.
2. In React, there are the following life cycles:
componentWillMount
Executed when the component is about to be loaded on the page, called before the render function is executed. It is not recommended to perform operations such as data requests at this stage.
componentDidMount
It is executed after the component is loaded. At this time, the component has been rendered, and operations such as DOM operations and sub-components in the component can be performed. It is often used for operations such as obtaining asynchronous data and using third-party library initialization.
shouldComponentUpdate
Before the component is updated, it is judged whether it needs to be updated. By default, it returns true to indicate that it needs to be updated. Developers can optimize according to their own needs, and improve performance by avoiding repeated rendering.
componentWillUpdate
Executed when the component is about to be updated, called before the render() function is executed. The status cannot be updated inside this function, otherwise it will fall into an infinite loop.
componentDidUpdate
Executed after the component update is completed. At this time, the component has been re-rendered and updated to the latest state. Often used to manipulate updated DOM elements, such as manually updating other components or managing resources.
componentWillUnmount
Executed when the component is about to be uninstalled. You can clear timers, cancel network requests and other operations in this hook function to ensure that there are no side effects before the component is destroyed.
These lifecycle functions are triggered at different stages of the component to help developers perform corresponding operations. Among them, componentDidMount and componentDidUpdate are commonly used life cycle functions, and asynchronous data requests and DOM operations are performed in these two stages.
3. Uniapp has the following life cycle:
onLoad
Executed when the page is loaded, it will only be executed once. Usually used for page initialization operations.
onShow
Triggered when the page is displayed/switched to the foreground and can perform some visibility-related operations, such as data requests, timer starts, etc.
onReady
Executed when the initial rendering of the page is completed. At this time, you can obtain component instances, operate DOM, etc.
onHide
Triggered when the page is hidden/switched to the background. At this stage, cleanup work can be performed, such as resetting data, destroying timers, etc.
onUnload
Executed when the page is unloaded, it will only be executed once. Cleanup work can be performed at this stage, such as unsubscribing, unbinding events, etc.
In addition to the above five page life cycles, there is also a global life cycle function onLaunch, which is triggered when the application initialization is completed. This function will only be executed once. Usually used for initialization operations when the application starts, such as obtaining user information, checking login status, etc.
These life cycle functions can help developers perform corresponding operations at different stages, such as requesting data and displaying the page in the onLoad hook, or stopping the timer in the onHide hook to avoid occupying system resources.
4. In Flutter, there are the following life cycles:
StatefulWidget life cycle:
- createState: When the StatefulWidget is inserted into the control tree for the first time, the Flutter framework will call this method to create a corresponding State object.
- initState: The Flutter framework will call this method when the State object is created. In this method, developers can perform some initialization operations, such as obtaining network data, creating animations, and so on.
- didChangeDependencies: The Flutter framework will call this method when the InheritedWidget that the State object depends on changes. Usually, dependent data is updated in this method, such as reading the latest data from InheritedWidget.
- build: Every time the setState() method is called, the Flutter framework will call this method to build the interface. In this method, developers need to return a Widget to describe the current interface state.
- didUpdateWidget: The Flutter framework will call this method when the parent widget triggers a rebuild and the current widget needs to be updated. In this method, developers can compare the property differences between the old and new widgets and make corresponding processing.
- deactivate: The Flutter framework calls this method when the State object is removed from the tree. In this method, developers can release resources, stop timers, etc.
- dispose: The Flutter framework calls this method when the State object is permanently removed from the tree. At this time, the State object is no longer visible, and developers can release all resources in this method.
StatelessWidget life cycle:
build: Same as StatefulWidget, called every time the interface is redrawn.
These life cycle functions can help developers master the generation and destruction process of flutter controls and perform corresponding operations at different stages, such as making asynchronous data requests in initState or cleaning up resources in dispose.