Vue获取初始化数据是放在created还是mounted解读

接下来我会详细讲解“Vue获取初始化数据是放在created还是mounted解读”的攻略。

构建Vue实例

首先，在构建Vue实例之前，我们需要先导入Vue.js。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

然后，我们需要在HTML中指定一个挂载点（mount point），这个挂载点是Vue实例所要依附的真实DOM元素。

<div id="app">
  <!-- Vue实例将会依附于这里 -->
</div>

接着，在JavaScript中，我们创建一个Vue实例并将其依附到挂载点中。

const app = new Vue({
  el: '#app',
});

created和mounted生命周期函数

在Vue实例被创建后，其会自动执行一些生命周期的函数，其中常用到的就是created和mounted。created在实例创建完毕后立即执行，而mounted在Vue实例挂载到挂载点之后执行。这两个函数的区别在于：

在created中，Vue实例被创建，但是它的模板还没有被渲染成最终的DOM
在mounted中，Vue实例已经和真实DOM元素进行了绑定，并且模板已经填充到了最终的DOM中

所以，在created中，我们无法访问到真实DOM元素，但是可以访问Vue实例中所有的响应式数据和方法。而在mounted中，可以访问到真实DOM元素，并且做一些和DOM有关的操作。

放置初始化数据

放置初始化数据的时间应该放在created或mounted中取决于我们初始化数据是不是需要获取DOM元素的。

如果数据不需要获取DOM元素，那么我们可以将其放置在created中。

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  },
  created() {
    // 不需要获取DOM元素的数据初始化
    console.log(this.message);
  },
});

如果数据需要获取DOM元素，那么我们需要将其放置在mounted中。

const app = new Vue({
  el: '#app',
  data: {
    message: '',
  },
  mounted() {
    // 需要获取DOM元素的数据初始化
    this.message = document.getElementById('message').innerHTML;
    console.log(this.message);
  },
});

示例说明

示例1：在created中放置初始化数据

<div id="app">
  {{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello World!',
    },
    created() {
      console.log(this.message);
    },
  });
</script>

在这个示例中，我们在created中放置了初始化数据，这里的数据不需要获取DOM元素。当Vue实例创建完成后，我们打印出了初始化的数据“Hello World!”到控制台中。

示例2：在mounted中放置初始化数据

<div id="app">
  <p id="message">Hello World!</p>
  {{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '',
    },
    mounted() {
      this.message = document.getElementById('message').innerHTML;
      console.log(this.message);
    },
  });
</script>

在这个示例中，我们在mounted中放置了初始化数据，这里的数据需要获取DOM元素。我们将DOM元素中的内容“Hello World!”赋值给了Vue实例中的数据message。当Vue实例挂载完毕后，我们打印出了初始化的数据“Hello World!”到控制台中。