Vue的生命周期

最新推荐文章于 2024-10-05 01:22:45 发布

如果决定要走又何必挽留

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量362

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_59076775/article/details/122273582

版权

Vue 专栏收录该内容

59 篇文章 7 订阅

订阅专栏

一.什么是生命周期

从Vue实例创建,运行，到销毁期间，总是伴随着各种各样的事件，这些事件，统称为实例的生命周期。

生命周期钩子:就是生命周期的别名而已。

二.生命周期的三大类

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

beforeCreate: 实例刚在内存中被创建出来，此时，还没有初始化好data和methos属性

created: 实例已经在内存中创建OK，此时data和methods已经创建OK，此时还没有开始

编译模板

beforeMount:此时已经完成了模板的编译，但是还没有挂载到页面上

mounted:此后,已经将编译好的模板，挂载到了页面指定的容器中显示

2.运行期间的生命周期函数

beforeUpdated:状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的

数据还是旧的，因为此时还没有开始重新渲染DOM节点

updated:实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据都已经完成了更新，界面已经被重新渲染好了！

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

beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用

destroyed:Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件

监听器会被移除，所有的子实例也会被销毁。

三:图片详解

四.代码验证

（1）验证1 在beforeCreate里面无法访问methods，和data里面的数据

代码:

<template>
  <div class="">
    {{ name }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "王二小",
    };
  },
  methods: {
    fn: function () {
      console.log(1);
    },
  },
  beforeCreate() {
    this.fn();
    console.log(this.name);
  },
  // created() {
  //   this.fn();
  //   console.log(this.name);
  // },
  name: "",
};
</script>

<style scoped></style>

图示:

在Created里面能够获取

<template>
  <div class="">
    {{ name }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "王二小",
    };
  },
  methods: {
    fn: function () {
      console.log(1);
    },
  },
  beforeCreate() {
    this.fn();
    console.log(this.name);
  },
  created() {
    this.fn();
    console.log(this.name);
  },
  name: "",
};
</script>

<style scoped></style>

图示:

（2）验证:beforeMount:此时已经完成了模板的编译，但是还没有挂载到页面上

mounted:此后,已经将编译好的模板，挂载到了页面指定的容器中显示

代码：

<template>
  <div class="">
    <h1 ref="qq"></h1>
  </div>
</template>

<script>
export default {
  beforeMount() {
    var cc = this.$refs.qq;
    console.log(cc);
  },
  mounted() {
    var cc = this.$refs.qq;
    console.log(cc);
  },
  name: "",
};
</script>

<style scoped></style>

运行的结果:

(3)验证 beforeUpdated 数据得到了更新但是页面上没有更新。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  
</head>
<body>
  <div id="app">
   <h1 id="h1"> {{msg}} </h1>
   <button @click="msg='No'" value="点击修改值">修改</button>
  </div>
  <script>
    var app=new Vue({
      el:'#app',
      data:{
        msg:'ok'
      },
     beforeUpdate() {
      console.log( '界面上元素的内容'+document.getElementById('h1').innerText);
      console.log('data中的msg数据是'+this.msg);
     },
    })
  </script>
  
</body>
</html>

图示:

解析:此时就会执行生命中去钩子中:

(4)验证:beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。

代码:

<template>
  <div class="">
    <div ref="refClass">元素内容</div>
  </div>
</template>

<script>
export default {
  name: "",
  methods: {},
  beforeDestroy() {
    console.log(this.$refs.refClass);
  },
};
</script>

<style scoped></style>

图示: