因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
　　组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

vue组件中data为什么必须是一个函数？的更多相关文章

  1. vue组件中data为什么必须是个函数

    <body> <div id="app"> <counter></counter> </div> <templat ...

  2. Vue 组件中 data 为什么必须是函数

    原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...

  3. vue组件中data是个函数

    当我们const vm = new Vue({ el : '#app',   data : { msg:‘hello World’ } })用习惯了,data是一个对象,可到了vue组件 Vue.co ...

  4. 怎样理解 Vue 组件中 data 必须为函数 ?

    组件意在 复用 , 若为 对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下 对象 // 模拟创建组件 var Component= function() { ...

  5. Vue组件里面data为什么必须是个函数

    在创建或注册模板的时候,传入一个data属性用来绑定数据,但是在组件中,data必须是一个函数,而不能直接把对象赋值给它. export default { name:'app', data(){ r ...

  6. 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数

    1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...

  7. vue组件中的data与methods

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...

  8. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  9. 黑马vue---61、为什么vue组件的data要是一个函数

    黑马vue---61.为什么vue组件的data要是一个函数 一.总结 一句话总结: 因为js中以函数为变量作用域,所以这样可以保证每个组件的数据不互相影响 二.why components data ...

随机推荐

  1. 英特尔® 图形性能分析器（Intel® GPA）

    英特尔图形性能分析器概述 英特尔 GPA 是一套软件工具,它能提供平台级游戏性能分析功能,优化应用性能. 英特尔 GPA 包含以下组件: 英特尔 GPA 监控器 - 将英特尔 GPA 连接至应用(处于 ...

  2. [LeetCode]2. Add Two Numbers链表相加

    注意进位的处理和节点为null的处理 public ListNode addTwoNumbers(ListNode l1, ListNode l2) { int flag = 0; ListNode ...

  3. 【kinetic】操作系统探索总结（八）键盘控制

    如果尝试过前面的例子,有没有感觉每次让机器人移动还要在终端里输入指令,这也太麻烦了,有没有办法通过键盘来控制机器人的移动呢?答案室当然的了.我研究了其他几个机器人键盘控制的代码,还是有所收获的,最后移 ...

  4. Linux嵌入式学习-mount命令+nfs挂载失败原因【转】

    NFS 挂载失败原因[待搜集] 1.挂载时若出现mount.nfs: Input/output error 解决:在客户端也需启动portmap服务 service portmap status[查看 ...

  5. MongoDb学习三（spring-data-mongodb）

    本文采用2个种配置方式.xml配置 代码配置方式进行数据库的连接.实现简单的增删该查等一些操作.代码都有注释官方文档如下https://docs.spring.io/spring-data/mongo ...

  6. element-ui使用后手记

    一.路由模式el-menu中使用路由模式 在el-meun中设置:router="true" 在el-menu-item中设置index="路由地址"

  7. NOIP初赛篇——01计算机常识

    发展历史 年代划分 代别 年代 逻辑(电子)元件 第一代 1946-1958 电子管 第二代 1959-1964 晶体管 第三代 1965-1970 集成电路 第四代 1971-至今 大规模.超大规模 ...

  8. M43 第一阶段考试

    一.解答题 1.统计当前主机的TCP协议网络各种连接状态出现的次数 netstat -an | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a ...

  9. js如何替换字符串中匹配到多处中某一指定节点？

    抛出一个问题,如图,搜索关键字,匹配到四处,那我鼠标放在第二处,我想把它变个颜色,该怎么实现呢?回到文章的标题,js如何替换字符串中匹配到多处中某一指定节点? 字符串的替换,我们首先想到的一个属性是r ...

  10. MySQL 集群知识点整理

    随着项目架构的不断扩大,单台 MySQL 已经不能满足需要了,所以需要搭建集群将前来的请求进行分流处理.博客主要根据丁奇老师的专栏<<MySQL实战45讲>>学习的总结. 架构 ...