vue的data为什么是一个函数

代码示意:
比如说有一个组件count.vue:

<template>
  <div>
    <button @click="change(1)">加一</button>
    <input type="text" v-model="num" />
    <button @click="change(-1)">减一</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    change(step) {
      this.num += step;
    },
  },
};
</script>

有父组件home.vue:

<template>
  <div>
    <ccc />
    <ccc />
  </div>
</template>

<script>
import ccc from "../components/ccc"
export default {
  components:{ccc}
};
</script>

我们在父组件使用用了两次组件count,然后点击加一按钮,结果是什么呢,只有我们点击的哪一个组件才会发生变化

虽然是同一个组件,但是数据并不会共享

假如我们想要共享这两个组件之间的数据,一种方式是使用vuex,另一种方式则可以修改count.vue文件

<template>
  <div>
    <button @click="change(1)">加一</button>
    <input type="text" v-model="num" />
    <button @click="change(-1)">减一</button>
  </div>
</template>

<script>
const db = {
  num: 0
}
export default {
  data() {
    return db
  },
  methods: {
    change(step) {
      this.num += step;
    },
  },
};
</script>

·所以，vue的data是一个函数的原因是，确保每一个vue组件的实例是唯一的，数据是不共享的，更容易维护的

vue的data为什么是一个函数

原文：https://www.cnblogs.com/zoo-x/p/14416367.html