VUE 2.X生命周期

GeneralHuge

已于 2022-07-27 23:03:25 修改

阅读量500

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-07-27 23:02:35 首次发布

本文链接：https://blog.csdn.net/weixin_44482359/article/details/126024636

版权

vue2.X生命周期

vue2.X生命周期

vue2.X生命周期

最近在开发中逐渐接触到前端，并且公司的前端主要是运用Vue,因此开始了个人的Vue学习之旅。其实生命周期我感觉很类似与后端的代码执行顺序，我觉得简单来说就是——在跳转到页面后先执行什么，在执行什么，页面渲染的顺序等等一系列。

1、什么是生命周期

简单来说就是从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

2、vue生命周期钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

vue的生命周期通常有8个，分别是创建前后，挂载前后，更新前后，销毁前后，分别对应的钩子函数有beforeCreate创建前，created创建后，beforeMount挂载前，moubted挂载后，beforeUpdate更新前，updated更新后，beforeDestory销毁前，destoyed销毁后.

这八个生命周期函数在开发中用到的较多的其实只有 created和moubted，本人Vue开发经验较少，如有错误还望指出。

除了这八个意外还有三个较为特殊的函数：

1、activated（）组件激活时。当keep-alive 缓存组件才会有的生命周期的钩子函数
2、deactivated （）组件未激活时。当缓存组件隐藏时才触发
3、errorCaptured（）捕捉子组件错误时调用。会接收三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。可以使用 return false 阻止报错，但实际上错误仍然存在我们一般不会这么用

页面一开始就会加载创建前后，挂载前后的钩子函数，而更新前后的钩子函数需要我们去改变data的时候才能触发，就比如一个点击按钮执行一个方法，这个方法给里面的data里的属性进行复制操作这个时候就会触发更新前后的钩子函数,销毁的钩子函数必须在得当的组件中进行切切换的时候就会进行销毁

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

3、vue生命周期详解

(https://img-blog.csdnimg.cn/4e66ea6e2fbb47d48244b5230c7709bc.png)
简单来说VUE 2.X 的生命周期顺序就是：
1.beforeCeate（）
2.created()
3.beforeMount()
4.mounted()
5.beforeDestroy()
6.destroyed()

其详解图如下

Vue 2.X生命周期详解

代码示例

1、

<!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 src="./lib/vue-2.4.0.js"></script>
</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)
        // this.show()
        // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
      },
      created() { // 这是遇到的第二个生命周期函数
        // console.log(this.msg)
        // this.show()
        //  在 created 中，data 和 methods 都已经被初始化好了！
        // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
      },
      beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
        // console.log(document.getElementById('h3').innerText)
        // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
      },
      mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
        // console.log(document.getElementById('h3').innerText)
        // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
      },


      // 接下来的是运行中的两个事件
      beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？  数据肯定被更新了】
        /* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是：' + this.msg) */
        // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
      },
      updated() {
        console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是：' + this.msg)
        // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
      }
    });
  </script>
</body>

</html>