vue生命周期

最新推荐文章于 2022-11-21 14:58:31 发布

m0_62168050

最新推荐文章于 2022-11-21 14:58:31 发布

阅读量329

点赞数

文章标签： c# 开发语言

本文链接：https://blog.youkuaiyun.com/m0_62168050/article/details/126054835

版权

本文详细解读Vue的生命周期钩子函数，包括beforeCreate、created、beforeMount、mounted等，以及它们在实例化过程中的作用，同时提供实际代码示例和应用场景，如数据获取、DOM操作和资源清理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue生命周期

生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；
在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，
在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；

生命周期钩子函数

生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码；
生命周期的钩子函数中的this，会默认指向vue的实例；

钩子函数

beforeCreate created 可以获取数据及方法
beforeMount mounted 可以获取到真实的DOM
beforeUpdate updated 数据更新执行
beforeDestroy destroyed 销毁vue实例，不再具有双向数据绑定的特点

Vue的八大生命周期钩子函数

区别之一：执行顺序的问题 beforeCreate>created>beforeMount>mounted

 // js部分
    <div id="app">
        <h1>{{msg}}</h1>
        <button @click="change">改变msg</button>
        <button @click="destroy">销毁Vue实例</button>
        <h1>{{time}}</h1>
    </div>

beforeCreate：Vue实例化对象创建之前，实例化对象创建之前是获取不到data里面的数据的

 //Vue实例化对象创建之前
            // 最先执行的生命周期
            beforeCreate() {
                console.log("Vue实例化对象创建之前");//Vue实例化对象创建之前
                console.log(this.msg); // undefined
            },

created：Vue实例化对象创建之后，实例化对象创建之后可以获取data里面的数据

实例化对象创建之后不可以获取到dom包括根节点

★一般在created里面调用接口把接口里面的数据赋值给到Vue的data中

  /* Vue实例化对象创建之后 */
            created() {
                /* 实例化对象创建之后可以获取data里面的数据 */
                /* 实例化对象创建之后不可以获取到dom包括根节点 */
                console.log('created',this.msg,this.$el)
                /* ★一般在created里面调用接口把接口里面的数据赋值给到Vue的data中 */
                // this.timeId = setInterval(()=>{
                //     this.time++;
                //     console.log(this.time)
                // },500)
            },

beforeMount：Vue的dom挂载之前，beforeMount可以获取到节点，但是不能把data中的数据渲染在dom节点中

 beforeMount() {
                /* dom挂载之前可以获取到根节点 */
                /* beforeMount还没有把data中的数据渲染到dom节点上 */
                console.log('beforeMount',this.$el)
            },

mounted：Vue的dom挂载之后，mounted已经把data中的数据渲染到了dom节点上

★一般在获取dom节点操作要放在mounted中执行，例如echarts中获取根元素

 /* Vue的dom挂载之后 */
            mounted() {
                /* mounted已经把data中的数据渲染到了dom节点上 */
                console.log('mounted',this.$el)
                /* ★一般在获取dom节点操作要放在mounted中执行，例如echarts中获取根元素 */
            },

beforeUpdate： Vue的data值更新前，当我把Vue实例中的data中的值改变了会触发 beforeUpdate 和updated，顺序上 beforeUpdate执行顺序优先于updated

  /* Vue的data值更新前 */
            /* 当我把Vue实例中的data中的值改变了会触发beforeUpdate和updated */
            /* 顺序上 beforeUpdate执行顺序优先于updated  */
            beforeUpdate() {
                console.log('beforeUpdate',this.msg,this.$el)
            },

updated：Vue的data值更新后

   updated() {
                console.log('updated',this.msg,this.$el)
            },

beforeDestroy：Vue组件销毁前，在调用$destroy()方法的时候会执行下面的两个钩子函数

执行顺序上beforeDestroy优先于destroyed执行

★beforeDestroy和destroyed的一个使用场景是在销毁定时器节约内存的时候都可以使用

  /* Vue组件销毁前 */
            /* 在调用$destroy()方法的时候 会执行下面的两个钩子函数 */
            /* 执行顺序上beforeDestroy优先于destroyed执行  */
            /* ★beforeDestroy和destroyed的一个使用场景是在销毁定时器节约内存的时候都可以使用 */
            beforeDestroy() {
                console.log('beforeDestroy',this.msg,this.$el)
            },

destroyed：Vue组件销毁后

 destroyed() {
                console.log('destroyed',this.msg,this.$el)
                clearInterval(this.timeId)
            },

整体代码：

<div id="app">
        <h1>{{msg}}</h1>
        <button @click="change">改变msg</button>
        <button @click="destroy">销毁Vue实例</button>
        <h1>{{time}}</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
        /* Vue的八大生命周期钩子函数 */
        /* 区别之一：执行顺序的问题 beforeCreate>created>beforeMount>mounted */
        new Vue({
            el:"#app",
            data:{
                msg:'我爱Vue',
                time:0,
                timeId:null
            },
            /* Vue实例化对象创建之前 */
            beforeCreate() {
                /* 实例化对象创建之前是获取不到data里面的数据的 */
                console.log('beforeCreate',this.msg)
            },
            /* Vue实例化对象创建之后 */
            created() {
                /* 实例化对象创建之后可以获取data里面的数据 */
                /* 实例化对象创建之后不可以获取到dom包括根节点 */
                console.log('created',this.msg,this.$el)
                /* ★一般在created里面调用接口把接口里面的数据赋值给到Vue的data中 */
                // this.timeId = setInterval(()=>{
                //     this.time++;
                //     console.log(this.time)
                // },500)
            },
            /* Vue的dom挂载之前 */
            beforeMount() {
                /* dom挂载之前可以获取到根节点 */
                /* beforeMount还没有把data中的数据渲染到dom节点上 */
                console.log('beforeMount',this.$el)
            },
            /* Vue的dom挂载之后 */
            mounted() {
                /* mounted已经把data中的数据渲染到了dom节点上 */
                console.log('mounted',this.$el)
                /* ★一般在获取dom节点操作要放在mounted中执行，例如echarts中获取根元素 */
            },

            /* Vue的data值更新前 */
            /* 当我把Vue实例中的data中的值改变了会触发beforeUpdate和updated */
            /* 顺序上 beforeUpdate执行顺序优先于updated  */
            beforeUpdate() {
                console.log('beforeUpdate',this.msg,this.$el)
            },
            /* Vue的data值更新后 */
            updated() {
                console.log('updated',this.msg,this.$el)
            },
            /* Vue组件销毁前 */
            /* 在调用$destroy()方法的时候 会执行下面的两个钩子函数 */
            /* 执行顺序上beforeDestroy优先于destroyed执行  */
            /* ★beforeDestroy和destroyed的一个使用场景是在销毁定时器节约内存的时候都可以使用 */
            beforeDestroy() {
                console.log('beforeDestroy',this.msg,this.$el)
            },
            /* Vue组件销毁后 */
            destroyed() {
                console.log('destroyed',this.msg,this.$el)
                clearInterval(this.timeId)
            },
            methods: {
                change(){
                    this.msg = '我爱React'
                },
                destroy(){
                    this.$destroy();
                }
            },
        })
    </script>