Vue的生命周期

最新推荐文章于 2024-06-19 11:11:55 发布

大聪明码农徐

最新推荐文章于 2024-06-19 11:11:55 发布

阅读量4.4k

点赞数 6

分类专栏： Vue 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_45799465/article/details/123646353

版权

Vue 专栏收录该内容

11 篇文章 6 订阅

订阅专栏

本文详细介绍了Vue.js的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等阶段，并通过代码示例展示了在各个阶段可以进行的操作。了解Vue实例的生命周期有助于更好地控制和优化组件状态及渲染过程。

摘要由CSDN通过智能技术生成

一、Vue生命周期的定义

生命周期：从vue实例产生开始到vue实例被销毁这段时间所经历的过程。

vue更像工具人，在整个过程中只会按照作者预设的程序去做事，不能由开发者去控制或者diy。如果这样开发时限制是比较多的，因此作者开放了生命周期，允许我们定义vue在特定的时候去做我们让其做的事情（钩子函数）。

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM，在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，目的是给予用户在一些特定的场景下添加他们自己代码的机会。

二、Vue生命周期的主要阶段

（一）创建阶段

1. beforeCreate

=> 创建 Vue 实例以前

=> 执行完毕这个钩子函数, 就会生成实例了

2. created

=> 创建 Vue 实例以后

=> 执行完毕这个钩子函数, 才会去捕获页面上的内容, 准备渲染页面

3. beforeMount

=> 挂载数据之前

=> 拿到页面结构, 准备渲染到页面上之前

=> 执行完毕这个钩子函数, 就会把准备好的数据渲染到页面上了

4. mounted

=> 挂载数据之后

=> 把 data 中的数据已经渲染到该渲染的标签上了

（二）更新阶段

5. beforeUpdate

=> 更新数据之前

=> 当你该实例的内容被更新的时候, 会在更新之前执行这个钩子函数

6. updated

=> 更新数据之后

=> 当你该实例的内容被更新以后, 渲染完毕页面会执行这个钩子函数

（三）销毁阶段

7. beforeDestroy

=> 销毁实例之前

=> 当你准备销毁当前实例了

=> 执行完毕这个钩子, 才会销毁当前实例

8. destroyed

=> 销毁实例之后

=> 当你销毁完毕这个实例了, 那么会执行一遍这个钩子函数, 然后整个 Vue 生命周期结束

=> 再也没有 Vue 实例了

三、流程图

四、代码演示

（一）创建阶段

<body>
    <div id="app">
        <p id="box">{{msg}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '大聪明',
                iptmsg: "hello word",
            },
//创建
            beforeCreate() {
                console.group('创建实例之前');
                console.log('执行完毕这个钩子函数, 就会生成实例了,也就是说这个钩子函数执行时拿不到');
                // 查看 Vue 内准备好的数据
                console.log('数据 : ', this.$data)
                // 查看 Vue 捕获到的页面上的内容
                console.log('结构 : ', this.$el)
                console.groupEnd();
            },
            created() {
                console.group('创建实例之后');
                console.log('执行完毕这个钩子函数, 才会去捕获页面上的内容, 准备渲染页面');
                // 查看 Vue 内准备好的数据
                console.log('数据 : ', this.$data)
                // 查看 Vue 捕获到的页面上的内容
                console.log('结构 : ', this.$el)
                console.groupEnd();
            },
// 挂载
            beforeMount() {
                console.group('挂载数据之前');
                console.log('拿到页面结构, 准备渲染到页面上之前,也就是还没有渲染');
                console.log(document.getElementById('box'));
                console.log(this.msg);
                console.groupEnd();
            },
            mounted() {
                console.group('挂载数据之后');
                console.log('数据已经渲染到该渲染的标签上了');
                console.log(document.getElementById('box'));
                console.log(this.msg);
                console.groupEnd();
            },
        })
    </script>
</body>

运行结果：

（二）更新阶段

<body>
    <div id="app">
        <p>{{msg}}</p>
        <input type="text" v-model="msg">
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'hello'
            },
// 更新
            beforeUpdate () {
                console.group('更新之前');
                // 查看 Vue 捕获到的页面上的内容
                console.log(this.$el.innerHTML);
                console.groupEnd();
            },
            updated () {
                console.group('更新之后');
                // 查看 Vue 捕获到的页面上的内容
                console.log(this.$el.innerHTML);
                console.groupEnd();
                
            }
        })
    </script>
</body>

运行结果：

（三）销毁阶段

我们先看一下在未使用销毁阶段的钩子函数的情况下直接删除组件的效果。

<body>
    <div id="app">
        <settime v-if="bool"></settime>
    </div>
    <script>
        Vue.component('settime',{
            data(){
                return{
                    time:1000
                }
            },
            //创建阶段设置 num 变量
            created () {
                this.num = null;
            },
            // 挂载阶段设置定时器
            mounted () {
                this.num = setInterval( ()=>{
                    console.log('倒计时');
                    this.time--
                },1000
                )
            },
// 销毁
            beforeDestroy () {
                console.log('销毁前，清除定时器，事件解绑等等');
            },
            destroyed () {
                console.log('销毁后，清除定时器，事件解绑等等');
                // clearInterval(this.num)
                
            },
            template:`
            <div>
            抢购倒计时
            <div>{{time}}</div>
            </div>
            `
        } )
        var vm = new Vue({
            el:'#app',
            data:{
                bool:true
            },
        
        })
    </script>
</body>

运行结果：

可以看到即使组件被销毁，定时器仍在执行。这时就用到销毁阶段的钩子函数了。只需要把清除定时器这一行代码解除注释。就可以了。

// 销毁
            beforeDestroy () {
                console.log('销毁前，清除定时器，事件解绑等等');
            },
            destroyed () {
                console.log('销毁后，清除定时器，事件解绑等等');
                clearInterval(this.num)
                
            },

运行结果：