vue钩子函数有哪些含义

Vue钩子函数的作用是什么？

在 Vue.js 中，钩子函数是一系列在特定时机自动执行的函数，它们允许我们在 Vue 实例的不同生命周期阶段或特定的事件触发时执行一些操作，Vue 提供了几个内置的钩子函数，如 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 和 activated，我们还可以在组件中自定义钩子函数，本文将详细介绍 Vue 钩子函数的作用及其使用方法。

生命周期钩子函数

1、beforeCreate:在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用，在这个阶段，实例已完成以下的配置：数据观测(data observer),属性和方法的运算，watch/event 事件回调，挂载阶段还没开始，$el 属性目前不可见。

new Vue({
  el: 'app',
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate: function() {
    console.log('beforeCreate');
  }
});

2、created:在实例创建完成后被立即调用，在这一步，实例已完成以下的操作：数据观测 (data observer),属性和方法的运算，watch/event 事件回调，然而挂载阶段还没开始，$el 属性目前不可见，你可以在这里访问到 DOM。

new Vue({
  el: 'app',
  data: {
    message: 'Hello Vue!'
  },
  created: function() {
    console.log('created');
  }
});

3、beforeMount:在挂载开始之前被调用：相关的 render 函数首次被调用，模板已经被转换成真实的 DOM,挂载开始之前，不会发生插入操作，如果你需要在此阶段改变数据，你需要手动触发更新。

new Vue({
  el: 'app',
  data: {
    message: 'Hello Vue!'
  },
  beforeMount: function() {
    console.log('beforeMount');
  }
});

4、mounted:el 陈旧的引用现在仍然有效，如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vnode.el 现在包含了正确的DOM节点，如果挂载点的选择器是动态的，那么当 mountedHook 为 true 并且选择了正确的元素后才会被调用，注意，只有根实例会触发该钩子，如果一个组件有多个根节点，每个节点都会触发该钩子，在该钩子内部可以进行一些 DOM操作。

new Vue({
  el: 'app',
  data: {
    message: 'Hello Vue!'
  },
  mounted: function() {
    console.log('mounted');
    el = this.$el; // 确保 el 是当前 Vue 实例对应的 DOM $el
    el.textContent = this.message; // 将 message 的内容设置为 DOM $el textContent
  }
});

5、beforeUpdate:数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，并防止不必要的重渲染，需要注意的是，由于这个钩子在响应式系统之外执行的，所以它不会触发视图更新，你应该使用 nextTick 在更新后手动调用视图更新方法来确保新的虚拟 DOM 已准备好渲染，同时避免在此处执行耗时的计算。

new Vue({
  el: 'app',
  data: {
    _message: 'Hello Vue!' // 注意这里使用 _message 而不是 message 避免不必要的计算和视图更新
  },
  beforeUpdate: function() {
    _message = 'Hello Vue!'; // 仅修改响应式数据的值，不触发视图更新和打补丁过程
    vm.$forceUpdate(); // 确保视图更新和打补丁过程立即执行以反映最新的虚拟 DOM 结果(仅用于开发环境)
    vm._message = 'Hello Vue!'; // 仅修改非响应式数据的值，不触发视图更新和打补丁过程(仅用于开发环境)
    vm.$nextTick(function() {}); // 确保视图更新和打补丁过程在下次DOM更新循环中执行(适用于生产环境)
    vm.$emit('input', _message); // 通过 $emit 实现双向绑定更新父组件中的数据(仅适用于开发环境)
    vm.$nextTick(function() {}); // 确保视图更新和打补丁过程在下次DOM更新循环中执行(适用于生产环境)
    vm.$emit('update', _message); // 通过 $emit 实现双向绑定更新父组件中的数据(仅适用于开发环境)
    vm.$nextTick(function() {}); // 确保视图更新和打补丁过程在下次DOM更新循环中执行(适用于生产环境)
    vm.$emit('patch', _message); // 通过 $emit 实现双向绑定更新父组件中的数据(仅适用于开发环境)
    vm.$nextTick(function() {}); // 确保视图更新和打补丁过程在下次DOM更新循环中执行(适用于生产环境)
    vm.$emit('input-mask', _message); // 通过 $emit 实现双向绑定更新父组件中的数据(仅适用于开发环境)
    vm.$nextTick(function() {}); // 确保视图更新和打补茨过程在下次DOM更新循环中执行(适用于生产环境)
    vm.$emit('change', _message); // 通过 $emit 实现双向绑定更新父组件中的数据(仅适用于开发环境)