当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。 如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数， 每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

重复创建实例造成多个实例共享一个数据对象如果改变某一个就会造成全部的改变类比于浅拷贝会造成数据污染

Vue2的组件中data为什么不能使用对象的更多相关文章

  1. 039——VUE中组件之子组件中data使用实例与text-xtemplate的使用方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

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

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

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

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

  5. Vue.js 组件中data的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue组件中data为什么必须是一个函数？

    因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象. 组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一 ...

  7. 39.VUE学习--组件,子组件中data数据的使用,x-template模板的使用,改变for循环里的某条数据里的值

    多处引用相同组件时,操作data不会相互影响 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  8. vue组件中data是个函数

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

  9. 15.Vue组件中的data

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

  10. 第六章 组件 56 组件-组件中的data

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. Java中接口相关知识

    1.接口 1.1接口概述 接口就是一种公共的规范标准,只要符合标准,大家都可以通用 Java中的接口更多的体现在对行为的抽象 1.2接口的特点 接口用关键字interface修饰,格式:public ...

  2. Jmeter检查点

    一.Response Assertion(响应断言) 1. 添加响应断言 对Web请求的响应结果进行验证,Response Assertion配置参数 2. 输入需要匹配的字符串 此处对于访问Baid ...

  3. 【转载】Fisher精确检验的通俗理解

    一直以来都很欣赏把东西讲得通俗简单的文章,今天碰巧翻到一篇, 讲Fisher检验的,内容虽然不深,但是体验很好,能感受到作者想方设法想要读者明白的那种心思~ 原文在这里: https://blog.c ...

  4. golang RWMutex RLock重入导致死锁

    现象 一个组件实现了raft分布式协议,在分布式部署环境中来进行选主,在某客户现场突然发生文件句柄泄露,在打印某些错误日志后,几个小时内没有日志打印,然后某个协程突然报无可用的文件句柄. 分析 经过代 ...

  5. Linux（CentOS）安装脚本

    此文以CentOS为例,乌班图的是有区别的,请参照https://www.cnblogs.com/takako_mu/p/11725733.html. 安装.Net Core (能访问外网的情况下采用 ...

  6. 什么是序列化？实体类为什么要实现序列化接口？实体类为什么要指定SerialversionUID？

    首先我们说答案:实体类对象在保存在内存中的,而对于web应用程序而言,很多客户端会对服务器后台提交数据请求,如得到某种类型的商品,此时后台程序会从数据库中读取符合条件的记录,并它们打包成对象的集合,再 ...

  7. Vue 解决先渲染 暂无数据

    // 组件 data(){ return { data:null // 设置默认值为null } } // template <div v-show="data != null&quo ...

  8. NTP同步时间

    什么是NTPNTP:Network Time Protocol(网络时间协议) ️ NTP 是用于同步网络中计算机时间的协议.它的用途是把计算机的时钟同步到世界协调时UTC. UTC:Universa ...

  9. @Valid 注解类型参数校验

    <dependency> <groupId>javax.validation</groupId> <artifactId>validation-api& ...

  10. 网络如何运作——详细DNS、HTTP、网站

    详细的DNS 什么是DNS? DNS(域名系统)为我们提供了一种简单的方式来与互联网上的设备进行通信,而无需记住复杂的数字.就像每个房子都有一个唯一的地址可以直接向它发送邮件一样,互联网上的每台计算机 ...