Vue-生命周期函数

最新推荐文章于 2024-04-10 17:47:42 发布

奔跑的大熊猫

最新推荐文章于 2024-04-10 17:47:42 发布

阅读量198

点赞数

分类专栏： Javascript Vue.js

本文链接：https://blog.csdn.net/qq549879500/article/details/82143387

版权

Javascript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Vue.js

2 篇文章 0 订阅

订阅专栏

生命周期

什么是生命周期
概念：每一个vue实例创建运行销毁的过程就是生命周期,在实例的生命周期中,总是伴随各种事件这些事件就是生命周期函数

生命周期函数：在实例的生命周期中在特定阶段执行的一些特定的事件叫做生命周期函数

生命周期钩子：就是生命周期事件的别名
生命周期钩子 = 生命周期函数 = 生命周期事件
所有的生命周期函数.无论是哪个阶段的. 它的执行都是vue框架的自动执行,根据不同阶段自动执行的,并不受人为控制

主要的生命周期函数分类

创建阶段的生命周期函数

beforeCreate 是实例创建阶段的第一个生命周期函数是在 data && methods 还未初始化的时候就被调用所以这个函数我们很少使用因为它并没有什么用

<body>
<div id="app">
    <button @click="msg='no'">修改 msg 的值 为 no</button>
    <h1 id="txtMsg">{{msg}}</h1>
  </div>

<script>
// 创建一个vue实例
var vm = new Vue({
      el: '#app',
      data: {
        msg: 'ok'
      },
      methods: {
        test() {
          console.log('有人调用了  test  方法')
        }
      },

// 创建阶段的第一个生命周期函数
      beforeCreate() {
        console.log(this.msg)  // 输出结果 undefined
        this.test()  // Error this.test is not a function"
      },
</script>
<body>

created 是在页面创建完毕后第一个执行的生命周期函数,只要页面加载完毕必然执行.也是我们在日常中经常使用的一个函数.我们经常通过这个函数发送ajax请求得到数据进行操作并把获取到的数据挂载到 data 上存储；在这个函数执行的时候 data && methods 已初始化完毕


created() {
        console.log(this.msg) // 输出 ok
        this.test() // 输出 有人调用了 test 方法
      },

mounted 这是创建阶段的最后一个生命周期函数这个函数非常重要它表示页面首次被渲染出来如果项目中需要初始化某些js插件那么这些插件需要在mounted中进行初始化否则容易出现一些初始化失效的问题

mounted() {
         console.log(this.$el) // 会输出解析渲染后的结果  {{msg}} = ok
      },

而当 mounted 执行完实例就要结束创建阶段进入运行阶段了

注: 而在以上的几个生命周期函数中最重要的就是 created && mounted 这俩个函数了

其中 created 用来发送ajax请求 mounted 用来初始化插件

运行阶段的生命周期函数

运行阶段的生命周期函数的主要作用就是保持data和页面的数据一致而且只有当data发生变化的时候这些函数才会执行就是说 运行中的函数会根据 data 数据的而变化有选择性的执行0次或多次

beforeUpdate 在这个阶段我们得到的数据是最新的数据但是从页面打印的还是老数据

beforeUpdate() {
        console.log('页面上的数据为：' + document.getElementById('txtMsg').innerHTML) // ok
        console.log('data中的数据为：' + this.msg) // no
      },

updated 在这个阶段就说明页面已经被重新渲染好了此时数据是最新的页面也是根据最新的数据重新渲染的页面 ;

updated() {
        console.log('页面上的数据为：' + document.getElementById('txtMsg').innerHTML) // no
        console.log('data中的数据为：' + this.msg) // no
      }