009-组件的data为什么是个函数

博客介绍了Vue的data数据是Vue原型上的属性,vue组件是vue实例。因JavaScript引用类型特性,对象形式定义data会使组件间数据相互影响。根实例data可为对象或函数,组件实例data必须为函数,以避免数据污染,initData时会返回全新data对象。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • Vue 的data数据其实是Vue原型上的属性,vue组件就是一个vue实例。
  • 因为JavaScript引用类型特性,如果使用对象形式定义data,修改一个组件中data的值,其他组件也会受影响。
new Vue({
    el: '#app',
    data: { message: 'Love' },
    template: '<p>It’s great to love cakes.</p>'
})

Vue.component('button-counter',
    {
        data() {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    }
)
  • 根实例对象data可以是对象也可以是函数(根实例是单例),不会产生数据污染情况。
  • 组件实例对象data必须为函数,目的是为了防止多个组件实例对象之间共用一个data,产生数据污染。采用函数的形式,initData时会将其作为工厂函数都会返回全新data对象。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值