«

Vue生命周期怎么理解

时间:2024-7-4 11:12     作者:韩俊     分类: Javascript


这篇“Vue生命周期怎么理解”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue生命周期怎么理解”文章吧。

    1、定义

    生命周期函数(俗称:钩子函数)

    根据vue整个渲染机制,在渲染的每个关键点上,提供对应的函数,进行一些相关的业务操作。

    2、四个阶段

    初始阶段:beforeCreate():可以加loading效果、

    created():结束loading效果,发请求,获取数据,添加定时器;

    ①创建Vue实例、②初始化事件对象和生命周期、③调用beforeCreate()钩子函数(无法访问data)

    ④初始化数据代理和数据监测、⑤调用created()钩子函数(可以访问打他对象属性)

    ⑥编译模板语句生成虚拟DOM

    挂载阶段:beforeMount()、mounted();

     ①调用beforeMount()钩子函数,(真实DOM未生成),②给vm追加$el属性,用它来代替"$el","¥el"代表了真是的DOM元素(真实DOM生成,页面渲染完成)③调用mounted()钩子函数(可以操作DOM元素)。

    更新阶段:beforeUpdate()、updated();

    ①data发生变化,②调用beforeUpdate()钩子函数(数组发生变化,页面未更新)(手动移除事件监听器)、③虚拟DOM重新渲染和修补、④调用updated钩子函数(页面已更新)(可以对数据做统一处理)

    销毁阶段:beforeDestroy()、destroyed()。

    ①调用 this.$destroy()方法、②调用beforeDestroy()钩子函数(做销毁前的准备工作)、③卸载子组件和监听器、解绑自定义事件监听器、④调用destroyed()钩子函数(所有的东西已经解绑)

        <div class="vues">
            <h2>{{msg}}</h2>
            <h2>{{count}}</h2>
            <button @click="add">点我加1</button>
            <button @click="destroy">点击销毁</button>
        </div>
        <script>
            new Vue({
                el: ".vues",
                data: {
                    msg: '生命周期',
                    count: 0
                },
                methods: {
                    add: function () {
                        this.count++
                    },
                    destroy() {
                        this.$destroy()
                    }
                },
                /*
                    1、初始阶段
                        el有,template也有,最终编译template模板语句
                        el有,template没有,最终编译el模板语句
                        el没有的时候,需要手动调用vm.$mount(el) 进行手动挂载,然后流程才能继续,                                
                        此时如果template有,最终编译template模板语句
                        el没有的时候,需要手动调用vm.$mount(el) 进行手动挂载,然后流程才能继续,v 
                        此时如果template没有,最终编译el模板语句
                    结论:流程想要控制:el必须存在
                    el和template同时存在,优先选择template,如果没有template才选择el    
                */
                beforeCreate() {
                    // 创建前:数据代理和数据监测的创建前
                    // 此时还无法访问data当中的数据,包括methods也是无法访问的。
                    console.log("beforeCreate");
                },
                created() {
                    // 创建后:表示数据代理和数据监测创建完毕,可以访问data中的数据了。
                    // 可以访问methods
                    console.log('created');
                },
                beforeMount() {
                    console.log('beforeMount');
                },
                mounted() {
                    console.log('mounted');
                },
                beforeUpdate() {
                    console.log("beforeUpdate");
                },
                updated() {
                    console.log('updated');
                },
                beforeDestroy() {
                    console.log('beforeDestroy');
                },
                destroyed() {
                    console.log('destroyed');
                }
            })
        </script>

    标签: javascript vue

    热门推荐