A brief description of vue’s life cycle functions and processes:
- The life cycle function of vue is actually the life cycle of vm;
- Create: beforeCreate, created
- Mount: beforeMount, mounted
- 更新：beforeUpdate、updated [ˌʌpˈdeɪtɪd]
- Destroy: beforeDestroy, destroyed
The life cycle of vue is the process of creating, mounting, updating and destroying a vue instance;
BeforeCreate is created, the initialized vue instance only has default events and life cycle;
Data and methods binding events will be mounted between beforeCreate and created;
Mount page elements according to el. If el is not set, you can call the vm.$mount(el) function to mount it manually; after el is mounted, the page is rendered according to the compiled template / or outerHTML(el) as a template;
The virtual DOM has been created before beforeMount; then vm.$el is replaced with the page element el before mounted; after mounted, the virtual DOM is mounted to the real page (the page has been fully rendered at this time); at this time, if the data changes It will trigger beforeUpdate and updated to perform some operations;
Finally, when the destruction function is actively called or the component is automatically destroyed beforeDestroy, the listening events, timers, etc. are manually cancelled; when destroyed, only the Dom node exists, and everything else has been automatically destroyed. This is what I understand as a complete life cycle of vue;
Vue life cycle diagram:
