Life cycle: the process of vue instance from creation to destruction
Concept: What is a lifecycle hook?
Vue life cycle hook introduction: some callback functions that will be executed during the process of vue from creation to destruction
Hook: a callback function:
Essentially some callback functions, this in each lifecycle hook points to the Vue instance but cannot be an arrow function (the arrow function has no this value, it points to window)
Vue's lifecycle phases:
Vue's life cycle hooks are divided into four stages (eight methods)
(1) Initialization
(2)) mount
(3) update
(4) destroy
2. Execution order of lifecycle hooks
(1) Initialization stage:
beforeCreate(){} --- Initialize vue, but no data is created
created(){} --- created data, but did not create mount point el, it should be the earliest life cycle hook that can operate data, so it is used to send Ajax request
(2) Mounting stage
beforeMount(){} ---Create an el mount point, but do not render data to the mount point
mounted(){} ---c completes the initialization rendering, and renders the data of data to the el mount point
(3) Update stage
beforeUpdate(){} --- Detect changes in data data, but do not update dom
updated(){} --- Render the changed data data and complete the update of dom
(4) Destruction stage
beforeDestroy(){ {}---vue starts to destroy, removes listeners, timers, binding events, etc. (can be used to remove or unbind some timers)
destroyed(){} --- complete destruction
