vue中mounted什么时候用

在Vue中，1、当需要在DOM加载完成后执行操作时使用mounted钩子函数，2、适用于执行依赖于DOM存在的操作，3、常用于初始化第三方库或插件。

一、MOUNTED钩子函数的基本概念

在Vue.js中，生命周期钩子函数是组件生命周期中不同阶段执行的函数。mounted是其中一个非常重要的钩子函数。mounted钩子函数在组件挂载到DOM后立即调用。这意味着，当钩子函数被调用时，模板中的DOM元素已经被创建，并且可以进行操作。

二、MOUNTED钩子函数的核心用途

使用mounted钩子函数的主要场景包括：

操作DOM元素：
- 在组件加载完成后，进行直接的DOM操作，例如获取元素的尺寸、位置等。
初始化第三方库：
- 在第三方库（如图表库、地图库等）的初始化过程中，通常需要DOM元素存在，mounted钩子函数提供了一个理想的时机来执行这些初始化操作。
发送网络请求：
- 在组件加载完成后，发送HTTP请求获取数据，并使用获取到的数据更新组件的状态。
设置定时器：
- 在组件加载完成后，设置定时器或周期性任务，以便进行定时更新或检查。

三、MOUNTED钩子函数的详细用法

为了更好地理解mounted钩子函数的使用场景，以下是一些具体的代码示例：

操作DOM元素

export default {
  mounted() {
    const element = this.$refs.myElement;
    console.log(element.clientHeight);
  }
}

初始化第三方库

import Chart from 'chart.js';
export default {
  mounted() {
    const ctx = this.$refs.myChart.getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  }
}

发送网络请求

import axios from 'axios';
export default {
  data() {
    return {
      posts: []
    };
  },
  mounted() {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        this.posts = response.data;
      })
      .catch(error => {
        console.error("There was an error!", error);
      });
  }
}

设置定时器

export default {
  data() {
    return {
      time: new Date().toLocaleTimeString()
    };
  },
  mounted() {
    setInterval(() => {
      this.time = new Date().toLocaleTimeString();
    }, 1000);
  }
}

四、MOUNTED钩子函数的注意事项

性能考虑：
- 在mounted钩子中执行大量操作可能会导致性能问题。确保只进行必要的操作，并尽量减少DOM操作的复杂度。
数据初始化：
- 如果需要在组件加载时初始化数据，确保在mounted钩子中进行，而不是在created钩子中。因为在created钩子中，DOM还未完全加载。
清理工作：
- 如果在mounted钩子中设置了定时器或添加了事件监听器，确保在组件销毁时进行清理，以避免内存泄漏。

五、实例分析

以下是一个综合实例，展示了如何使用mounted钩子函数进行各种操作：

<template>
  <div>
    <div ref="myElement">Hello World</div>
    <canvas ref="myChart"></canvas>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
    <p>Current Time: {{ time }}</p>
  </div>
</template>
<script>
import axios from 'axios';
import Chart from 'chart.js';
export default {
  data() {
    return {
      posts: [],
      time: new Date().toLocaleTimeString()
    };
  },
  mounted() {
    // DOM 操作
    const element = this.$refs.myElement;
    console.log(element.clientHeight);
    // 初始化第三方库
    const ctx = this.$refs.myChart.getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
    // 发送网络请求
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        this.posts = response.data;
      })
      .catch(error => {
        console.error("There was an error!", error);
      });
    // 设置定时器
    setInterval(() => {
      this.time = new Date().toLocaleTimeString();
    }, 1000);
  }
}
</script>

六、总结和建议

总结来说，mounted钩子函数在Vue.js中提供了一个强大且灵活的工具，用于在组件挂载到DOM后执行各种操作。主要适用场景包括：1、直接操作DOM元素，2、初始化第三方库，3、发送网络请求，4、设置定时器。在实际开发中，合理使用mounted钩子函数可以提高代码的可维护性和性能。

建议在使用mounted钩子函数时，注意性能优化和资源清理，确保在组件销毁时进行必要的清理操作，以避免潜在的内存泄漏和性能问题。通过这些最佳实践，可以更好地利用Vue.js的生命周期钩子函数，开发出高效、稳定的前端应用。