VUE笔记2——Vue实例的生命周期

1. Vue实例的生命周期

1. 组件创建期间的四个钩子函数：

• beforeCreate
• created
• beforeMount
• mounted

<div id="app">
        <h3 id="h3">{{msg}}</h3>
    </div>

var vm = new Vue({
        el:"#app",
        data:{
            msg:'ok'
        },
        methods:{
            show(){
                console.log('执行了show方法!')
            }
        },
        beforeCreate(){//这是第一个生命周期函数，表示 实例完全被创建出来之前，会执行它
            // console.log(this.msg)
            // this.show()
            //注意：在beforCreate生命周期函数执行的时候，data 和 methods 中的数据还没有被初始化
        },
        created(){//这是第二个生命周期函数
            console.log(this.msg)
            this.show()
            //在created 中，data 和 methods 都已经被初始化好了
            //如果要调用methods中的方法，或者操作打塔中的数据，最早，只能在created中操作
        },
        beforeMount(){//这是第三个生命周期函数，表示模板已经在内存中编译完成，但尚未把模板渲染到页面中
            console.log(document.getElementById("h3").innerText)
            //在beforeMount 执行的时候，页面中的元素还没有被真正替换，只是之前写的模板字符串
        },
        mounted(){//这是第四个生命周期函数，表示内存中的模板已经真实的挂载到页面中，用户已经可以看到渲染好的页面
            console.log(document.getElementById("h3").innerText)
            //注意：mounted 是实例创建期间最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时，
            //如果没有其他操作的话，这个实例就静静的躺在我们的内存中一动不动
        }
    })

2. 组件运行期间的钩子函数：

• beforeUpdate
• updated

<div id="app">
        <h3 id="h3">{{msg}}</h3>
        <input type="button" value="修改" @click="msg='No'">
</div>

//接下来是运行中的两个事件
        beforeUpdate(){//这时候表示，我们界面还没有被更新（数据已经更新到虚拟DOM中了）
            console.log('界面上元素的内容'+document.getElementById("h3").innerText)  //ok
            console.log('data中的msg数据是：'+this.msg)            //no
            //得出结论：当执行beforeUpdate的时候，页面中显示的数据还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步
        },
        updated(){//这时候虚拟DOM中的数据已经渲染到页面中了
            console.log('界面上元素的内容'+document.getElementById("h3").innerText)   //no
            console.log('data中的msg数据是：'+this.msg)      //no
            //update事件执行的时候，页面和data数据已经保持同步了，都是最新的
        }

3. 组件销毁期间的钩子函数：

• beforeDestroy
• destroyed
  当执行 beforeDestroy 钩子函数时，数据，方法，监听器等等，都还可用
  当执行 destroyed 钩子函数时，数据，方法，监听器等等，都不可用，已销毁