vue中data为什么是函数

1、data是函数不会污染

    <script>
        function Data(){
            return{
                name:'lxx',
                age:18
            }
        }
    //在App.vue 导入import Child from "./components/Child"时 Child也是一个对象
    //组件对象Child1有data属性 ，data:Data()  data 是一个函数
        const Child1 = {
            data:Data()
        }
        const Child2 = {
            data:Data()
        }
        Child1.data.name='lyf'
        //其中一个组件发生改变 不会影响另外
        console.log(Child1);
        console.log(Child2);
    </script>

对象组件的data属性是函数Data,每调用一次data函数，都会返回全新的对象实例。

示例：
在app.vue中引入childone.vue。组件是可复用的。在页面中使用两次这个组件。

<template>
  <div id="app">
     <Childone></Childone>
     <Childone></Childone>
  </div>
</template>
<script>
import Childone from "./components/Childone.vue"
export default {
  name:'app',
  components:{
    Childone
  }
}
</script>

在child.vue中data是函数，注意num属性

<template>
    <div>
      <p>{{num}}</p>
      <button @click="add">增加</button>
    </div>
</template>

<script>
export default {
  name: 'Childone',
  data(){
    return{
      num:1
    }
  },
  methods:{
    add(){
      this.num++
    }
  }
}
</script>

显示出两个一样的child组件，点击其中一个，不会影响另一个。

修改第一个组件后，不影响其他组件。

2、data是对象，共用对象，会污染

    <script>
        const Data = {
            name:'lxx',
            age:18
        }
    //组件对象有data属性 ，data:Data  data 是一个对象
        const Child1 = {
            data:Data
        }
        const Child2 = {
            data:Data
        }
        Child1.data.name='lyf'
        //其中一个组件Child1数据data发生改变，会影响另外组件
        console.log(Child1);
        console.log(Child2);
    </script>

对象组件的data属性是对象Data,每调用一次，都是返回同一个对象。

示例：
在app.vue中引入childone.vue。组件是可复用的。在页面中使用两次这个组件。

<template>
  <div id="app">
     <Childone></Childone>
     <Childone></Childone>
  </div>
</template>
<script>
import Childone from "./components/Childone.vue"
export default {
  name:'app',
  components:{
    Childone
  }
}
</script>

在childone.vue组件中，data是对象：
.vue文件中不允许这样定义，会报错：

<script>
export default {
  name: 'Childone',
  data:{
    num:1
  },
  methods:{
    add(){
      this.num++;
    }
  }
}
</script>

换一种形式，表达data是对象时，数据会被污染，（解释data为什么是函数而不是对象）
.vue文件规定data只能函数定义，我们就假装是函数，但是共用同一个对象
child.vue

<template>
    <div>
      <p>{{num}}</p>
      <button @click="add">增加</button>
    </div>
</template>

<script>
  //把对象提取出来，也就是之后都会共用一个对象，造成污染
  const data = {
    num:1
  }
export default {
  name: 'Childone',

  data(){
   return data
  },
  methods:{
    add(){
      this.num++;
    }
  }
}
</script>

点击其中一个组件，会影响另一个组件。