Vue 3.x：使用 data 配置项提供响应性数据

这篇文章我们看一下如何使用 data 来为 HTML 模板提供数据。在普通 HTML 中，我们编写的文本都是静态的，如果要改变一段文字，需要使用 JavaScript 来修改：

// html
<div>原始文本</div>;

// js
const div = document.querySelector("div");
div.innerHTML = "新文本";

而在 Vue 中，我们可以通过它的 data 属性，来把数据绑定到 HTML 中：

<div>{{ msg }}</div>

{ data() { return { msg: "你好" } } }

在绑定之后：

HTML 中的文本变成了动态的，data 中的数据变化时，HTML 中的文本也会变化。

接下来，我们先看一下如何展示动态的数据，对于如何更改数据，我们在后面的小节中再介绍。

概念

要使用 data，我们需要在 Vue 的 createApp() 方法中传递一个对象，并在对象里定义一个名为 data 的函数，这里注意 data 必须是一个函数，这样数据变化的时候，Vue 才能监测到，来帮我们自动更新 HTML。这里传给 createApp() 的对象，是 Vue 的配置对象，几乎所有 Vue 的功能都通过这个对象来实现。

const app = Vue.createApp({
  data() {},
});

data 函数需要返回一个对象，对象中的所有顶级的属性，都可以直接在 HTML 中访问，例如这里的 name 属性：

const app = Vue.createApp({
  data() {
    return {
      name: "眀昊",
    };
  },
});

顶级属性是说对象的第一级属性，如果对象中有嵌套的子对象，需要使用普通的对象访问语法来访问：

const app = Vue.createApp({
  data() {
    return {
      name: "眀昊",
      address: {
        // 作为整体
        city: "北京",
      },
    };
  },
});

// address.city

data 返回的对象属性值可以是任意 JavaScript 类型，例如：字符串、数组、布尔值、null、undefined、对象、数字、函数等，它们在绑定到 HTML 中时，都会原样转换为字符串类型。

const app = Vue.createApp({
  data() {
    return {
      name: "眀昊", // 字符串
      // name: ["明昊", "北辰"],    // 数组
      // name: false,             // 布尔值
      // name: null,              // null
      // name: undefined,          // undefined
      // name: { firstName: "昊", lastName: "明" }, // 对象
      // name: 666,                                 // 数字
      // name: function () {                        // 函数
      //   return "明昊";
      // },
    };
  },
});

模板插值

要在 HTML 中访问 data 中的属性，可以利用模板插值语法。因为在调用 Vue 实例的 mount 方法后，所选择的元素以及它下边的子元素都会成为 Vue 的模板，所以我们可以在里边使用 Vue 提供的模板语法：

app.mount("#app");

当 data 中的属性作为开合标签中间的文本值时，可以直接使用两个大括号，中间写上要绑定的属性名，其它大括号外面的值则会原样输出：

<h1>你好！{{ name }}</h1>

实践

我们来实际看一下这个例子，使用我们之前文章配置好的起始项目。 我们首先打开 index.html 文件，在 id 为 app 的 div 中添加一个 h1 标签，写上一段欢迎语：

<div id="app">
  <h1>你好！明昊</h1>
</div>

写完之后，在空白处右击，选择 Open with Live Server 预览一下效果，可以看到显示了静态的 HTML：

接下来，我们要把这个名字替换为 Vue 中 data 函数提供的数据。打开 index.js 文件，在 createApp() 方法中传递一个对象，对象中编写一个 data() 函数，然后在 data() 函数中返回一个对象，对象中有一个 name 属性，这里随意写一个名字：

const app = Vue.createApp({
  data() {
    return {
      name: "眀昊",
    };
  },
});

接下来，我们修改一下 html，使用模板插值语法，把写死的名字替换为 name 属性的值：

<div id="app">
  <h1>你好！{{name}}</h1>
</div>

这样，就把 name 属性值绑定到 {{ name }} 所在的位置了。 这个时候，我们可以尝试一下不同类型的数据：

• 例如把它改成数组的形式。
• 把它改成布尔类型的形式。
• 改成对象的形式
• ...等等，你可以自己尝试一下不同的值的输出结果。

const app = Vue.createApp({
  data() {
    return {
      name: "眀昊", // 字符串
      // name: ["明昊", "北辰"],    // 数组
      // name: false,             // 布尔值
      // name: null,              // null
      // name: undefined,          // undefined
      // name: { firstName: "昊", lastName: "明" }, // 对象
      // name: 666,                                 // 数字
      // name: function () {                        // 函数
      //   return "明昊";
      // },
    };
  },
});

不过这里要注意，如果属性值是 null 或 undefined，那么 vue 会直接输出空白，而不是 null 或 undefined 的字符串形式，这两个值适合在页面刚加载的时候用来占位，后面根据需要再替换成真实值。

小结

好了，这个就是 Vue 的 data 属性的使用方法，data 属性值是一个函数，函数需要返回一个对象，对象中的顶级属性可以直接在 HTML 模板中使用，使用方式为两个大括号中间，写上属性的名字，在实际运行的时候，vue 就会把它们替换成真实值。