因为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. .Net Core 审计日志实现

    前言: 近日在项目协同开发过程中出现了问题,数据出现了异常:其他人员怀疑项目数据丢失程序存在问题.于是通过排查程序提供的审计日志最终还原了当时操作及原因. 可见审计日志在排查.定位问题是相当有用的,那 ...

  2. 本地TOMCAT启动打包项目（WAR）

    首先打个包,右击项目-->Export...   选择WEB-->WAR file-->Next   选个放置地址,勾选红框处-->finish   找到自己的tomcat目录 ...

  3. 对象存储Backblaze B2作为ShareX图床的Windows及安卓端配置

    标题: 对象存储Backblaze B2作为ShareX图床的Windows及安卓端配置 作者: 梦幻之心星 sky-seeker@qq.com 标签: [对象存储,图床,Backblaze,Shar ...

  4. SSM框架实现多张图片和其他数据一起上传

    一.SSM+Form 多张图片和其他数据一起上传, 1.导包: commons-fileupload-1.3.3.jar commons-io-2.4.jar 2.springmvc.xml 文件配置 ...

  5. CSDN中的MARKDOWN编辑器如何快速复制粘贴图片？

    前言 我们在使用csdn的markdown编辑器复制其它网站图片,按住ctrl+C复制选择图片,然后按ctrl+V粘贴图片到md编辑器无任何反应!markdown编辑器每次都没法复制粘贴截图! 下面小 ...

  6. nohup命令说明-转载

    转自:https://www.ibm.com/developerworks/cn/linux/l-cn-nohup/ 我们知道,当用户注销(logout)或者网络断开时,终端会收到 HUP(hangu ...

  7. DW数据仓库

    https://blog.csdn.net/bjweimengshu/article/details/79256504 from Wikipedia 在计算机科学中,数据仓库(data warehou ...

  8. TypeLoadException: 未能从程序集“ECS.GUI.Define, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null”中加载类型“ECS.GUI.Define.ArmgAimPos”，因为它在 4 偏移位置处包含一个对象字段，该字段已由一个非对象字段不正确地对齐或重叠

    TypeLoadException: 未能从程序集"ECS.GUI.Define, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null ...

  9. 【Sphinx】 为Python自动生成文档

    sphinx 前言 Sphinx是一个可以用于Python的自动文档生成工具,可以自动的把docstring转换为文档,并支持多种输出格式包括html,latex,pdf等 开始 建一个存放文档的do ...

  10. Linux学习笔记 | 将默认镜像源修改为国内镜像源

    前言: 在使用Linux操作系统的时候,难免会下载各种安装包,而Linux使用的下载源服务器属于国外,下载速度相对国内会慢很多,像日常使用的阿里云和腾讯云等国内服务器厂商,镜像源都默认为自己相关的镜像 ...