Vue怎么正确使用create,mounted调用方法

在Vue.js中，created和mounted是两个非常重要的生命周期钩子函数。它们分别在不同的阶段被调用，允许开发者在组件的不同生命周期阶段执行特定的操作。正确使用这两个钩子函数可以帮助我们更好地管理组件的初始化和渲染过程。

1. created 钩子函数

created 钩子函数在组件实例被创建之后立即调用。在这个阶段，组件的模板和虚拟DOM还没有被渲染到页面上，但是组件的data、computed、methods等属性已经初始化完毕。因此，created钩子函数通常用于执行一些不需要依赖DOM的操作，例如：

• 初始化数据
• 发起异步请求
• 设置定时器或监听器

示例代码

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  created() {
    console.log('Component created');
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟异步请求
      setTimeout(() => {
        this.message = 'Data fetched!';
      }, 1000);
    }
  }
};

在这个例子中，created钩子函数被用来初始化数据并调用fetchData方法来模拟异步请求。

2. mounted 钩子函数

mounted 钩子函数在组件的模板和虚拟DOM被渲染到页面上之后调用。在这个阶段，组件的DOM元素已经可以被访问和操作。因此，mounted钩子函数通常用于执行一些需要依赖DOM的操作，例如：

• 操作DOM元素
• 初始化第三方库（如地图、图表等）
• 绑定事件监听器

示例代码

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  mounted() {
    console.log('Component mounted');
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化地图
      const map = new Map(document.getElementById('map'), {
        center: { lat: 39.9042, lng: 116.4074 },
        zoom: 8
      });
    }
  }
};

在这个例子中，mounted钩子函数被用来初始化一个地图，并确保在DOM元素已经渲染到页面上之后才执行。

3. created 和 mounted 的区别

• created：在组件实例创建之后立即调用，此时DOM还未渲染，适合执行不依赖DOM的操作。
• mounted：在组件DOM渲染完成后调用，适合执行依赖DOM的操作。

4. 注意事项

• 避免在created中操作DOM：由于created钩子函数调用时DOM还未渲染，因此在这个阶段操作DOM可能会导致错误。
• 避免在mounted中执行耗时操作：mounted钩子函数调用时DOM已经渲染，但如果在其中执行耗时操作，可能会导致页面卡顿。

5. 总结

created和mounted是Vue.js中非常重要的生命周期钩子函数，它们分别在不同的阶段被调用。created适合执行不依赖DOM的操作，而mounted适合执行依赖DOM的操作。正确使用这两个钩子函数可以帮助我们更好地管理组件的初始化和渲染过程，提升应用的性能和用户体验。

通过合理使用created和mounted，我们可以确保在组件的不同生命周期阶段执行适当的操作，从而构建出更加健壮和高效的Vue应用。