vue组件data通常定义为一个函数并return一个对象,对象中定义的就是组件数据,当然定义数据还有props、computed等方式。

data如果直接定义为对象data: {message: ''}或者data定义为函数且return同一个对象

因为对象为引用类型,如果组件被多次复用,则复用组件data都指向同一个内存地址,组件间数据就会存在相互影响问题,改变其中一个,另外的也会改变。

可以借鉴js原型链、通过原型链实例化对象的概念做理解。

JavaScript函数作用域使每个组件数据相互独立,不会相互影响,当组件实例化时,data声明为函数并显式return一个对象。

而在new Vue({})中data可以是个对象

区分组件和实例的概念,组件是可复用的单元,注册组件不会产生新的组件类,产生的是一个可以用来实例化的类,当使用组件时才将组件实例化。

当我们把data改为对象,vue会报错

分析vue源码,找到报错位置

这个函数用来处理组件的data选项,可以看出组件与实例vm会进不同的判断,组件就会判断data是否为函数,然后执行options的合并

vue组件data函数的更多相关文章

  1. Vue 组件 data为什么是函数?

    在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...

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

    在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...

  3. Vue组件中的Data为什么是函数。

    简单点说,组件是要复用的,在很多地方都会调用.   如果data不是函数,而是属性,就又可能会发生多个地方的相同组件操作同一个Data属性,导致数据混乱. 而如果是函数,因为组件data函数的返回值是 ...

  4. 构建前端第12篇之---在Vue中对组件,变量,函数的全局引入

    张燕涛写于2020-01-16 星期two 本篇还是源于import和export的使用,昨天看es6入门 和MDN文档,大体上用法了解了,但今天看ElementUI源码的时候,看到 //src/in ...

  5. vue组件详解(二)——使用props传递数据

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅 ...

  6. vue组件详解——使用props传递数据

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 ...

  7. VUE组件 单独文件封装

    https://www.cnblogs.com/SamWeb/p/6391373.html vuejs 单文件组件.vue 文件   vuejs 自定义了一种.vue文件,可以把html, css, ...

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

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

  9. 【Vue】定义组件 data 必须是一个函数返回的对象

    Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化.对象必须是纯粹的对象 (含有零个或多个的 key/value ...

随机推荐

  1. Hadoop-集群运行

    目录 步骤一.NameNode 格式化 步骤二.启动 NameNode 步骤三.启动 SecondaryNameNode 步骤四.slave 启动 DataNode 步骤五.查看 HDFS 的报告 步 ...

  2. 文件IO-Properties

    java.lang.Object 继承者 java.util.Dictionary<K,V> 继承者 java.util.Hashtable<Object,Object> 继承 ...

  3. Python-初见-高级篇

    目录 正则表达式 CGI MySQL PyMySQL 网络编程 多线程 线程同步 线程优先级 JSON 推荐阅读:https://www.cnblogs.com/zwtblog/tag/Python/ ...

  4. 帝国CMS怎样删除清空数据库记录?

    我用的帝国CMS,删除已经发表的文章和栏目后,后面新发的栏目和文章ID并不会重新从1开始,而是接着已经删除的文章和栏目ID,那么,怎样让后面发的文章和栏目ID重新从1开始呢? 首先,做任何重要修改前先 ...

  5. spring4+springmvc+springdataJPA+hibernate4+Junit4整合懒加载问题

    文章目录 技术交流 #摘要 本文主要是为了解决"spring4+springmvc+springdataJPA+hibernate4+junit4整合",注解了OneToMany. ...

  6. pgpool-II 4.3 中文手册 - 入门教程

    本章解释了如何开始使用 Pgpool-II. 安装 在本节中,我们假设您已经安装了 Pgpool-II 与 PostgreSQL 集群. 你的第一个复制(Replication) 在本节中,我们将解释 ...

  7. XCTF练习题---MISC---倒立屋

    XCTF练习题---MISC---倒立屋 flag:flag{9102_cCsI} 解题步骤: 1.观察题目,下载附件 2.打开发现是个倒立的屋子,并没有发现啥东西,拿StegSolve看看 3.查了 ...

  8. SD卡之二:SD总线访问模式

    SD 卡是以命令.回应.数据流进行通讯. 1.命令:命令的长度是48位,命令以'0'开始,第2位为'1'表示主机发往SD卡的命令,最后以CRC和结束位'1'结尾. 2.回应:回应的长度是48位或者13 ...

  9. c++:-2

    上节介绍C++的函数介绍:c++:-1,本节学习类与对象 类与对象 定义 类定义 class 类名称 { public: 公有成员(外部接口) private: 私有成员 protected: 保护型 ...

  10. 将Excel数据转换为Java可识别时间(Date、Timestamp)

    引言 Excel的时间,POI读取到的是double,这个值不是timestamp.需要进行一些转换,将它转换为Date或者Timestamp. Excel中的日期数据: 程序中读取到的数据: 如何转 ...