为什么vue中的data必须是函数

1.问题描述

如果你写过vue的组件，应该对组件下面的data不陌生，官方要求组件的data必须是函数。如果你使用的是对象，则控制台会报错。

    export default {
	  data: {
	    name: '答案cp3'
	  },
	  mounted () {
	    console.log(this.name)
	  }
	}

不但报错，而且打印的name 是 undefined。

但是如果换成函数：

	 export default {
	  data () {
	    return {
	      name: '答案cp3'
	    }
	  },
	  mounted () {
	    console.log(this.name)
	  }
	}

2. 为什么vue要对data限制为函数？

因为 vue 的组件是会复用的，如果你的 data 是对象的话，你在其中一个组件修改了 data 的值，另外一个组件获取到的 data 是修改后的值，并不是初始值。这样就不能保证 组件 的 data 数据的唯一性。
而如果你的 data 是 函数 的话，data函数 执行后返回的是初始值，并不会受到影响。
下面通过一个模拟例子来说明：
模拟 data 是 对象 的情况：

   const data = { i: 0 }

        class Component {
            constructor() {
                this.data = data
            }

            add() {
                this.data.i++
                
            }

            show() {
                console.log(this.data.i);

            }
        }

        const component1 = new Component();
        const component2 = new Component();
        const component3 = new Component();
        component1.add()
        component2.add()
        component3.show()
        console.log(component1.data === component2.data);  // true
        console.log(component2.data === component3.data);  // true
        console.log(component1.data === component3.data);  // true

模拟 data 是 函数 的情况：

   const data = function () {
            return {
                i: 0
            }
        }

        class Component {
            constructor() {
                this.data = data()
            }

            add() {
                this.data.i++
            }

            show() {
                console.log(this.data.i);

            }
        }
        
        const component1 = new Component()
        const component2 = new Component()
        const component3 = new Component()
        component1.add()
        component2.add()
        component3.show()
        console.log(component1.data === component2.data); // false
        console.log(component2.data === component3.data); // false
        console.log(component1.data === component3.data); // false

可以看到

第一个受到了新建实例的影响，输出了叠加后的值,且他们的 data 是相同的。

第二个就没有受到影响，还是保持原始值，且他们的 data 不同。

3. 补充

上面说的是 组件的data 定义的时候必须是 函数类型，但是在 根实例 并不会有这个限制，它可以是 对象类型 。

 <div id="app">
    {{msg}}
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello world'
      }
    })
    console.log(vm)
  </script>

因为vue中根实例是不会被复用的，只有组件才会被复用，所以根实例不会有这种情况。