为什么data必须是一个函数？

为什么data必须是一个函数？

避免组件在复用中data数据污染。
下面同过两个案例演示

案例一：data是一个函数返回一个新对象

子组件：

提供两个按钮修改 count 和 展示 count

<template>
  <div>
    <button @click="count--">-</button>
    <span style="padding: 0 10px">{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
  export default {
    name: "CountItem",
    data() {
      return {
        count: 0,
      };
    },
  };
</script>

<style scoped></style>

父组件：

使用两次 count 组件

<template>
  <div id="app">
    <div>
      <Count />
    </div>
    <div style="margin: 20px 10px;">
      <Count />
    </div>
  </div>
</template>

<script>
  import Count from './components/Count.vue'
  export default {
    name: 'App',
    components: {
      Count
    }
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

页面展示：

修改 count 不会 影响复用的其他组件数据

原因：每次复用 count 组件 vue 会调用data函数 data函数返回的是一个对象 注意返回的对象是新创建的。

第一次使用count组件时 data函数返回一个新对象

第二次使用count组件时 data函数返回的还是一个新的对象

所以两次使用的count组件data函数返回的对象并不是同一个每次都是新的，而且 data函数内的this是当前组件的实例。从而避免了数据污染。

案例二： data是一个函数

因为组件内data必须是一个函数 所以这里 data 为了模拟是一个函数 就 返回一个旧对象

子组件：

<template>
  <div>
    <button @click="count--">-</button>
    <span style="padding: 0 10px">{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
  const data = { count: 0 };
  export default {
    name: "CountItem",
    data() {
      return data;
    },
  };
</script>

<style scoped></style>

父组件：

<template>
  <div id="app">
    <div>
      <h1>Count 1 </h1>
      <Count ref="count1" />
    </div>
    <div style="margin: 20px 10px;">
      <h1>Count 2 </h1>
      <Count ref="count2" />
    </div>
  </div>
</template>

<script>
  import Count from './components/Count.vue'
  export default {
    name: 'App',
    components: {
      Count
    }
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

页面展示：

这里不管我修改哪个组件的count。两个组件的count都是同步的。因为data函数每次都是返回的都是一个旧对象 并不是每次新创建的

源码获取：https://gitee.com/dengsad/my-vue2-project