十、Vue组件之生命周期函数

一、生命周期函数简单定义

  Vue组件生命周期函数可以简单理解为组件在挂载、更新“和销毁时触发的一些列方法。

二、生命周期函数

这些生命周期函数，牢记两个：
1.​​​mounted()​​​：模板编译完成时触发。请求数据，操作DOM 一般放在这里
2.​​​beforeDestroy()​​：实例销毁之前触发。页面销毁的时候若需要保存一些数据，则可以监听这个函数

<script>
export default {
    data() {
        return {
            msg: '我是一个生命周期函数'
        }
    },
    methods: {
        setMsg() {
            this.msg = "我是改变后的数据";
        }
    },
    beforeCreate() {
        console.log('实例创建之前1');
    },
    created() {
        console.log('实例创建完成2');
    },
    beforeMount() {
        console.log('模板编译之前3');
    },
    mounted() {
        // 请求数据，操作DOM 放在这里 ，必须记住
        console.log('模板编译完成4');
    },
    beforeUpdate() {
        console.log('数据更新之前5');
    },
    updated() {
        console.log('数据更新完毕6');
    },
    beforeDestroy() {
        // 页面销毁的时候若需要保存一些数据，则可以监听这个函数
        console.log('实例销毁之前7');
    },
    destroyed() {
        console.log('实例销毁完成8');
    }
}
</script>