vue开端 -- 做个工匠 - 2 生命周期

嗨朋友！感谢光临我的博客
还没上岸的我 还在努力之中，本文中理解有错的时候还请您指点
本人也很喜欢爬虫 欢迎来到本人的公众号 一起交流
公众号：Linux下撸python
能得指点是晚辈荣幸

文章目录

上一篇文章：vue开端 – 做个工匠 - 1 数据绑定 以及 指令

絮叨一下

嗨你好 突然就很喜欢工匠这个词，但似乎缺少了一些工匠的心，努力做一个工匠 开始学习vue这个主流框架，希望我的这篇文章对屏幕前的你有所启发

生命周期

在每个vue实例被创建的时候都会经过一系列的初始化的过程 这个过程就是生命周期

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法

我们来看一下官网给出 的图示

从这里我们呢可以分析出 一共有 8 个生命周期

他们分别是

  1. beforeCreate()
  2. created()
    创建以及创建之前
  3. beforeMount()
  4. mounted()
    挂载以及挂载之前
  5. beforeUpdate()
  6. updated()
    更新以及更新之前
  7. beforeDestroy()
  8. destroyed()
    销毁以及销毁之前

见名知意
在这里插入图片描述
然后我们根据案例详细说一下这个

创建实例

<!DOCTYPE html>
<html lang="en">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<body>
    <div class="app">{{name}}</div>
    <script>
        let vm = new Vue({
            el: ".app",
            data: {
                name: "嗨 你好 vue"
            }
    </script>
</body>

</html>

简单的一个数据绑定 到底经历了那些呢？

有一些应用场景以及注意事项均已经放在代码的注释部分

首先就是创建了吧

    <script>
        let vm = new Vue({
            el: ".app",
            data: {
                name: "嗨 你好 vue"
            },
            beforeCreate() {
                console.log("这个是创建之前的函数");
                console.log(this.name);
                console.log(this.$el);
            },
            // 只是创建一个vue实例 没有进行挂载 也没有进行数据绑定
            // 常用于初始化非响应式变量

            created() {
                console.log("这个是创建完成的函数");
                console.log(this.name);
                console.log(this.$el);
            },

            // 在内存中 获取 到name的值 没有进行 数据绑定 也没有进行挂载
            // 常用与简单的ajax操作
    
        })
    </script>

在这里插入图片描述

我们可以看到 beforeCreate

console.log(this.name);
console.log(this.$el);

均为 undefined
也就是说 没有绑定数据也没有 挂载

创建接下来就是挂载

   <script>
        let vm = new Vue({
            el: ".app",
            data: {
                name: "嗨 你好 vue"
            },
            beforeCreate() {
                console.log("这个是创建之前的函数");
                console.log(this.name);
                console.log(this.$el);
            },
            // 只是创建一个vue实例 没有进行挂载 也没有进行数据绑定
            // 常用于初始化非响应式变量

            created() {
                console.log("这个是创建完成的函数");
                console.log(this.name);
                console.log(this.$el);
            },

            // 在内存中 获取 到name的值 没有进行 渲染 也没有进行挂载
            // 常用与简单的ajax操作

            // 在这里注意 判断是否有el选项 如果有继续执行，如果没有则结束掉生命周期直到调用 $mount(el)

            beforeMount() {
                console.log("这个是挂载之前的函数");
                console.log(this.name);
                console.log(this.$el);
            },

            // 进行挂载 挂载dom元素 但是并没有绑定数据也是 {{name}} 原样输出

            mounted() {
                console.log("这个是挂载之后的函数");
                console.log(this.name);
                console.log(this.$el);
            },
            // 成功挂载 并进行数据绑定
            // 常用于获取VNode信息和操作，ajax请求
        })
    </script>

在这里插入图片描述
在beforeMount – mount这个阶段
进行挂载 挂载dom元素 但是并没有绑定数据也是 {{name}} 原样输出
beforeMount阶段应该是虚拟DOM
在这个阶段添加el并替换掉挂载的DOM元素
在beforeMount之前没有el

更新阶段

我们添加一个按钮 用来触发更新阶段

点击按钮 更新 数据 调用up函数


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./作业/vue.js"></script>
</head>

<body>
    <div class="app">{{name}}
        <button @click="up">
            更新
        </button>
    </div>

    <script>
        let vm = new Vue({
            el: ".app",
            data: {
                name: "嗨 你好 vue"
            },
            methods: {
                up() {
                    this.name = "123123";
                }
            },
            beforeCreate() {
                console.log("这个是创建之前的函数");
                console.log(this.name);
                console.log(this.$el);
            },
            // 只是创建一个vue实例 没有进行挂载 也没有进行数据绑定
            // 常用于初始化非响应式变量

            created() {
                console.log("这个是创建完成的函数");
                console.log(this.name);
                console.log(this.$el);
            },

            // 在内存中 获取 到name的值 没有进行 渲染 也没有进行挂载
            // 常用与简单的ajax操作

            // 在这里注意 判断是否有el选项 如果有继续执行，如果没有则结束掉生命周期直到调用 $mount(el)

            beforeMount() {
                console.log("这个是挂载之前的函数");
                console.log(this.name);
                console.log(this.$el);
            },

            // 进行挂载 挂载dom元素 但是并没有绑定数据也是 {{name}} 原样输出

            mounted() {
                console.log("这个是挂载之后的函数");
                console.log(this.name);
                console.log(this.$el);
            },
            // 成功挂载 并进行数据绑定
            // 常用于获取VNode信息和操作，ajax请求


            beforeUpdate() {
                console.log("这个是更新之前的函数");
                console.log(this.name);
                console.log(this.$el);
            },
            // 响应式数据更新时调用
            // 适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器

            updated() {
                console.log("这个是更新之后的函数");
                console.log(this.name);
                console.log(this.$el);
            },
            // 虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作
            // 避免在这个钩子函数中操作数据，可能陷入死循环

    </script>
</body>

</html>

在这里插入图片描述
注意 应用场景这里在以后还是经常用的到的

最后一步就是销毁

在这里插入图片描述
也就是说我们可以调用 destory函数触发

我们也写一个函数 用来触发

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./作业/vue.js"></script>
</head>

<body>
    <div class="app">{{name}}
        <button @click="des">
            删除
        </button>

        <button @click="up">
            更新
        </button>

    </div>

    <script>
        let vm = new Vue({
            el: ".app",
            data: {
                name: "嗨 你好 vue"
            },
            methods: {
                des() {
                    vm.$destroy();
                    // 进行销毁
                },
                up() {
                    this.name = "123123";
                }
            },
            beforeCreate() {
                console.log("这个是创建之前的函数");
                console.log(this.name);
                console.log(this.$el);
            },
            // 只是创建一个vue实例 没有进行挂载 也没有进行数据绑定
            // 常用于初始化非响应式变量

            created() {
                console.log("这个是创建完成的函数");
                console.log(this.name);
                console.log(this.$el);
            },

            // 在内存中 获取 到name的值 没有进行 渲染 也没有进行挂载
            // 常用与简单的ajax操作

            // 在这里注意 判断是否有el选项 如果有继续执行，如果没有则结束掉生命周期直到调用 $mount(el)

            beforeMount() {
                console.log("这个是挂载之前的函数");
                console.log(this.name);
                console.log(this.$el);
            },

            // 进行挂载 挂载dom元素 但是并没有绑定数据也是 {{name}} 原样输出

            mounted() {
                console.log("这个是挂载之后的函数");
                console.log(this.name);
                console.log(this.$el);
            },
            // 成功挂载 并进行数据绑定
            // 常用于获取VNode信息和操作，ajax请求


            beforeUpdate() {
                console.log("这个是更新之前的函数");
                console.log(this.name);
                console.log(this.$el);
            },
            // 响应式数据更新时调用
            // 适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器

            updated() {
                console.log("这个是更新之后的函数");
                console.log(this.name);
                console.log(this.$el);
            },
            // 虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作
            // 避免在这个钩子函数中操作数据，可能陷入死循环

            beforeDestroy() {
                console.log("这个是销毁之前的函数");
                console.log(this.name);
                console.log(this.$el);
            },
            // 实例销毁之前调用。这一步，实例仍然完全可用，this仍能获取到实例
            // 常用于销毁定时器、解绑全局事件、销毁插件对象等操作

            destroyed() {
                console.log("这个是销毁之后的函数");
                console.log(this.name);
                console.log(this.$el);
            }
            // 实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
        })
    </script>
</body>

</html>

在这里插入图片描述
在点击销毁之后 我们还可以进行 更新吗 这肯定是不可以的

vue对象已经销毁了 肯定是没办法 在进行更改的

写给看到最后的你

朋友，感谢你看到了最后，新手报道，技术不成熟的地方请多多指点，感谢！

有问题可以私信我、大家一起交流 前端知识 以及 爬虫 python知识。

公众号：Linux下撸python
期待和你再次相遇
愿你学的愉快

在这里插入图片描述

版权声明：本文为m0_48486617原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。