vue中data必须是函数

最新推荐文章于 2026-05-12 00:00:00 发布

原创最新推荐文章于 2026-05-12 00:00:00 发布 · 9k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文详细解析了Vue.js中组件的data属性为何必须定义为函数，通过实例演示了当data直接作为对象使用时可能引发的问题及如何正确设置data以确保每个组件实例拥有独立的数据状态。

看了好多博客论坛啥的，我比较笨不是很理解，包括我之前转载的一篇，不过我转载的我是看懂了，今天没事重新过了下官网，下面我们一起看看官网是如何给出解答的，这里面第一个他也用了return，但是和我们说的return不同，这个完全是为了躲避语法报错，我们也可以自己创建vue实例注册组件，然后多个地方同时注册，解释的还是很好的，我这里抛砖引玉下~~~

通过 Vue 构造器传入的各种选项大多数都可以在组件里用。data 是一个例外，它必须是函数。实际上，如果你这么做：

Vue.component('my-component', {
  template: '<span>{{ message }}</span>',
  data: {
    message: 'hello'
  }
})

那么 Vue 会停止，并在控制台发出警告，告诉你在组件中 data 必须是一个函数。理解这种规则的存在意义很有帮助，让我们假设用如下方式来绕开 Vue 的警告：

<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>

var data = { counter: 0 }
Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
  // 但是我们返回给每个组件的实例却引用了同一个 data 对象
  data: function () {
    return data
  }
})
new Vue({
  el: '#example-2'
})

由于这三个组件共享了同一个 data，因此增加一个 counter 会影响所有组件！这不对。我们可以通过为每个组件返回全新的 data 对象来解决这个问题：

data: function () {
  return {
    counter: 0
  }
}

现在每个 counter 都有它自己内部的状态了：

标签

#data返回函数 #vue中data #为什么vue使用返回函数 #前端

vue中data必须是函数

1 条评论