vue生命周期钩子函数有哪些

作者：远客网络发布时间：2024-11-23 11:03:58

vue有什么钩子

Vue.js 提供了多个生命周期钩子函数来让开发者在组件的不同阶段执行代码。主要的钩子函数有以下几种：1、创建钩子函数；2、挂载钩子函数；3、更新钩子函数；4、销毁钩子函数。这些钩子函数提供了在组件的创建、渲染、更新和销毁过程中的不同时间点执行代码的能力，从而帮助开发者更好地管理组件的状态和行为。

一、创建钩子函数

在组件实例被创建时调用的钩子函数主要有两个：beforeCreate和created。

beforeCreate：在实例初始化之后、数据观测 (data observer) 和事件配置 (event setup) 之前被调用。此时组件实例还没有完全初始化，无法访问 data、computed 等属性。
created：在实例创建完成后立即调用，实例已经完成数据观测、属性和方法的设置，但还没有开始模板编译。此时可以访问和操作组件的状态。

示例代码：

new Vue({
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  }
});

二、挂载钩子函数

在组件挂载到 DOM 前后调用的钩子函数有：beforeMount 和 mounted。

beforeMount：在挂载开始之前被调用。在这之前，相关的 render 函数首次被调用。
mounted：在挂载完成后立即调用。此时，组件已经被挂载到 DOM 中，可以访问到实际的 DOM 元素。

示例代码：

new Vue({
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  }
});

三、更新钩子函数

在组件更新时调用的钩子函数有：beforeUpdate 和 updated。

beforeUpdate：在数据更新之前调用，在虚拟 DOM 重新渲染和打补丁之前。可以在这个钩子中进一步更改状态，不会触发附加的重渲染过程。
updated：在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。此时组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作。

示例代码：

new Vue({
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  }
});

四、销毁钩子函数

在组件实例销毁时调用的钩子函数有：beforeDestroy 和 destroyed。

beforeDestroy：在实例销毁之前调用。此时实例仍然完全可用。
destroyed：在实例销毁后调用。调用后，组件的所有绑定和事件监听器都会被解除，所有子实例也会被销毁。

示例代码：

new Vue({
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  }
});

五、综合应用示例

通过一个综合示例来展示如何在实际开发中使用这些钩子函数：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  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');
  },
  methods: {
    changeMessage() {
      this.message = 'Hello World!';
    }
  }
};
</script>

在这个示例中，我们可以清晰地看到组件在其生命周期内的各个阶段调用的钩子函数的执行顺序。

六、钩子函数的实际应用场景

初始化数据：在 created 钩子中，可以从服务器端获取数据并初始化组件状态。
访问 DOM 元素：在 mounted 钩子中，可以访问组件的 DOM 元素，适合执行需要 DOM 的操作，如初始化第三方库。
性能优化：在 beforeUpdate 和 updated 钩子中，可以对组件状态进行优化操作，以提高性能。
清理工作：在 beforeDestroy 和 destroyed 钩子中，可以执行清理工作，如解除事件监听器、取消定时器等。

七、钩子函数与组件复用

在实际开发中，钩子函数与混入 (mixins) 和高阶组件 (HOCs) 的结合使用，可以进一步增强代码的复用性和模块化。

混入：通过混入，可以将钩子函数逻辑分离到独立的模块中，减少重复代码。
高阶组件：通过高阶组件，可以创建更灵活的组件，钩子函数逻辑可以根据需要动态注入。

示例代码（混入）：

const myMixin = {
  created() {
    console.log('Mixin created');
  }
};
new Vue({
  mixins: [myMixin],
  created() {
    console.log('Component created');
  }
});