vue生命周期

承諾太轻

已于 2023-05-10 11:51:17 修改

阅读量69

点赞数

文章标签： vue.js javascript 前端

于 2023-05-09 19:37:08 首次发布

本文链接：https://blog.csdn.net/m0_67901663/article/details/130587024

版权

deforeCreate

beforeCreate 初始化之前，data中的数据和methods中的方法不等拿到，还没有初始化。 beforeCreate 一般用于页面重定向

//html代码：
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
//vue实例：
       const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {

            },
            // beforeCreate  初始化之前，data中的数据和methods中的方法不等拿到，还没有初始化
            // beforeCreate 一般用于页面重定向
            beforeCreate() {
                console.log(this);
                console.log(this.msg);
                console.log('beforeCreate');
            }
        })

created

created 初始化完成，data和methods已经初始化完成，第一个可以调用data和methods的生命周期。created 一般用于数据请求、数据初始化

//html代码：
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
//vue实例：
       const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            
            },
            // created  初始化完成，data和methods已经初始化完成，第一个可以调用data和methods的生命周期
            // created 一般用于数据请求、数据初始化
            created() {
                this.msg = 20
                console.log(this.msg);
                console.log('created');
            }
        })

beforeMount

beforeMount 虚拟的DOM挂载，页面中的数据还没有挂载

//html代码：
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
//vue实例：
       const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {

            },
            // beforeMount  虚拟的DOM挂载，页面中的数据还没有挂载
            beforeMount() {
                console.log('brforeMount');
            }
        })

mounted

mounted 真实的DOM，第一个可以操作DOM元素的生命周期

//html代码：
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
//vue实例：
       const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {

            },
            // mounted  真实的DOM，第一个可以操作DOM元素的生命周期
            mounted() {
                console.log('mounted');
            }
        })

beforUpdate

beforeUpdate 更新之前，data中的数据是最新的，页面中的数据还是旧的，还没有同步

//html代码：
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
//vue实例：
       const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {

            },
            // beforeUpdate和updated  可以执行0次或多次
            // beforeUpdate  更新之前，data中的数据是最新的，页面中的数据还是旧的，还没有同步
            beforeUpdate() {
                console.log('beforeUpdate');
            }
        })

updated

updated 更新之后，date中和页面中的数据都是最新的

//html代码：
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
//vue实例：
       const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {

            },
            // updated  更新之后，date中和页面中的数据都是最新的
            updated() {
                console.log('updated');
            }
        })

beforDestroy

beforeDestroy 销毁之前清空定时器页面监听

//html代码：
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
//vue实例：
       const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {

            },
            // beforeDestory  销毁之前  清空定时器 页面监听
            beforeDestroy() {
                console.log('beforeDestroy');
            }
        })

destroyed

destroyed 销毁之后

//html代码：
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
//vue实例：
       const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {

            },
            // 销毁之后
            destroyed() {
                console.log('destroyed');
            }
        })