Vue 生命周期（二）和如何打印出来HTMLDivElement

最新推荐文章于 2025-06-11 09:51:48 发布

原创最新推荐文章于 2025-06-11 09:51:48 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

独学而无友，则孤陋寡闻。q群582951247

vue 专栏收录该内容

106 篇文章

订阅专栏

本文深入剖析Vue.js的生命周期，从创建到销毁的各个阶段，详细解释每个钩子函数的作用及调用时机，通过实例代码演示各阶段的状态变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码背景在打印如下代码的时候

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
    <title>Document</title>
    <style>
        #app{
            margin-bottom: 1em;
        }
        body {
            font-size: 1.5em;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>{{count}}</h1>
    <button @click="updateEvent">Update</button>
    <button id="del">删除当前元素</button>
</div>
<script>
  var vm=new Vue({
      el:'#app',
      data:{
          count:0
      },
      methods:{
          updateEvent:function () {
              this.count+=1;
          }
      },
      beforeCreate:function () {
          //元素刚被建立，属性计算之前
          console.log("beforeCreated -this.count",this.count);
          //el 是整个'#app' 元素和里面的内容
          console.log("beforeCreated -this.$el",this.$el);
      },
      created:function () {
          //元素实例已经建立，属性已经绑定，但是DOM没生成
          console.log('created- this.count',this.count);
          console.log('created- this.$el',this.$el);
      },
      beforeMount:function () {
          //模版 template 编译活挂载至 HTML之前
          console.log('beforeMount -this.$el'+this.$el.innerHTML);
          console.log('beforeMount -this.$el'+this.$el);
      },
      mounted:function () {
          //模版 template 编译活挂载至 HTML之后
          console.log('mounted -this.$el'+this.$el.innerHTML);
      },
      beforeUpdate:function () {
          //元素被更新之前
          console.log('beforeUpdate:',
          this.$el.querySelector('h1').innerText,
          this.count);
      },
      updated:function () {
          //元素更新 之后
          console.log('updated:', this.$el)
      },
      beforeDestroy:function(){
          //移除 vue instance 之前
          console.log('beforeDestroy')
      },
      destroyed:function () {
          //移除Vue instance 之后
          console.log('destroyed');
      }
  });

  document.getElementById('del').addEventListener('click',function () {
      vm.$destroy();

  })
</script>


</body>

</html>

摘出来

      beforeMount:function () {
          //模版 template 编译活挂载至 HTML之前
          console.log('beforeMount -this.$el'+this.$el.innerHTML);
          console.log('beforeMount -this.$el'+this.$el);
      },

发现

this.$el打印出来是HTMLDivElement 什么鬼。。

发现后面加innerHTML就可以打印出来正常元素了

打印记录

<!--打印结果-->
beforeCreated -this.count undefined
 beforeCreated -this.$el undefined
<!--元素实例已经建立，属性已经绑定，但是DOM没生成-->
created- this.count 0
created- this.$el undefined
<!-- 模版 template 编译活挂载至 HTML之前-->
beforeMount -this.$el

<h1>{{count}}</h1>
<button @click="updateEvent">Update</button>
<button id="del">删除当前元素</button>
//模版 template 编译活挂载至 HTML之后
mounted -this. $el

<h1>0</h1> <button>Update</button> <button id="del">删除当前元素</button>
//点击更新的时候
beforeUpdate: 0 1
 updated: 1 1
 beforeUpdate: 1 2
 updated: 2 2
 beforeUpdate: 2 3
 updated: 3 3
 beforeUpdate: 3 4
 updated: 4 4
//点击删除的时候
beforeDestroy
 destroyed
之后再点击更新将无效

这个时候我们再去看之前的官网生命周期图理解就会更深刻一点

https://blog.youkuaiyun.com/mp624183768/article/details/87911795