Vue学习19_Vue组件数据的存放及为什么组件的data必须是一个函数

Vue组件数据的存放

1. 组件中的数据存放于data(){}函数中，并且必须是一个函数！
   我们都知道，在Vue实例中，有一个属性data用于存放数据，我们可以将所需要的数据存放在data属性中，在实例中，data是一个属性，它可以是一个对象，对象中存放着我们所需要的数据，但是为什么在组件中，数据存放的data必须是一个函数呢？
   示例代码：

    <div id="app">
        <!-- 使用组件 -->
        <mycpn></mycpn>
    </div>

    <!-- 组件模板 -->
    <template id="menu">
        <div>
            <ul>
                <li v-for="menu in menus">{{menu}}</li>
            </ul>
        </div>
    </template>

    <script>

        // 注册组件
        Vue.component('mycpn', {
            template: '#menu',
            data() {
                return {
                    menus: ['1', '2', '3', '4']
                }
            }
        })

        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
            },
            methods: {}
        });
    </script>

组件中的data必须是一个函数的原因：我们在创建组件时，是为了方便组件能够进行复用，就比如说我们定义了一个导航栏的组件，我们在不同的页面都使用到了导航栏这一组件，但我们并不希望我们在界面A对导航栏进行的数据操作，影响到界面B中的导航栏组件，倘若像实例中那样，将数据对象存放于data，并且data是一个属性而不是一个函数时，我们对组件数据的操做，操做的时同一个数据，这是我们在使用组件时所不愿意的，因此，将组件的数据对象存放于data函数中，当对组件的数据进行操作时，操作的是当前界面的组件数据，而不会影响到其他界面使用的组件数据。
组件中的数据为一个对象时，当组件在一个界面使用时，此界面更改数据，其他界面使用数据也会跟着发生改变
这是我们使用组件所不愿意看到的；
组件中的对象是一个函数时，在一个界面使用组件对组件数据进行更改时，其他界面使用组件的数据不会发生改变