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. python+pytest接口自动化(13)-token关联登录

    在PC端登录公司的后台管理系统或在手机上登录某个APP时,经常会发现登录成功后,返回参数中会包含token,它的值为一段较长的字符串,而后续去请求的请求头中都需要带上这个token作为参数,否则就提示 ...

  2. oracle三个重要参数文件：pfile和spfile和init.ora

    Oracle中的参数文件是一个包含一系列参数以及参数对应值的操作系统文件.它们是在数据库实例启动第一个阶段时候加载的, 决定了数据库的物理 结构.内存.数据库的限制及系统大量的默认值.数据库的各种物理 ...

  3. 两数之和_LeetCode_1

    LeetCode_1原题链接:https://leetcode-cn.com/problems/two-sum/ 剑指 Offer 57原题链接: https://leetcode-cn.com/pr ...

  4. Java之JDBC详谈(数据库)

    详细介绍了数据库的JDBC操作,并且整理了具体方法,有代码实现与详细注释.

  5. 入门学习SpringCloud

    今天趁着空余时间,看了一丁点狂神SpringCloud的视频.学习微服务及架构相关知识,明天再学习系列视频的剩下部分,部署第一个SpringCloud练习. 同时趁着晚上课后大家有时间组织了小型会议, ...

  6. vue动态路由实现原理 addRoute

    vue新版router.addRoute基础用法 新版Vue Router中用router.addRoute来替代原有的router.addRoutes来动态添加路由.子路由 在添加子路由的时候 比如 ...

  7. 如何在同一Linux服务器上创建多站点

    在没有域名的情况下,怎样才能创建出多站点访问?这个问题困扰我许久,之后阅读了<http权威指南>,这本让我恍然大悟.这里说明了从浏览器如何解析域名,再请求服务器,服务器收到请求后是如何处理 ...

  8. 了解mybatis

    什么是mybatis? MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射.MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作.MyBati ...

  9. 实现Linux系统的回收站

    Linux系统默认没有回收站功能,使用rm命令进行删除操作,文件就会直接从系统中删除,很难恢复. 今天我们利用简单的shell脚本实现Linux系统下的回收站机制. 先提供脚本代码 [root@qll ...

  10. 图文详解：小白也能看懂的 Kubernetes

    Kubernetes 这个单词来自于希腊语,含义是舵手或领航员 .其词根是 governor 和 cybernetic.K8s 是它的缩写,用 8 字替代了"ubernete". ...