vue 的data选项

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20087231/article/details/83376906

验证data选项必须是函数

函数时，数据没有共享，互相独立

    <div id="app">
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
    </div>
    <template id="my_btn">
        <button @click="counter += 1">点击次数：{{counter}}</button>
    </template>
    <script src="js/vue.js"></script>
    <script>
        // 1.实例化组件
        Vue.component('my-btn', {
            template: '#my_btn',
            data() {
                return {
                    counter: 0
                }
            }
        });
        new Vue({
            el: '#app',
        });
    </script>

对象时，数据之间共享，不独立

    <div id="app">
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
    </div>
    <template id="my_btn">
        <button @click="counter += 1">点击次数：{{counter}}</button>
    </template>
    <script src="js/vue.js"></script>
    <script>
        let data = {
                counter: 0
            }
            // 1.实例化组件
        Vue.component('my-btn', {
            template: '#my_btn',
            data() {
                return data;
            }
        });
        new Vue({
            el: '#app',
        });
    </script>