vue里使用create,mounted调用方法的正确姿势说明

接下来我来详细讲解“Vue中使用created和mounted调用方法的正确方式”。

1. created 和 mounted

Vue 组件的生命周期函数可以分为 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。今天我们主要来讲解其中的 created 和 mounted。

• created ：在 Vue 实例被创建的时候，即 new Vue() 之后，会立即执行该函数，可以在这里初始化数据，但是不能进行 dom 操作；
• mounted ：该函数在组件挂载到页面上时触发，只执行一次，在这里进行 dom 操作更好。

同时，我们在 Vue 中使用这两个函数来调用方法。

2. 调用方法的正确方式

在 Vue 中，一般都是通过 methods 定义需要调用的方法，然后在 created 或 mounted 中进行调用。

例如，我们有以下示例代码：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello World!"
    };
  },
  created() {
    this.initData();
  },
  mounted() {
    this.updateMessage();
  },
  methods: {
    initData() {
      console.log("初始化数据");
    },
    updateMessage() {
      console.log("更新信息");
    }
  }
};
</script>

在上面的代码中，我们通过 created 和 mounted 来调用我们定义的两个方法 initData 和 updateMessage。

在 created 中调用 initData 方法，用以初始化数据，而在 mounted 中调用 updateMessage 方法，用于更新页面中的信息。

同时，由于 mounted 调用的方法可以进行 dom 操作，因此一般将数据的初始化放在 created 中调用，而将 dom 操作的具体内容放在 mounted 中进行。

另外，需要注意的是，在使用 this 调用方法时，需要确保该方法在 Vue 实例中被正确绑定，否则可能出现 Uncaught TypeError: this.initData is not a function 等错误。

3. 示例说明

下面我们通过两个示例来详细说明如何在 Vue 中使用 created 和 mounted 来调用方法。

示例 1：初始化数据

对于初始化数据的场景，我们可以通过 created 方法来实现：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.value }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟数据请求
      setTimeout(() => {
        this.list = [
          { id: 1, value: "苹果" },
          { id: 2, value: "香蕉" },
          { id: 3, value: "橘子" }
        ];
      }, 1000);
    }
  }
};
</script>

上面的代码中，我们通过 created 方法来调用 fetchData 方法，用于初始化 list 数据，主要处理的是数据的获取。

示例 2：dom 操作

对于需要进行 dom 操作的场景，我们可以通过 mounted 方法来实现：

<template>
  <div>
    <button @click="toggle()">点击</button>
    <div v-show="visible" class="content">欢迎来到我的网站！</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 获取元素
      const contentEl = document.querySelector(".content");
      // 设置样式
      contentEl.style.color = "red";
    },
    toggle() {
      this.visible = !this.visible;
    }
  }
};
</script>

<style>
.content {
  font-size: 16px;
  line-height: 1.5;
}
</style>

上面的代码中，我们通过 mounted 方法来调用 init 方法，用于对 content 元素进行样式设置，主要处理的是 dom 操作的具体内容。

总结

以上就是针对“Vue中使用created和mounted调用方法的正确姿势” 的完整攻略，主要讲解了在 Vue 中使用 created 和 mounted 方法来调用方法的正确方式，并通过示例进行了详细说明。在实际开发中，我们需要根据具体场景来选择使用哪个钩子函数来调用我们的方法，从而实现更好的效果。