11. 组件中的data以及data为什么必须是函数

组件中的data保存的是自己的数据，但是这个data必须是个函数，然后返回一个对象的形式

<div id="app">
        <cpn1></cpn1>
    </div>
    <template id="cpnC1">
        <div>
            <h2>{{title}}</h2>
            <p>make the world a better place</p>
        </div>
    </template>
    <script>
        Vue.component('cpn1', {
            template: '#cpnC1',
            data() {
                return {
                    title: 'hello world111'
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>

组件中的data为什么必须是一个函数

首先，我们先思考一下下面的代码：

        let obj = {
            name: 'jason',
            age: 18
        }
        function getObj() {
            return obj
        }
        let obj1 = getObj();
        let obj2 = getObj();
        let obj3 = getObj();

        obj1.name = 'lucy';
        console.log(obj2.name); //lucy
        console.log(obj3.name); //lucy

这里就有个问题，我们修改了其中一个的name属性，其他的几个也变了，这是因为对象是引用类型，保存的是一个内存的地址，引用的其实都是同一个对象，所以这种方式的话不太行😥，接着看下面的代码：

<script>
        function getObj() {
            return {
                name: 'jason',
                age: 18
            }
        }
        let obj1 = getObj();
        let obj2 = getObj();
        let obj3 = getObj();

        obj1.name = 'lucy';
        console.log(obj2.name); //jason
        console.log(obj3.name); //jason
    </script>

拿函数包裹一下返回的话，就能够确保每次都返回的是不同的对象，所以，在Vue的组件中data必须是一个函数，然后返回一个对象的形式，这样才能确保，组件中的数据的独立性