Vue的生命周期及其钩子函数

最新推荐文章于 2024-12-28 09:15:00 发布

原创最新推荐文章于 2024-12-28 09:15:00 发布 · 258 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端 #钩子函数

vue 专栏收录该内容

8 篇文章

订阅专栏

本文详细解析了Vue.js的生命周期，包括实例创建、页面渲染、数据更新和组件销毁四个阶段的钩子函数，通过代码示例展示了各阶段的具体作用。

生命周期是指Vue实例或者组件从诞生到消亡经历的每一个阶段，在这些阶段的前后可以设置一些函数当做事件来调用。

分为四个阶段

1.实例创建前后

beforeCreate=> 鸡肋函数，很少用。
created => 加载数据。此时this，拥有了该有的东西。 this.$refs获取不到DOM

2.页面渲染前后

beforeMount => 渲染前执行 this.$refs获取不到DOM
mounted => 渲染完成 =>可以获取dom对象。 this.$refs可以获取到DOM

3.数据更新前后
beforeUpdate => 鸡肋函数
updated => 鸡肋函数。当很多数据更新时，使用此函数会浪费资源。可以用 watch 检测 data中某个数据的变化。

4.组件销毁前后
beforeDestoty => 可以用来销毁之前定义的定时器
destoryed => 鸡肋函数

下面写一段代码来演示一下

<template>
  <div>
    生命周期及其钩子函数
    <p>{{name}}</p>
    <input type="text" v-model="name" />
    <p>{{age}}</p>
    <input type="text" v-model="age" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "小明",
      age: 12
    };
  },
  beforeCreate() {
    console.log("实例创建前执行beforeCreate");
  },
  created() {
    console.log("实例创建后执行created");
  },
  beforeMount() {
    console.log("页面渲染前执行beforeMount");
  },
  mounted() {
    console.log("页面渲染后执行mounted");
  },
  beforeUpdate() {
    console.log("数据更新前触发执行beforeUpdate");
  },
  updated() {
    console.log("数据更新后触发执行updated");
  },
  beforeDestroy() {
    console.log("组件销毁前触发beforeDestroy");
  },
  destroyed() {
    console.log("组件销毁后触发destroyed");
  }
};
</script>

<style>
</style>