vue mounted什么时候执行

Vue的mounted钩子函数在组件被挂载到DOM树之后执行。1、在模板渲染完成之后，2、在DOM节点被插入到页面之后，3、在所有的子组件都完成挂载之后，才会触发mounted钩子函数。这意味着在mounted中可以安全地访问和操作DOM节点，并且可以执行需要依赖于DOM的操作，如初始化第三方库、添加事件监听器等。

一、什么是Vue生命周期钩子函数

Vue生命周期钩子函数是Vue实例在其生命周期的不同阶段会自动调用的一些特定函数。它们分为以下几个主要阶段：

创建前/后：beforeCreate 和 created
挂载前/后：beforeMount 和 mounted
更新前/后：beforeUpdate 和 updated
销毁前/后：beforeDestroy 和 destroyed

每个钩子函数都有其特定的用途和适用场景，开发者可以根据需要在适当的钩子函数中编写代码来实现特定功能。

二、Vue的`mounted`钩子函数详细说明

mounted是Vue实例的一个生命周期钩子函数，它在以下情况后执行：

模板渲染完成
DOM节点被插入到页面
所有子组件完成挂载

这意味着在mounted中可以安全地进行以下操作：

访问DOM节点：可以使用Vue的$refs属性来访问DOM节点。
初始化第三方库：可以在mounted中初始化如图表库、滚动库等需要操作DOM的第三方库。
添加事件监听器：可以为DOM元素添加事件监听器。

三、`mounted`与其他钩子函数的比较

为了更好地理解mounted的作用，我们可以将其与其他生命周期钩子函数进行对比：

钩子函数	触发时机	主要用途
`beforeCreate`	实例初始化之后，数据观测和事件配置之前	初始化一些全局变量或环境设置
`created`	实例创建完成，数据观测和事件配置之后	可以访问数据和事件，但尚未挂载DOM
`beforeMount`	模板编译/渲染之前	在模板编译之前进行一些操作，如设置初始数据
`mounted`	模板渲染完成，DOM插入页面，所有子组件挂载完毕	安全地访问和操作DOM，初始化依赖DOM的第三方库，添加事件监听器
`beforeUpdate`	数据更新之前	在数据更新之前执行一些操作，如保存旧的数据状态
`updated`	数据更新并重新渲染模板	数据更新后执行一些操作，如根据新数据重新初始化一些状态
`beforeDestroy`	实例销毁之前	在实例销毁之前执行一些清理工作，如移除事件监听器，取消订阅等
`destroyed`	实例销毁之后	实例销毁后执行一些操作，如清理内存中的数据，注销全局变量等

四、`mounted`钩子函数的实际应用案例

为了更好地理解mounted的实际应用，以下是几个常见的应用场景：

1、初始化第三方库

export default {
  mounted() {
    // 初始化图表库
    this.chart = new Chart(this.$refs.chartCanvas, {
      type: 'bar',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
          label: 'My First dataset',
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgb(255, 99, 132)',
          data: [0, 10, 5, 2, 20, 30, 45]
        }]
      },
      options: {}
    });
  }
}

2、添加事件监听器

export default {
  mounted() {
    // 为按钮添加点击事件监听器
    this.$refs.myButton.addEventListener('click', this.handleClick);
  },
  methods: {
    handleClick() {
      console.log('Button clicked!');
    }
  },
  beforeDestroy() {
    // 在实例销毁之前移除事件监听器
    this.$refs.myButton.removeEventListener('click', this.handleClick);
  }
}

3、操作DOM节点

export default {
  mounted() {
    // 访问并操作DOM节点
    this.$refs.myDiv.style.backgroundColor = 'blue';
  }
}

五、为什么选择在`mounted`中进行这些操作

选择在mounted中进行操作的主要原因有以下几点：

DOM节点已准备好：在mounted中可以保证DOM节点已经被插入到页面中，可以安全地访问和操作DOM。
子组件已挂载：在mounted中可以保证所有的子组件都已经完成挂载，适合进行一些依赖于子组件的操作。
避免重复渲染：在mounted中进行一次性的初始化操作，可以避免在数据更新时重复执行这些操作，从而提高性能。

六、总结与建议

总结来说，Vue的mounted钩子函数在模板渲染完成、DOM节点被插入到页面以及所有子组件完成挂载之后执行。在mounted中可以安全地访问和操作DOM，初始化第三方库，添加事件监听器等。这使得mounted成为一个非常适合进行DOM相关操作的生命周期钩子函数。

建议开发者在使用mounted时，注意以下几点：

避免过多的操作：在mounted中进行过多的操作可能会影响性能，建议将复杂的逻辑拆分到其他方法中。
清理工作：在beforeDestroy中进行相应的清理工作，如移除事件监听器，取消订阅等，以避免内存泄漏。
优化性能：对于一些性能敏感的操作，可以考虑使用requestAnimationFrame等方式进行优化。

通过合理地使用mounted钩子函数，可以更好地控制Vue组件的生命周期，提高开发效率和代码质量。