第三节: Vue选项: data数据以及数据响应式

作者：System 时间：2024年08月10日分类：所有,vue.js 字数：359

这篇文章距离上次修改已过451天，其中的内容可能已经有所变动。

在Vue中，data 用于定义组件的响应式数据。data 必须是一个函数，因为组件可能被用来创建多个实例，而这些实例之间应该共享独立的数据。




Vue.component('my-component', {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  template: '<div>{{ message }}</div>'
})

在这个例子中，每个 my-component 实例都会有一个独立的 data 对象，message 属性是响应式的，当它被改变时，视图会自动更新。这样，每个组件实例都可以维护自己的状态而不会相互影响。