Vue-生命周期

Vue实例有一个完整的生命周期 , 也就是从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等过程 , 这些过程会运行一些叫做 生命周期钩子 的函数 , 提供了在不同生命周期中需要实现的功能！

首次接触Vue不建议看该章节

Vue生命周期函数分别有：

创建期
- beforeCreate
- created
- beforeMount
- mounted
运行期
- beforeUpdate
- updated
销毁期
- beforeDestroy
- destroyed

vue 2.x	vue 3.x
beforeCreate	setup
created	setup
beforeMount(挂载前)	onBeforeMount
mounted(挂载后)	onMounted
beforeUpdate(数据更新前)	onBeforeUpdate
updated(数据更新后)	onUpdated
beforeDestroy(销毁前)	onBeforeUnmount
destroyed(销毁后)	onUnmounted

# 创建期

Vue实例创建期的钩子函数 , 分别在不同创建执行的钩子函数

实例时间线	钩子函数	说明
T1 数据/方法未加载	`beforeCreate`	Vue实例初始化后执行
T2 数据/方法刚加载	`created`	Vue实例数据/方法加载后执行
T3 模板刚好编译完	`beforeMount`	Vue实例 HTML模板编译后执行
T4 页面渲染渲染完	`mounted`	DOM模型渲染完后执行

示例

<div id="app">
    <p>{{msg}}</p>
</div>
....
<script>
new Vue({
    el: "#app",
    data: {
        msg: "Hello world",
    },
    methods: {
        say() {
            console.log("load...say()")
        }
    },
    // 生命周期测试
    beforeCreate() {
        // Vue实例初始化后执行（没有数据和方法
        console.log("beforeCreate() => ", this.msg)
        // 方法编译时会报错
        /* 控制台结果
        beforeCreate() =>  undefined
        * */
    },
    created() {
        // Vue实例加载数据和方法后执行
        console.log("created() => ", this.msg, this.say())
        /* 控制台结果
        load...say()
        created() =>  Hello world undefined
        * */
    },
    beforeMount() {
        // 模板编译后执行（此时页面为渲染
        console.log("beforeMount() => ",
                "html:" + document.querySelector("p").innerHTML,
                "text:" + document.querySelector("p").innerText
        )
        /* 控制台结果
        beforeMount() =>  html:{{msg}} text:{{msg}}
        * */
    },
    mounted() {
        // DOM模型渲染完后执行
        console.log("mounted() => ",
                "html:" + document.querySelector("p").innerHTML,
                "text:" + document.querySelector("p").innerText
        )
        /* 控制台结果
        mounted() =>  html:Hello world text:Hello world
        * */
    }
    
});
</script>

# 运行期

Vue实例在页面渲染后的期间为运行期间 , 当中触发钩子函数的有数据变化

实例时间线	钩子函数	说明
T4+ 数据更变/页面渲染前	`beforeUpdate`	实例中的数据被修改前执行
T5+ 数据更变/页面渲染前	`updated`	实例中的数据被修改后执行

示例

<div id="app">
    <p>{{count}}</p>
    <button @click="add">add</button>
</div>
....
<script>
new Vue({
    el: "#app",
    data: {
        count: 0
    },
    methods:{
        add() {
            this.count++;
        }
    },
    beforeUpdate() {
        // 实例中的数据被修改前执行
        console.log("beforeUpdate() => ",
            "this: "+this.count,
            "html: "+document.querySelector("p").innerHTML,
            "text: "+document.querySelector("p").innerText
        )
        /* 控制台数据（点击3次）
        beforeUpdate() =>  this: 1 html: 0 text: 0
        beforeUpdate() =>  this: 2 html: 1 text: 1
        beforeUpdate() =>  this: 3 html: 2 text: 2
        */
    },
    updated() {
        // 实例中的数据被修改后执行
        // 实例中的数据被修改前执行
        console.log("updated() => ",
                "this: "+this.count,
                "html: "+document.querySelector("p").innerHTML,
                "text: "+document.querySelector("p").innerText
        )
        /* 控制台数据（点击3次）
        updated() =>  this: 1 html: 1 text: 1
        updated() =>  this: 2 html: 2 text: 2
        updated() =>  this: 3 html: 3 text: 3
        */
    }
});
</script>

# 销毁期

Vue实例和Vue的组件生命周期一样 , 也有相同的功能以及选项 , 因此在测试应用也如此 , 在这一销毁期当中有两个钩子函数分别是

实例时间线	钩子函数	说明
T(end-1) 组件销毁前	`beforeDestroy`	实例/组件被销毁前执行
T end 组件销毁后	`destroyed`	实例/组件被销毁后执行

示例

示例运用 v-if指令使组件Element节点删除的方式 , 对销毁函数产生调用

<div id="app">
    <button @click="toggle">切换</button>
    <son v-if="flag"></son>
</div>
....
<template id="son">
    <div>
        <p>我是组件</p>
    </div>
</template>
<script>
    Vue.component("son", {
        template: "#son",
        data() {
            return {
                msg: "hello"
            }
        },
        methods: {
            say() {
                console.log("Say()")
            }
        },
        beforeDestroy() {
            console.log("beforeDestroy() => 组件销毁",
                    this.msg, this.say()
            )

        },
        destroyed() {
            // 数据/方法 在组件销毁后应用 报红
            console.log("destroyed() => 组件销毁"
                    // this.msg, this.say()
            )
        }
    })
    
    new Vue({
        el: "#app",
        data: {
            flag: true
        },
        methods: {
            toggle() {
                this.flag = !this.flag;
            }
        }
    })
</script>

#Vue

← Vue-认识 Vue-选项→