Vue中函数式data的更新方法及对象式data修改咨询

阿华AIGC实验室

2026-5-22

解决Vue组件data从对象改为函数形式的问题

嗨，我来帮你搞定这个问题～

首先得明确Vue风格指南要求组件的data必须是返回对象的函数的原因：当你复用组件的时候，如果data是一个纯对象，所有组件实例会共享同一份数据——这意味着一个实例修改数据会影响到其他所有实例，这显然不是我们想要的。而用函数返回对象的话，每个组件实例都会调用这个函数，得到属于自己的独立数据副本，彻底避免数据共享的问题。

第一步：把data从对象改成函数形式

原来你可能是这么写的：

// 不推荐的对象形式
Vue.component('some-comp', {
  data: {
    foo: 'bar'
  }
})

按照指南改成函数返回对象的形式，非常简单：

// 推荐的函数形式
Vue.component('some-comp', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})

如果用ES6语法，也可以写成更简洁的写法：

data() {
  return {
    foo: 'bar'
  }
}

第二步：修改数据的方式完全不变！

你之前写的修改数据的方法完全没问题——不管data是对象还是函数返回的对象，组件实例都会把数据对象里的属性代理到自身，所以你依然可以通过this.属性名来访问和修改数据：

Vue.component('some-comp', {
  data() {
    return {
      foo: 'bar'
    }
  },
  methods: {
    updateFoo() {
      this.foo = 'new value here'
    }
  }
})

举个完整的使用例子，点击按钮就能更新foo的值：

Vue.component('some-comp', {
  data() {
    return {
      foo: 'bar'
    }
  },
  methods: {
    updateFoo() {
      this.foo = 'new...'
    }
  },
  template: `
    <div>
      <p>当前Foo的值：{{ foo }}</p>
      <button @click="updateFoo">点击更新Foo</button>
    </div>
  `
})