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

This article introduces the relevant knowledge of "how to understand the life cycle and 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!

Preface

Generally speaking, the life cycle of Vue is that after the web page we write in Vue runs in the browser, the code we write will be executed in memory. For example, we all write var vm = new Vue ();, which means that new has a Vue instance. During the period from the creation of this instance to the time when we closed the browser, the instance died out. During this period, what the framework of Vue did, what the instance of Vue did, what to do first, what to do later, what was the relationship of this series of things? this is the life cycle of Vue.

The vue life cycle is divided into four phases.

Instance creation DOM rendering data update and destroy instance

Introduction to Hook function

1.beforeCreate-before creation

The mount element $el and the data object data of the vue instance are both undefined and have not been initialized yet.

2.created-after creation

The data object data of vue instance is available, but $el is not available yet.

3.beforeMount-before rendering

The $el and data of the vue instance are initialized, but they are still virtual dom nodes, and the specific data.filter has not been replaced.

4.mounted-after rendering

Vue instance is mounted, and data.filter is rendered successfully

5.beforeUpdate-before UPDAT

Triggered when data is updated

6.updated-after UPDAT

Triggered when data is updated

7.beforeDestroy-before destroying

Triggered when a component is destroyed

8.destroyed-after destruction

Triggered when the component is destroyed, the vue instance unlistens the event and binds to the dom (no response), but the DOM node still exists

The order of execution and when to execute, see the following figure.

This is the end of the content of "how to understand the life cycle and 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.