Vue的生命周期

最新推荐文章于 2024-08-23 13:45:37 发布

echo 云清

最新推荐文章于 2024-08-23 13:45:37 发布

阅读量985

点赞数 27

分类专栏： Vue 文章标签： vue.js javascript 前端 vue的生命周期

本文链接：https://blog.csdn.net/qq_57005976/article/details/136617840

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js的生命周期过程，包括初始阶段（数据准备和加载）、挂载阶段（DOM渲染）、更新阶段（数据变化后的处理）和销毁阶段（资源清理），并展示了如何在不同阶段使用钩子函数进行相应的操作。

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

Vue的生命周期

Vue的生命周期指的是vm对象从创建到最终销毁的整个过程,在这个过程中不同的时间节点上调用不同的钩子函数(在不同时刻被自动调用的函数)

虚拟DOM在内存中就绪时：去调用一个a函数
虚拟DOM转换成真实DOM渲染到页面时：去调用一个b函数
Vue的data发生改变时：去调用一个更新阶段的钩子函数
Vue实例被销毁时：去调用一个销毁阶段的钩子函数

Vue 的生命周期可以被划分为初始阶段、挂载阶段、更新阶段、销毁阶段, 每个阶段会调用两个钩子函数beforeXxx()、xxxed()

初始阶段: beforeCreate() 创建前, created() 创建后
挂载阶段: beforeMount() 挂载前, mounted() 挂载后
更新阶段: beforeUpdate() 更新前, updated() 更新后
销毁阶段: beforeDestroy() 销毁前, destroyed() 销毁后
8个钩子函数直接写在Vue构造函数的options对象当中

研究Vue的生命周期主要是研究在不同的时刻Vue做了哪些不同的事儿,根据不同需求编写对应的钩子函数等待Vue自动调用

如在vm被销毁之前需要将绑定到元素上的自定义事件全部解绑，解绑的代码可以写到beforeDestroy()这个函数中

`初始阶段(初次渲染)`

第一步: 创建Vue实例vm, 此时Vue实例已经完成了创建

第二步: 初始化事件对象和生命周期

第三步: 调用beforeCreate()钩子函数,此时数据代理和数据监测还未创建,无法通过vm去访问data对象的属性

第四步: 调用created()钩子函数, 此时数据代理和数据监测已经创建完毕,可以通过vm访问data对象的属性

第五步: 编译模板语句生成虚拟DOM, 此时虽然生成了虚拟Dom但还没有渲染到页面上

el必须要存在,如果不存在需要手动调用vm.$mount(el)进行手动挂载
el和template同时存在优先选择template, 如果没有template才会选择el

初始阶段适合做什么

beforeCreate：可以在此时加一些loading效果
created：结束loading效果, 发送一些网络请求获取数据, 添加定时器等操作

在这里插入图片描述

const vm = new Vue({
    el : '#app',
    data : {
        msg : 'Vue生命周期',
        counter : 1
    },
    methods: {
        m(){
            console.log('m....')
        } 
    },
    beforeCreate() {
        // 创建前表示数据代理和数据监测还未创建,此时还无法访问data当中的数据以及methods当中的方法
        console.log('beforeCreate', this.counter)
        // 调用methods报错,方法不存在
        //this.m()
        // 打一个断点
        debugger
    },
    created() {
        // 创建后表示数据代理和数据监测创建完毕，可以访问data中的数据了。
        console.log('created', this.counter)
        // 可以访问methods的m方法
        this.m()
    }
})

测试el和template配置项

el有，template也有，最终编译template模板语句
el有，template没有，最终编译el模板语句
el没有的时候，需要手动调用vm.$mount(el)进行手动挂载(保证el必须存在)，然后流程才能继续, 此时如果有template有，最终编译template模板语句
el没有的时候，需要手动调用vm.$mount(el)进行手动挂载(保证el必须存在)，然后流程才能继续, 此时如果没有template，最终编译el模板语句

<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script>
        // el和template同时存在优先选择template,
        const vm = new Vue({
            el : '#app',
            template : `
                <h1>{{s}}</h1>
            `,
            data : {
                msg : '测试el和template配置项',
                s : 'template配置项!!!!'
            }
        })
        // el必须要存在,如果不存在需要手动调用vm.$mount(el)进行手动挂载
        //vm.$mount('#app')
    </script>
</body>

`挂载阶段(初次渲染)`

第一步: 调用beforeMount()钩子函数(此时有虚拟Dom但还没有渲染到页面),在函数中操作页面元素并没有效果,因为虚拟DOM已经确定了,等到其渲染时就会覆盖

第二步: 给vm追加$el属性用它来代替”el”，这个属性代表了真实的DOM元素(将虚拟Dom渲染到页面生成真实DOM）

第三步: 调用mounted()钩子函数,在函数中操作页面的DOM会有效果,因为操作的是真实DOM
mounted: 适合操作页面的DOM元素

在这里插入图片描述

const vm = new Vue({
    el : '#app',
    data : {
        msg : 'Vue生命周期',
        counter : 1
    }, 
    beforeMount() {
        // 挂载前
        console.log('beforeMount')
    },
    mounted() {
        // 挂载后
        console.log('mounted')
        // $el属性代表了真实的DOM元素
        console.log(this.$el)
        console.log(this.$el instanceof HTMLElement)
    }
})

`更新阶段(data发生变化)`

更新阶段开始的标志是data发生变化时需要重新渲染页面

第一步: 调用beforeUpdate()钩子函数(此时只是更新了内存中的data数据发生，页面还未更新）

第二步: 进行diff算法新旧DOM比对, 虚拟DOM重新渲染和修补

第三步: 调用updated()钩子函数(此时内存中的数据和页面都已更新）

更新阶段适合做什么

beforeUpdate：适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器
updated：适合在页面更新后对数据做统一处理

在这里插入图片描述

<div id="app">
    <h1>{{msg}}</h1>
    <h3>计数器：{{counter}}</h3>
    <h3 v-text="counter"></h3>
    <button @click="add">点我加1</button>
</div>
<script>
    const vm = new Vue({
        el : '#app',
        data : {
            msg : 'Vue生命周期',
            counter : 1
        },
        methods: {
            add(){
                this.counter++
            },
        },
        // 更新阶段
        beforeUpdate() {
            // 更新前,只是更新了内存中的数据,还没有更新页面
            console.log(this.counter)
        },
        updated() {
            // 更新后
            console.log(this.counter)
        },
    })
</script>

`销毁阶段(调用方法)`

销毁阶段开始的标志是手动调用vm.$destroy()方法
第一步(解绑前): 调用beforeDestroy()钩子函数,此时Vue实例还在, vm对象上所有的东西还没有开始解绑(子组件,监视器,自定义事件监听器,v-指令)

虽然vm上的监视器,子组件,v-指令,自定义的和内置的事件监听器还没有解绑, 但是它们都已经不能用了,和destroyed()效果相同
修改data也不会重新渲染页面了,因为当前已经处于销毁阶段了,渲染阶段是更新阶段的事情

第二步(解绑后): 调用destroyed()钩子函数,此时Vue实例还在但是vm对象上所有的东西都已经解绑完成了
销毁阶段适合做什么: beforeDestroy方法适合做销毁前的准备工作，例如可以在这里清除定时器
在这里插入图片描述

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h3>计数器：{{counter}}</h3>
        <h3 v-text="counter"></h3>
        <!--高版本的Vue会把内置的事件监听器也会卸载-->
        <button @click="add">点我加1</button>
        <button @click="destroy">点我销毁</button>
    </div>
    <script>
        const vm = new Vue({
            el : '#app',
            data : {
                msg : 'Vue生命周期',
                counter : 1
            },
            methods: {
                add(){
                    console.log('add....')
                    this.counter++
                },
                destroy(){
                    // 执行销毁阶段,销毁vm
                    this.$destroy()
                },
             
            },
 
            watch : {
                counter(){
                    console.log('counter被监视一次')
                }
            },
            // 销毁阶段
            beforeDestroy() {
                // 销毁前
                console.log('beforeDestroy')
                console.log(this)
                // 修改data也不会重新渲染页面了
                this.counter = 1000
            },
            destroyed() {
                // 销毁后
                console.log('destroyed')
                console.log(this)
            },
        })
    </script>
</body>