Vue3 data() Function

Vue3 选项式 APIVue3 Options API

In Vue3,data()the function is one of the core functions used to define the internal state (data) of a component.

data()The function returns an object, and the properties in this object are the internal data of the component, which can be accessed and manipulated through templates or other logic.

data()The function is an important part of every Vue component, through which the data state of the component can be initialized.

Basic usage of the data() function

In Vue3,data()the function is usually defined as a function and returns an object. This object contains the data properties required by the component.

Example code

Example

export default {
  data() {
    return {
      message: 'Hello, Vue3!',
      count: 0
    };
  }
};

Explanation

  • data()The function returns an object containing two properties:
    • message: a string type data, with an initial value of'Hello, Vue3!'。
    • count: a numeric type data, with an initial value of0。
  • These data can be used directly in the component's template or methods.

Why is data() a function?

In Vue3,data()must be a function, rather than directly returning an object. This is because Vue components may be reused multiple times. Ifdata()is an object, then all instances will share the same data object, leading to data conflicts.

Bydata()defining it as a function, every time a component instance is created, Vue calls this function and returns a new data object, thus ensuring that the data of each instance is independent.

Example

Example

export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
};
  • Every time a component instance is created,data()the function is called, returning a brand newmessagedata.

Features of the data() function

1. Reactive data

data()The properties in the returned object are converted into reactive data by Vue. When these data change, Vue automatically updates the views that depend on them.

2. Data initialization

data()The function is called when the component is instantiated to initialize the component's data state.

3. Data isolation

Sincedata()it is a function, each component instance has an independent data object, avoiding data sharing and conflicts.

Notes on the data() function

1. Do not use arrow functions

data()The function cannot be an arrow function, because arrow functions do not have their ownthiscontext, which will cause the component instance to be incorrectly accessed.

Incorrect example：

Example

export default {
  data: () => ({
    message: 'Hello, Vue3!'
  })
};

Correct example：

Example

export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
};

2. Avoid directly modifying properties of the Vue instance

Indata()In the function, do not directly modify properties of the Vue instance (such asthis.$data), but define data by returning an object.

Practical exercise

Try to create a Vue component, and indata()the function, define the following data:

  • username: initial value is an empty string''。
  • age: initial value is0。
  • isStudent: initial value isfalse。

Example

<template>
  <div>
    <h1>User Information</h1>
    <p>Username: {{ username }}</p>
    <p>Age: {{ age }}</p>
    <p>Is student: {{ isStudent ? 'Yes' : 'No' }}</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
name: 'UserInfo', // component name
  data() {
    return {
username: '', // initial value is an empty string
age: 0, // initial value is 0
isStudent: false // initial value is false
    };
  }
});
</script>

<style scoped>
/* Optional styles */
h1 {
  color: #2c3e50;
}
p {
  font-size: 16px;
}
</style>

Vue3 选项式 APIVue3 Options API

Other extensions