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

  • 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对象。

相关推荐

  1. 009-组件data什么函数

    2024-03-11 16:40:04       21 阅读
  2. Vue2组件data什么函数,而不对象

    2024-03-11 16:40:04       5 阅读
  3. 高阶组件和高阶函数什么

    2024-03-11 16:40:04       35 阅读
  4. 什么Spring容器中组件

    2024-03-11 16:40:04       10 阅读
  5. 前端开发中组件什么

    2024-03-11 16:40:04       14 阅读
  6. Redis 什么单线程

    2024-03-11 16:40:04       36 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-11 16:40:04       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-11 16:40:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-11 16:40:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-11 16:40:04       18 阅读

热门阅读

  1. WatchBird: 新一代纯PHP防火墙

    2024-03-11 16:40:04       19 阅读
  2. 03 数据结构之栈

    2024-03-11 16:40:04       14 阅读
  3. SQL 分组查询

    2024-03-11 16:40:04       23 阅读
  4. nginx配置IPV6

    2024-03-11 16:40:04       15 阅读
  5. 服务中心选址问题

    2024-03-11 16:40:04       18 阅读
  6. C语言分支和循环语句—while

    2024-03-11 16:40:04       20 阅读
  7. PokéLLMon 源码解析(二)

    2024-03-11 16:40:04       20 阅读
  8. 解决Git中fatal: refusing to merge unrelated histories

    2024-03-11 16:40:04       23 阅读