Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to apply the life cycle hook function of vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In vue, lifecycle hook functions refer to functions that run in the lifecycle as it goes through the process of creating and updating DOM; within these functions, vue components can be created and declared.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

What is the lifecycle hook function of vue

Each Vue instance goes through a series of initialization steps. From setting up the data at creation time to compiling the template, loading the instance to DOM, and finally updating the DOM during data changes. This process is called the lifecycle of Vue instances, and by default, when they go through the process of creating and updating DOM, they run functions within which Vue components are created and declared, and these functions are called lifecycle hooks.

Vue has eight lifecycle approaches:

Before create

Created

Before mount

Mounted

Before update

Updated

Before destroy

Destroyed

This article uses the test component, which is located in the components folder within the src folder. It should look like this:

/ / src/components/Test.vue export default {name: 'Test', props: {msg: String}} h4 {margin: 40px 0 0;} ul {list-style-type: none; padding: 0;} li {display: inline-block; margin: 0 10px;} a {color: # 42b983;}

BeforeCreate ()

This is the first lifecycle hook called in Vue.js, which is called immediately after the Vue instance is initialized.

Export default {name: 'Test', beforeCreate () {alert (' beforCreate hook has been called'); console.log ('beforCreate hook has been called');}}

You can run programs in the development environment to check the interface.

Npm run serve

Note that before loading the component, the alert statement written in the lifecycle hook is executed first. This is exactly what the function calls before the Vue engine creates the application component. At this time in the beforeCreate phase, the calculation properties, observers, events, data properties, operations, and so on have not been set.

Created ()

As you might guess, this is the second lifecycle hook that is called immediately after the beforeCreated hook. At this stage, the Vue instance has been initialized and computational properties, observers, events, data properties, and subsequent operations have been activated.

Export default {name: 'Test', data () {return {books: 0}}, created () {alert (' Created hook has been called'); console.log (`books is of type ${typeof this.books} `);}}

If you run the program, you will find that you can now display data types. This is not possible in the beforeCreated phase, because the activation that occurs at this time has not yet taken place. However, the Vue instance is not installed at this stage, so you cannot manipulate DOM here, and element properties are not yet available.

BeforeMount ()

This is the moment before the instance is mounted on DOM, where templates and scope styles are compiled, but you still can't manipulate DOM and element properties are still not available.

Export default {beforeMount () {alert ('beforeMount is called')}}

Mounted ()

This is the next lifecycle hook to be called after beforeMounted. It is called immediately after the instance is installed. Now the app component or other components in the project are available. Now you can do things like data fit templates, replace DOM elements with data fill elements, and element attributes can now be used.

Export default {mounted () {alert ('mounted has been called');}}

This is the default location for projects created with Vue CLI because, as we saw at the beginning, the installation has been completed in the main.js file. This is why you may not be able to use other hooks, because an instance has been installed for you by default.

BeforeUpdate ()

Here, make changes to the data that needs to be updated with DOM. This stage is appropriate for any logic before making changes such as deleting event listeners.

{{hello}} export default {name: 'Test', data () {return {books: 0, hello:' welcome to Vue JS'}}, beforeUpdate () {alert ('beforeUpdate hook has been called');}, mounted () {this.$data.hello=' lalalalallalalalalaalal';}}

There was initially a welcome comment on DOM, but during the mount phase (where DOM can be manipulated), the data changes, so beforeUpdate's alert appears before the change.

Updated ()

This lifecycle hook is called immediately after an update to the DOM, and it executes after calling the beforeUpdate hook. DOM-related operations can be performed here, but it is not recommended to change the state within this hook, as Vue already provides a platform specifically for this purpose.

{hello}} export default {name: 'Test', data () {return {books: 0, hello:' welcome to Vue JS'}}, beforeUpdate () {alert ('beforeUpdate hook has been called');}, updated () {alert (' Updated hook has been called');}, mounted () {this.$data.hello= 'lalalalallalalalalaalal';}}

BeforeDestroy ()

This Vue lifecycle hook is called before the Vue instance is destroyed, and the instance and all functions are still intact and working here. At this stage you can perform resource management, delete variables, and clean up components.

Export default {name: 'Test', data () {return {books: 0}}, beforeDestroy () {this.books = null delete this.books}}

Destroyed ()

This is the final phase of the Vue life cycle, where all child Vue instances have been destroyed and event listeners and all instructions have been unbound. It is called after running destroy on the object.

Export default {destroyed () {this.$destroy () console.log (this)}}

When you run the program and check the console, you won't see anything.

This is the end of the content of "how to apply the Life cycle Hook function of vue". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.