current position:Home>Vue hook function

Vue hook function

2022-06-24 08:14:01m0_ forty-nine million four hundred and seventy-one thousand si

Scoring point beforeCreate、created、beforeMounted、mounted beforeUpdate、updated 、 beforeDestroy、destroyed Standard answer

Hook function according to Components The life cycle process is divided into , mount Stage => to update Stage => The destruction Stage .

Hook function corresponding to each stage

Mount stage :beforeCreate、created、beforeMounted、mounted

Update phase :beforeUpdate、updated

Destruction phase :beforeDestroy、destroyed

Characteristics of each stage and what is suitable for doing

created: Instance creation complete , Accessible data、computed、watch、methods Methods and data on , Not mounted To DOM, Can't access el attribute ,el attribute ,ref Property content is an empty array , Often used in simple ajax request , Page initialization

beforeMount: stay Before mount begins Called ,beforeMount Before , We'll find the corresponding one template, And compile it into render function

mounted: The instance is attached to DOM On , At this time, you can use the DOM API Get DOM node ,$ref Property can be accessed commonly used to get VNode Information and operations ,ajax request

beforeupdate: Called when responsive data is updated , It happens in the virtual DOM Before patching , Suitable for accessing existing before updating DOM, For example, remove the added event listener manually

updated: fictitious DOM Call after rendering and patching again , Components DOM Has been updated , Executable depends on DOM Avoid manipulating data in this hook function , May fall into a dead circle

beforeDestroy: Call before instance destruction . This step , Instance is still fully available ,this You can still get instances , Commonly used to destroy timers 、 Unbind global events 、 Destroy plug-in objects and other operations

The bonus answer is

The code execution sequence of the hook function of parent-child components in three stages

mount : father created> Son created > Son mounted> father mounted>

to update : father beforeUpdate > Son beforeUpdated > Son updated > father updated

The destruction : father beforeDestroy> Son beforeDestroy > Son destroyed> Father destroyed

copyright notice
author[m0_ forty-nine million four hundred and seventy-one thousand si],Please bring the original link to reprint, thank you.

Random recommended