vue的生命周期

最新推荐文章于 2023-03-17 15:31:58 发布

成长中...

最新推荐文章于 2023-03-17 15:31:58 发布

阅读量155

点赞数

本文链接：https://blog.csdn.net/m0_37816134/article/details/100999049

版权

生命周期：指vue实例创建，运行，到销毁期间，伴随着各种各样的事件，这些事件称为生命周期。

生命周期就是Vue 实例从创建到销毁的过程，从开始创建，初始化数据，编译模板，挂载Dom——>渲染，更新->渲染，销毁等一系列过程，称为Vue的生命周期

生命周期钩子 = 生命周期函数 = 生命周期事件

生命周期分类：

1、创建期间的生命周期函数：

（1）、beforeCreate：内存中创建出实例，但还没有初始化好data和methods属性；

（2）、created :data和methods已经创建好，但是还未开始编译模板；

（3）、beforeMounted：完成了模板编译，但是还未挂载到页面中；

（4）、mounted：将编译好的模板挂载到页面中指定的容器中；

2、运行期间的生命周期函数：

（5）、beforeUpdate：状态更新之前执行此函数，此时data中的值是最新的，但是界面上的数据还是旧数据，此时还没有重新渲染DOM节点；

（6）、update：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经完成重新渲染；

3、销毁期间的生命周期函数：

（7）、beforeDestroy ：实例销毁之前调用，此时实例可继续使用；

（8）、destroyed：所有实例被销毁。

这两个函数一般不会自动运行。需要通过执行vm.$destroy()时才会执行（类似C++ 的释放堆空间操作）

简而言之：创建前/后,载入前/后，更新前/后，销毁前/后

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script type="text/javascript" src="../lib/vue-2.4.0.js" ></script>
  <link rel="stylesheet" href="../lib/bootstrap-3.3.7.css"></link>
</head>
 
<body>
  <div id="app">
    <input type="button" value="修改msg" @click="msg='No'">
    <h3 id="h3">{{ msg }}</h3>
  </div>
 
  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'ok'
      },
      methods: {
        show() {
          console.log('执行了show方法')
        }
      },
      beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
          console.log(this.msg) //undefined
          this.show() //[Vue warn]: Error in beforeCreate hook: "TypeError: this.show is not a function"
        // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
      },
      created() { // 这是遇到的第二个生命周期函数
         console.log(this.msg) //ok
         this.show() //执行了show方法
        //  在 created 中，data 和 methods 都已经被初始化好了！
        // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
      },
      beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
          console.log(document.getElementById('h3').innerText) //[Vue warn]: Error in beforeMount hook: "TypeError: Cannot read property 'innerText' of null"
        // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
      },
      mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
         this.msg ='1111111'
         console.log(document.getElementById('h3').innerText) //ok
        // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
      }, 
 
      // 接下来的是运行中的两个事件
      beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？  数据肯定被更新了】
         console.log('界面上元素的内容：' + document.getElementById('h3').innerText) //ok
        console.log('data 中的 msg 数据是：' + this.msg) //111111
        // 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
      },
      updated() {
        console.log('界面上元素的内容：' + document.getElementById('h3').innerText) //1111
        console.log('data 中的 msg 数据是：' + this.msg)//11111
        // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
      }
    });
  </script>
</body>
 
</html>