vue中data为什么要用函数

最新推荐文章于 2022-11-07 14:43:38 发布

〆﹏为你伏笔

最新推荐文章于 2022-11-07 14:43:38 发布

阅读量220

点赞数

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

本文链接：https://blog.csdn.net/Q2159621453/article/details/125049603

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

vue组件化的最重要特点就是可复用性，如果data是对象，每个实例调用时数据所存储的位置都是相同的，一个实例中数据的更改其余的也会更改。使用函数调用时就会重新分配一个地址，各数据之间就没有关联。

<body>
    <div id="app">
        <cpn1></cpn1>
        <cpn1></cpn1>
        <cpn1></cpn1>
        <br>
        <cpn2></cpn2>
        <cpn2></cpn2>
        <cpn2></cpn2>
    </div>
    <template id="cpn1">
        <div>
            <button type="button" @click="count++">+</button>
            <span2>{{count}}</span2>
            <button type="button" @click="count--">-</button>
        </div>
    </template>
    <template id="cpn2">
        <div>
            <button type="button" @click="count++">+</button>
            <span2>{{count}}</span2>
            <button type="button" @click="count--">-</button>
        </div>
    </template>
    <script>
        let obj = {
            count: 0
        };
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                }
            },
            components: {
                cpn1: {
                    template: "#cpn1",
                    data(){
                        return obj
                    }
                },
                cpn2: {
                    template: "#cpn1",
                    data() {
                        return {
                            count: 0
                        }
                    }
                }
            }
        })
    </script>
</body>

组件中data写成对象会报错，简单模拟一下，第一个返回一个对象，第二个是具体的值。返回对象的就会因为是同一个地址而发生相互影响。

〆﹏为你伏笔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中data为什么要用函数

vue组件化的最重要特点就是可复用性，如果data是对象，每个实例调用时数据所存储的位置都是相同的，一个实例中数据的更改其余的也会更改。使用函数调用时就会重新分配一个地址，各数据之间就没有关联。<body> <div id="app"> <cpn1></cpn1> <cpn1></cpn1> <cpn1></cpn1> <br&g
复制链接

扫一扫