Vue之生命周期的8个钩子函数

最新推荐文章于 2024-07-02 10:02:04 发布

MiniCai_

最新推荐文章于 2024-07-02 10:02:04 发布

阅读量4.4k

点赞数 1

分类专栏： Vue 文章标签： Vue 生命周期钩子函数

本文链接：https://blog.csdn.net/MiniCai_/article/details/90647862

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue-生命周期

- 总结：

生命是生命周期呢？
当前组件在创建到销毁经历的一系列过程，称之为生命周期
生命周期的分为几个阶段？每个阶段有哪些钩子函数
生命周期分为3个阶段，这三个阶段分别是：初始化、运行中、销毁
初始化阶段：有4个钩子函数，触发条件是自动的
beforeCreate
组件即将创建，进行组件事件和生命周期的初始化
项目中一般不使用，至少对于我来说是的哈
有的开发者也会在这里进行数据请求
created
组件创建完成
项目中：
1）异步请求接口数据
2）数据修改
beforeMount
组件即将挂载
判断根实例组件是否有el选项，如果没有，那么手动挂载，判断根实例组件中的其他子组件是否有template选项，如果没有，那么使用outerHTML插入
项目中：
1）异步请求接口数据
2）数据修改
mounted
组件挂载结束
使用真实DOM替换VDOM
项目中
1）异步请求接口数据
2）数据修改
3）真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的） )


<body>
    <div id="app">
        <button @click="flag = false">我要销毁啦</button>
        <Hello v-if="flag"></Hello>
    </div>
    <template id="hello">
      <div>
        <input type="text" v-model="money" />
        <h3>{{ money }}</h3>
      </div>
    </template>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        Vue.component("Hello", {
            template: "#hello",
            // template:"<h3> are u ready for ur future</h3>"
            data() {
                return {
                    money: 2000
                };
            },
            //init
            /* 这个阶段是组件被创建
                            data：选项中的数据获取不到
                            真实的DOM耶获取不到
                            再项目中基本上没什么用
                            但是这个阶段是一个对事件和生命周期的准备阶段
                            必不可少
                            1 组件初始化beforeCreate
                            data undefined
                            真实DOM null */

            beforeCreate() {
                console.log("1 组件初始化beforeCreate");
                console.log("data", this.money);
                console.log("真实DOM", document.querySelector("h3"));
            },

            /*
                        组件创建结束
                         data选项中的数据能获取到
                        但是取不到真实的DOM
                        在项目中可以修改数据和发出异步数据请求
                             */

            created() {
                this.money = 200000; //会修改之前定义的money的值
                console.log("2 created");
                console.log("data", this.money);
                console.log("真实DOM", document.querySelector("h3"));
            },

            /*
                        组件即将挂载
                         data选项中的数据能获取到
                        但是取不到真实的DOM
                        在项目中可以修改数据和发出异步数据请求
                             */

            beforeMount() {
                //组件即将挂载
                console.log("3 beforeMount");
                console.log("data", this.money);
                console.log("真实DOM", document.querySelector("h3"));
            },

            /* 可以获得data数据
                    也可以取到真实DOM
                    一般在项目中进行：
                            数据修改
                            异步数据请求
                            真实DOM操作
                    但是我们一般不推荐操作真实DOM，
                    推荐进行第三方库的实例化（比如静态数据渲染）*/
            mounted() {
                //组件挂载结束了，
                this.time = setInterval(() => {
                    console.log(11111)
                }, 1000)
                document.querySelector("h3").style.background = "salmon";
                console.log("4 mounted");
                console.log("data", this.money);
                console.log("真实DOM", document.querySelector("h3"));
            },

            //运行中要有触发条件才会改变  不触发是没有结果的
            /*  这个阶段里
                 可以拿到data的数据
                 也可以取到真实的DOM
                 这个阶段进行的是VDOM和DIFF算法的对比
                 都是在组件内部进行的 
                 一般我们项目中不使用 */
            beforeUpdate() {
                console.log("5 beforeUpdate");
                console.log("data", this.money);
                console.log("真实DOM", document.querySelector("h3"));
            },

            /*  
                 此时 组件更新结束
                 通过render函数将VDOM渲染成真实DOM
                 然后驱动vue进行视图更新 
                 在这个阶段里*/
            updated() {
                //组件更新结束
                document.querySelector("h3").style.background = "blue";
                console.log("6 updated");
                console.log("data", this.money);
                console.log("真实DOM", document.querySelector("h3"));
            },
            beforeDestroy() {
                console.log(' beforeDestroy ')
            },
            destroyed() {
                clearInterval(this.time)
                console.log(' destroy ')

            },
        });

        new Vue({
            // el: "#app",
            data: {
                msg: "hello Melinda!",
                flag: true,
            }

        }).$mount("#app");
    </script>
</body>

总结：

初始化过程中在项目中使用
数据请求：created
DOM操作： mounted
数据修改： beforeMount created mounted
运行中阶段：有2个钩子函数：触发条件是：当data选项中的数据发生改变时
beforeUpdate：
内部操作： vdom生成和diff的对比
updated
Rdom已经生成，可以进行异步数据请求得到的dom渲染的第三方库实例化
销毁阶段：有2个钩子函数
beforeDestory: 组件即将销毁，准备调用 $destroy() 方法
destoryed：组件销毁结束

这两个钩子函数没有什么去别，功能很相似

项目中：
这两个钩子函数都可以用来做善后,把一些计时器，第三方库实例化出来的实例

组件销毁的两种方式：

使用$destroy()方法（内部销毁）
缺点：会将组件的模板也保留下来
使用开关销毁（外部销毁）
v-if
这种类型的销毁不会留有模板

有一个钩子函数可以不写，这个钩子函数就是render 函数

生命周期中钩子函数的触发条件是什么？
项目中如何使用？
名词解释：
钩子函数：钩子函数就是options配置项中的一个方法，在特定的触发条件（时机）下会自动触发
除了根实例组件以外，其他的组件中的数据项 data 必须是一个函数，而且这个函数必须返回一个对象
为什么是函数呢？
原因：我们希望组件的数据是独立的，有一定作用域的
为什么返回值是对象？
原因：是为了符合数据驱动原理设计，让observer将data选项中的数据设置 getter 和 setter
其他选项写在生命周期的上