Vue-生命周期函数详解

图片&示例

示例：

html:

<div id="app">
    <h1 id = "h1">{{ msg }}</h1>
    <input type="button" name="" @click = "msg='changed'" value = "button">
</div>

JS:

new Vue({
    el: "#app",
    data: {
        msg: 'hello Word!'
    },
    methods: {
        show() {
            console.log('调用了 show 方法')
        }
    },
    
    // 挂载阶段执行的函数
    // 在 实例 完全创建出来之前执行的函数；此时 data 和 methods 中的内容都还未初始化。
    beforeCreate() {
        console.log(this.msg) // undefined
        this.show() // 报错
    },
    // 初始化完成执行的函数；此时 data 和 methods 中的数据已初始化完成。
    created() {
        console.log(this.msg) // hello Word!
        this.show() // 调用了 show 方法
    },
    // 模板已经在内存中编辑完成，但尚未把模板渲染到页面中；执行该函数时，页面中的元素尚未被模板替换过来，只是之前写的模板字符串。
    beforeMount() {
        console.log(document.getElementById('h1').innerText) // {{ msg }}
    },
    // 执行该函数时，内存中的模板已经挂载到了页面中，操作页面中的 DOM 最早在 mounted 中进行。
    // 该函数是实例创建期间的最后一个生命周期函数，当该函数执行完成，就表示实例已经创建完成
    mounted() {
        console.log(document.getElementById('h1').innerText) // hello Word!
    },
    
	// 更新阶段执行的函数
    // 执行该函数时，表示数据已经更新了但界面中的内容还未更新
    beforeUpdate() {
        console.log('界面上元素中的内容为：' + document.getElementById('h1').innerText) // 界面上元素中的内容为：hello Word!
        console.log('data 中的 msg 的内容为：' + this.msg) // data 中的 msg 的内容为：changed
    },
    // 执行该函数时，页面中的数据已经更新，页面和 data 中的数据保持同步。
    updated() {
        console.log('界面上元素中的内容为：' + document.getElementById('h1').innerText) // 界面上元素中的内容为：changed
        console.log('data 中的 msg 的内容为：' + this.msg) // data 中的 msg 的内容为：changed
    }
})