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. HashMap和ConcurrentHashMap的原理和实现

    一.线程不安全的HashMap 多线程环境下,使用HashMap进行put操作会引起死循环(jdk1.7 Entry链表形成环形数据结构),导致CPU利用率接近100%. 结构:数组 table[]+ ...

  2. 小程序获取自定义属性之e.target与e.currentTarget

    彻底弄懂小程序e.target与e.currentTarget 一.小程序中关于事件对象  e  的属性中有两个特别重要的属性:target与currentTarget属性:对于这两个属性,官方文档上 ...

  3. FreeRTOS学习记录--任务创建函数详解

    开局一张图.一步一步分析就好. (一)什么是任务? 在多任务系统中,我们按照功能不同,把整个系统分割成一个个独立的,且无法返回的函数,这个函数我们称为任务:任务包含几个属性:任务堆栈,任务函数.任务控 ...

  4. 让我们写一个 Win32 文本编辑器吧 - 2. 计划和显示

    让我们写一个 Win32 文本编辑器吧 - 2. 计划和显示 如果你已经阅读了简介,相信你已经对我们接下来要做的事情有所了解. 本文,将会把简介中基础程序修改为一个窗体应用程序.并对编辑器接下来的编辑 ...

  5. Android 环境搭建记录

    Android 环境搭建记录 官网 https://developer.android.com/ studio 下载地址 官方下载 jikexueyuanwiki 国内镜像 studio历史版本 安装 ...

  6. 内网穿透NPS

    内网穿透实现 nps文档 https://ehang-io.github.io/nps/#/install nps docker镜像 https://hub.docker.com/r/ffdfgdfg ...

  7. MPU9250/MPU6050与运动数据处理与卡尔曼滤波（1）

    第一篇--概述和MPU6050及其自带的DMP输出四元数 概述 InvenSense(国内一般译为应美盛)公司产的数字运动传感器在国内非常流行,我用过它的两款,9250和6050.出于被国产芯片惯坏的 ...

  8. 记一次docker安装成功，启动失败的原因

    问题 按照错误提示,先查看docker的状态: systemctl status docker 可以看到,非常明显的一行大红字:Failed to start Docker Application C ...

  9. Vue 生产环境（production) 打开 调试工具的方法

    总所周知,在production生产环境下,点击vue插件会显示, 并且按F12是没办法使用调试工具的,这样非常不方便 其实是有一个办法的,那就是复制下面的js,然后在控制台执行 代码中已经写清楚执行 ...

  10. Python生成短uuid的方法

    python的uuid都是32位的,比较长,处理起来效率比较低, 本算法利用62个可打印字符,通过随机生成32位UUID,由于UUID都为十六进制,所以将UUID分成8组,每4个为一组,然后通过模62 ...