什么是vue生命周期

想吃手撕面包

已于 2023-06-30 09:00:08 修改

阅读量986

点赞数 2

文章标签： javascript vue.js 前端

于 2022-08-21 19:41:13 首次发布

本文链接：https://blog.csdn.net/qq_67519713/article/details/126454192

版权

生命周期，（钩子函数）

1.生命周期有什么用?

1.1.生命周期概念：事物从出生到死亡的过程.
1.2.Vue的生命周期：Vue实例从创建到销毁的过程，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数。
1.3.生命周期作用：生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑
1.4 生命周期还有一个名字叫钩子函数

2.常用的生命周期（钩子函数）

钩子函数	简介
beforeCreate	在实例初始化之后，数据观测和事件配置之前被调用此时data 和 methods 以及页面的DOM结构都没有初始化什么都做不了
created	在实例创建完成后被立即调用此时data 和 methods已经可以使用但是页面还没有渲染出来
beforeMount	在挂载开始之前被调用此时页面上还看不到真实数据只是一个模板页面而已
mounted	el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。数据已经真实渲染到页面上在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate	数据更新时调用，发生在虚拟DOM打补丁之前。页面上数据还是旧的
updated	由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。页面上数据已经替换成最新的
beforeDestroy	实例销毁之前调用
destroyed	实例销毁后调用

3.钩子函数代码展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <button @click='update'>更新</button>
    <button @click='destroy'>销毁</button>
  </div>
  // 引入vue文件
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script type="text/javascript">
    // Vue实例的生命周期
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '生命周期'
      },
      methods: {
        update: function(){
          this.msg = 'hello';
        },
        destroy: function(){
          this.$destroy();
        }
      },
     // 创建vue实例之前
      beforeCreate: function(){
        console.log('beforeCreate');
      },
      // 创建实例成功（一般在这里实现数据的异步请求）
      created: function(){
        console.log('created');
      },
      // 组件挂载前（加载组件第一次渲染）
      beforeMount: function(){
        console.log('beforeMount');
      },
      // 组件挂载后（加载组件第一次渲染）
      mounted: function(){
        console.log('mounted');
      },
      // 重新渲染之前（数据更新等操作控制DOM重新渲染）
      beforeUpdate: function(){
        console.log('beforeUpdate');
      },
      // 重新渲染完成
      updated: function(){
        console.log('updated');
      },
      // 销毁之前
      beforeDestroy: function(){
        console.log('beforeDestroy');
      },
      // 销毁完成
      destroyed: function(){
        console.log('destroyed');
      }
    });
  </script>
</body>
</html>