Life cycle process & hook function

Life cycle process

$mount() method : The role is the elsame as the property, which can render the vue instance into the view container

template attribute : If this attribute is set, it will templatebe rendered as the content of the page when rendering on the page in the future

1. Create a vue instance
2. Initialize event & life cycle

• When creating a vue instance, this object is actually empty, and only at this point does it slowly start to execute some content

3. Initialize the data and method in the instance

• Before this step, data and method actually have no content

4. Determine and generate virtual DOM

• Determine whether there is an el attribute: (el: whether the specified rendering container)
  • if it exists:
    • Continue down execution
  • If it does not exist:
    • When the $mountmethod is called , continue to execute downward
• Determine whether there are templateattributes in the instance
  • if it exists:
    • Generate a virtual DOM from the corresponding content in the template attribute
  • If it does not exist:
    • The <div id="app"></div>contents generate a virtual DOM

5. Render the virtual DOM onto the page

6. The page will enter the mounted state and wait for the data in data to change

• If the data in data changes:
  • Update the virtual DOM, re-render it to the page, and enter the mounted state again

7. Destroy the vue instance

• When $destroy方法called, it will be destroyed
• When switching from one component to another. The previous instance of the vue component will also be destroyed

important point:

• el: Whether to specify the rendered container
• elIt $mountis the same as in fact, it is used to specify the rendering container of the page
• template:
  • If vue instance does not exist, directly to <div id=“app”></div>the rendered content to the page
  • If the vue instance exists, the content in the template attribute will be directly rendered on the page
• 虚拟DOM：
  • It is equivalent to rendering the content to the page once 打草稿(there are still instructions)

Life cycle hook function

Execute when initializing data&method

• Before: beforeCreate
  • Unable to access data& methodscontent
• After: created
  • Have access to all dataand methodcontent
  • Used for :
    • Initialize certain attribute values

Execute when the virtual DOM is rendered on the page

• Before: beforeMount
  • After 虚拟DOMrendering to the page 之前execution, get DOM结构and指令操作符
• After: mounted
  • In 虚拟DOM渲染the 之后execution of the page , 指令操作符all here are replaced with real data (real dom)
  • Used for:
    • After the initialization page is completed, perform some required operations on htmlthe domnodes.

Execute when the data before the page is modified

• Before: beforeUpdate
  • The data in data has changed, it is executed on 数据渲染the page 之前(data has changed, dom has not been rendered)
• After: updated
  • The data in data has been changed, it is 之后executed when the data is re-rendered to the page (the data has been changed, and the dom has been re-rendered)
  • The data displayed on the page and the data in data have been kept in sync, and they are both up to date

Execute when the vue instance is destroyed

• 之前：beforeDestroy
  • Vue实例From entering the operational phase to the phase of the destruction, this time all dataand methods, , 指令......过滤器 are in a usable state. Hasn't really been destroyed
• After: destroyed
  • After the hook is called, all instructions corresponding to the Vue instance are unbound, all event listeners are removed, and all sub-instances are also destroyed.
  • At this time, all data and methods, instructions, filters...are in an unavailable state . The component has been destroyed.
  • Used for :
    • Clear some timers

supplement

• Which hooks will be triggered the first page load?
  beforeCreate, created, beforeMount,mounted
• <keep-alive>Lifecycle hook activatedfunction: ,deactivated

Is included in the <keep-alive>hook assembly created, it will be more than two life cycle: activated and deactivated

• activated: when the component is active call, use <keep-alive>will be called when the component is first rendered when, after each <keep-alive>is called when activated.

• deactivated: called when the component is deactivated.

• Note : Only the components are <keep-alive>parcel, both life-cycle will be called, if used as a normal component, is not being called, and after version 2.1.0, using exclude exclude after, even if wrapped in this The two hooks will still not be called! In addition, this hook will not be called when rendering on the server

• errorCaptured
  

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            msg: {
    
    {
    
     msg }}
        </div>
        <input type="text" v-model="msg">
        <button @click="msg='修改后的值'">点我修改 msg</button><br />
        <button @click="fn">点我销毁</button>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
    
    
        el: '#app',
        data() {
    
    
            return {
    
    
                msg: '修改前的值'
            }
        },
        methods: {
    
    
            fn() {
    
    
                this.$destroy()
            }
        },
        beforeCreate() {
    
    
            console.log('-----------beforeCreate----------')
            console.log(this.msg) // undefined
        },
        created() {
    
    
            console.log('-----------created----------')
            console.log(this.msg) // 修改前的值
        },
        beforeMount() {
    
    
            console.log('-----------beforeMount----------')
            console.log(this.$el)
        },
        mounted() {
    
    
            console.log('-----------mounted----------')
            console.log(this.$el)
        },
        beforeUpdate() {
    
    
            console.log('-----------beforeUpdate----------')
            console.log(this.msg)
        },
        updated() {
    
    
            console.log('-----------updated----------')
            console.log(this.msg)
        },
        beforeDestroy() {
    
    
            console.log('-----------beforeDestroy----------')
        },
        destroyed() {
    
    
            console.log('-----------destroyed----------')
        }
    })
</script>

</html>