理解组件中的data为什么是函数

最新推荐文章于 2023-06-29 17:34:45 发布

玫瑰应急箱-

最新推荐文章于 2023-06-29 17:34:45 发布

阅读量367

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Carol__a/article/details/125590449

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

组件数据的存放

组件对象也有一个data属性（也可以有methods等属性）
只是这个data属性必须是一个函数
而且这个函数返回一个对象，对象内部保存着数据

以计数器为例将计数器写为一个小组件

<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>

    <template id="cpn">
        <div>
            <h2>当前计数：{{counter}}</h2>
            <button @click="increament">+</button>
            <button @click="decreament">-</button>
            <!-- 不可以写进Vue实例里面 -->
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        Vue.component('cpn', {
            template: '#cpn',
            data() {
                return {
                    counter: 0
                }
            },
            methods:{
                increament(){
                    this.counter++
                }, decreament(){
                    this.counter--
                }
            }
        })
        const app = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                // title:'我是标题'
            },
            computed: {},
            methods: {},
            components: {
            }
        });
    </script>
</body>

三个组件实例是不是共用一个data对象？

不是

因为data是一个函数，在创建组件时调用data函数，在每次调用时都会return一个对象

一旦data不是函数而是一个对象，则每次创建一个新的组件时返回的是同一个data对象，这样各组件就会相互影响。比如，把以第一个计数器+1 则第二个第三个也被修改了，引发连锁反应。

在开发中避免引起这样的连锁反应，data必须是一个函数，返回的是一个对象。（面试）

玫瑰应急箱-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
理解组件中的data为什么是函数

因为data是一个函数，在创建组件时调用data函数，在每次调用时都会return一个对象。，这样各组件就会相互影响。比如，把以第一个计数器+1 则第二个第三个也被修改了，引发。在开发中避免引起这样的连锁反应，data必须是一个函数，返回的是一个对象。三个组件实例是不是共用一个data对象？以计数器为例将计数器写为一个小组件。一旦data不是函数而是一个对象，则。
复制链接

扫一扫