vue data什么时候执行

Vue中的data属性在Vue实例被创建时执行。具体来说，当Vue实例被创建时，会首先执行data函数，并将返回的data对象添加到Vue实例中作为其data属性。

在Vue实例被创建的过程中，首先会执行Vue实例的各种生命周期钩子函数，其中包括beforeCreate和created钩子函数。在beforeCreate钩子函数中，Vue实例的$options对象已经被初始化，但是此时data属性还没有被添加到Vue实例中。在created钩子函数中，Vue实例的$data属性和$props属性已经被创建，并且data属性已经添加到Vue实例中。

在执行data函数时，data函数内部的代码会被执行，这些代码可以用来初始化data对象的属性和值。在执行完成后，data对象将作为Vue实例的data属性，可以通过this.$data来访问。

需要注意的是，data函数中定义的属性必须是可响应的，这意味着这些属性可以被Vue的响应系统监听到，并能在数据发生变化时进行更新。

总结来说，Vue的data属性在Vue实例被创建时执行，其中的data函数会被执行并返回一个对象，这个对象将作为data属性添加到Vue实例中。在data函数中可以初始化data对象的属性和值，这些属性可以通过this.$data来访问，并且能被Vue的响应系统监听到。

在Vue中，data属性的执行时机有两个情况。

1. 实例化Vue对象时：当创建Vue实例时，会将data属性作为Vue实例的数据对象。在实例化过程中，Vue会遍历data对象的所有属性，并将其转换为响应式数据。这时，会执行data中定义的所有函数，并将返回的对象合并到data中。

2. 生命周期钩子函数中：在Vue的生命周期中，一些钩子函数也可以用来执行data属性的操作。

• beforeCreate：在实例初始化之后，数据观测（data observer）和事件配置之前被调用。此时，data属性仍未被初始化，无法访问到data中的数据。

• created：在实例创建完成后被立即调用。此时，实例已经完成了数据观测（data observer）、属性和方法的运算，但是还没有挂载到DOM上。

• beforeMount：在Vue实例挂载开始之前被调用。在该钩子函数中，Vue实例的render函数首次被调用。

• mounted：在实例挂载到DOM上后调用，此时实例的el被新创建的vm.$el替换，将实例绑定到真实的DOM元素上。

• beforeUpdate：在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前，可以在这个钩子函数中进一步修改数据。

• updated：在数据更新之后调用，发生在虚拟DOM重新渲染和打补丁之后。

综上所述，data的执行时机包括在实例化Vue对象时和在Vue的生命周期钩子函数中，通过这些时机可以对data属性进行操作和处理。

在Vue中，data属性是一个对象，用于存储组件的数据。

当Vue实例化的时候，data属性中的数据会被初始化并添加到Vue的实例对象中。这意味着data属性里的数据在Vue实例被初始化时即被执行。

具体来说，当Vue组件实例化时，Vue会调用它的构造函数，在构造函数中会执行一系列的初始化操作，其中之一就是初始化data属性。

Vue将data属性中的数据转化为响应式数据，也就是说，在Vue实例化后，我们可以直接访问和修改它们，当数据改变时，相关的DOM元素也会自动更新。

下面是一个示例代码，演示了data属性的执行时间：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Changed Message';
    }
  }
}
</script>

在上面的代码中，data()方法返回了一个包含一个message属性的对象。在Vue实例化时，该对象会被执行，并将message属性的初始值设置为'Hello Vue!'。

当点击按钮时，会触发changeMessage方法，该方法会将message属性的值修改为'Changed Message'。由于message属性是响应式的，所以相关的DOM元素也会自动更新，显示出新的消息。

总结来说，Vue的data属性在Vue实例化时被执行，用于存储组件的数据。在Vue实例化后，我们可以直接访问和修改data属性中的数据。每当数据发生改变时，相关的DOM元素也会自动更新。