生命周期：钩子函数OnMounted（vue3）和mounted（vue2）

在现代的前端开发中，特别是在使用Vue.js这样的前端框架时，钩子函数（lifecycle hooks）是非常重要的概念。mounted 是Vue.js中的一个生命周期钩子函数，它在组件实例被挂载到DOM后调用。

以下是关于 mounted 钩子函数的一些详细信息：

Vue.js 生命周期钩子

Vue.js 组件有一系列的生命周期阶段，每个阶段都有对应的钩子函数，允许开发者在特定的时间点执行自定义逻辑。以下是Vue.js组件的主要生命周期钩子：

1. beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2. created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
3. beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
4. mounted：实例被挂载后调用，这时 el 被新创建的 vm.el替换。如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.el替换。如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.el 也在文档内。
5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
6. updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
7. beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
8. destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

mounted 钩子

mounted 钩子在组件被挂载到DOM后调用，这意味着你可以在这个钩子中访问到真实的DOM元素。这对于需要操作DOM的第三方库集成或初始化非常有用。

复制代码

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  mounted() {
    console.log('Component is mounted!');
    console.log(this.$el.textContent); // 访问DOM元素
  }
};

在这个例子中，mounted 钩子在组件被挂载到DOM后调用，并输出组件的文本内容。

注意事项

• mounted 钩子不保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 this.$nextTick。

复制代码

mounted() {
  this.$nextTick(() => {
    // 仅在整个视图都被渲染之后才会运行的代码
  });
}

• 在 mounted 钩子中，你可以进行一些异步操作，比如发送网络请求获取数据。

复制代码

mounted() {
  this.fetchData();
},
methods: {
  async fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    this.data = data;
  }
}

总之，mounted 钩子是Vue.js组件生命周期中的一个重要阶段，它允许你在组件被挂载到DOM后执行特定的逻辑。

在Vue 3中，onMounted 是一个组合式API（Composition API）中的生命周期钩子函数。它用于在组件挂载后执行一些逻辑。与Vue 2中的 mounted 钩子类似，onMounted 也是在组件实例被挂载到DOM后调用。

以下是关于 onMounted 钩子函数的一些详细信息：

组合式API（Composition API）

Vue 3引入了组合式API，它提供了一种更灵活、更直观的方式来组织和重用逻辑。组合式API通过 setup 函数来实现，setup 函数在组件创建之前执行，并且是组合式API的入口点。

onMounted 钩子

onMounted 钩子在组件被挂载到DOM后调用。你可以在 setup 函数中使用 onMounted 来执行一些初始化操作，比如访问DOM元素、发送网络请求等。

复制代码

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');

    onMounted(() => {
      console.log('Component is mounted!');
      console.log(document.querySelector('#app').textContent); // 访问DOM元素
    });

    return {
      message
    };
  }
};

在这个例子中，onMounted 钩子在组件被挂载到DOM后调用，并输出组件的文本内容。

其他生命周期钩子

在组合式API中，除了 onMounted，还有其他一些生命周期钩子可以使用：

• onBeforeMount：在组件挂载之前调用。
• onBeforeUpdate：在组件更新之前调用。
• onUpdated：在组件更新之后调用。
• onBeforeUnmount：在组件卸载之前调用。
• onUnmounted：在组件卸载之后调用。

这些钩子函数的使用方式与 onMounted 类似，都是在 setup 函数中调用。

复制代码

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('Before Mount');
    });

    onMounted(() => {
      console.log('Mounted');
    });

    onBeforeUpdate(() => {
      console.log('Before Update');
    });

    onUpdated(() => {
      console.log('Updated');
    });

    onBeforeUnmount(() => {
      console.log('Before Unmount');
    });

    onUnmounted(() => {
      console.log('Unmounted');
    });

    return {};
  }
};

注意事项

• onMounted 钩子不保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 onMounted 内部使用 nextTick。

复制代码

import { onMounted, nextTick } from 'vue';

export default {
  setup() {
    onMounted(() => {
      nextTick(() => {
        // 仅在整个视图都被渲染之后才会运行的代码
      });
    });

    return {};
  }
};

• 在 onMounted 钩子中，你可以进行一些异步操作，比如发送网络请求获取数据。

复制代码

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const data = ref(null);

    onMounted(async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      data.value = result;
    });

    return {
      data
    };
  }
};

总之，onMounted 钩子是Vue 3组合式API中的一个重要生命周期钩子，它允许你在组件被挂载到DOM后执行特定的逻辑。