Vue实例的生命周期钩子

最新推荐文章于 2022-10-25 10:44:41 发布

铁锤妹妹@

最新推荐文章于 2022-10-25 10:44:41 发布

阅读量256

点赞数 1

分类专栏： Vue技术栈文章标签： vue

本文链接：https://blog.csdn.net/weixin_45811256/article/details/109518043

版权

Vue技术栈专栏收录该内容

72 篇文章 10 订阅

订阅专栏

最近在学习Vue，接触到了Vue的生命周期钩子，看了视频也百度了一些相关的，在这做一下笔记吧~

生命周期函数就是vue实例在某一个时间点会自动执行的函数

文章目录

- 涉及到的生命周期钩子
- 结合代码去理解钩子函数

涉及到的生命周期钩子

放上官方的生命周期图：
在这里插入图片描述
图上涉及到的生命周期钩子有8个

生命周期钩子	触发的行为	在这阶段可操作的例子
beforeCreate	vue实例的挂载元素$el和数据data都为undefined，还未初始化。	可在这加个loading事件
created	vue实例的数据data有了，$el还没有，DOM未生成	结束loading，还可做一些初始化，实现函数自执行
beforeMount	vue实例的$el和data都初始化了，但还是虚拟的dom节点，页面还未被渲染。先把坑占住，到后面mounted挂载的时候再把值渲染进去。
mounted	vue实例挂载完成，虚拟的DOM变成真实DOM	在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeUpdate	data中的数据发生改变，还没有重新渲染之前调用
updated	data中的数据发生改变，重新渲染之后调用	数据更新时，做一些处理（此处也可以用watch进行观测）
beforeDestroy	组件销毁前调用	给用户提示，比如“您确定删除xxx吗？”
destroyed	组件销毁后调用，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在	当前组件已被删除，清空相关内容

除了这8个还有另外2个

activated	使用keep-alive，组件被激活时调用，每次进入都会执行钩子中的函数
deactivated	使用keep-alive，组件被移除时调用

结合代码去理解钩子函数

附上大佬的代码，简洁易懂：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue实例的生命周期钩子</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{message}}</p>
    <input type="button" @click="change" value="更新数据" />
  </div>
  <script>
    // 生命周期函数就是vue实例在某一个时间点会自动执行的函数
    var app = new Vue({
      el:'#app',
      data: {
        message : "Vue实例的生命周期钩子"
      },
      methods: {
        change(){
          this.message = '更新快更新'
        }
      },
      beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //undefined
            console.log("%c%s", "color:red","message: " + this.message);//undefined
        },
      created: function () {
          console.group('created 创建完毕状态===============》');
          console.log("%c%s", "color:red","el     : " + this.$el); //undefined
          console.log("%c%s", "color:green","data   : " + this.$data); //[object Object]  =>  已被初始化
          console.log("%c%s", "color:green","message: " + this.message); //Welcome Vue  =>  已被初始化
      },
      beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:green","el     : " + (this.$el)); //已被初始化
            console.log(this.$el); // 当前挂在的元素
            console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:green","message: " + this.message); //已被初始化
        },
      mounted: function () {
          console.group('mounted 挂载结束状态===============》');
          console.log("%c%s", "color:green","el     : " + this.$el); //已被初始化
          console.log(this.$el);
          console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
          console.log("%c%s", "color:green","message: " + this.message); //已被初始化
      },
      beforeUpdate: function () {
            alert("更新前状态");
            console.group('beforeUpdate 更新前状态===============》'); //这里指的是页面渲染新数据之前
            console.log("%c%s", "color:green","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:green","data   : " + this.$data);
            console.log("%c%s", "color:green","message: " + this.message);
            alert("更新前状态2");
        },
      updated: function () {
          console.group('updated 更新完成状态===============》');
          console.log("%c%s", "color:green","el     : " + this.$el);
          console.log(this.$el);
          console.log("%c%s", "color:green","data   : " + this.$data);
          console.log("%c%s", "color:green","message: " + this.message);
      },
      beforeDestroy: function () {
          console.group('beforeDestroy 销毁前状态===============》');
          console.log("%c%s", "color:red","el     : " + this.$el);
          console.log(this.$el);
          console.log("%c%s", "color:red","data   : " + this.$data);
          console.log("%c%s", "color:red","message: " + this.message);
      },
      destroyed: function () {
          console.group('destroyed 销毁完成状态===============》');
          console.log("%c%s", "color:red","el     : " + this.$el);
          console.log(this.$el);
          console.log("%c%s", "color:red","data   : " + this.$data);
          console.log("%c%s", "color:red","message: " + this.message)
      }
  })
  </script>
</body>
</html>

主要就是去查看打印出来的顺序和结果！！！效果：

在这里插入图片描述
另外在红框地方，我们能发现el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，页面还未被渲染，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

在这里插入图片描述
当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。

注意beforeUpdate是指view层的数据变化前，不是data中的数据改变前触发。因为Vue是数据驱动的。注意观察弹窗就容易发现。

destroyed钩子函数有一点一定要特别注意：在执行destroy方法后，对data的改变不会再触发周期函数，此时的vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。所以对于实时显示的通知型组件，在他destroyed之前，我们必须手动removeChild()删除该节点；否则，DOM节点还是存在，影响浏览器性能。

注意：不要在生命周期钩子上使用箭头函数，如果生命周期使用了箭头函数，那么this就会指向window而不是当前Vue实例

最后附上参考链接：
https://www.cnblogs.com/xiaobaibubai/p/8383952.html
https://blog.csdn.net/qq_35585701/article/details/81216704

铁锤妹妹@

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue实例的生命周期钩子

最近在学习Vue，接触到了Vue的生命周期钩子，看了视频也百度了一些相关的，在这做一下笔记吧~生命周期函数就是vue实例在某一个时间点会自动执行的函数文章目录涉及到的生命周期钩子结合代码去理解钩子函数涉及到的生命周期钩子放上官方的生命周期图：图上涉及到的生命周期钩子有8个生命周期钩子触发的行为在这阶段可操作的例子beforeCreatevue实例的挂载元素$el和数据data都为undefined，还未初始化。可在这加个loading事件createdvue实
复制链接

扫一扫