怎样理解 Vue 组件中 data 必须为函数 ?
组件意在 复用 , 若为 对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下
对象
// 模拟创建组件
var Component= function() {} // 模拟使用对象作data
Component.prototype.data = { a: 1 } // 模拟使用组件
var component1 = new Component()
var component2 = new Component() // 发现 data 共用, 相互影响
component1.data.a = 2
component2.data.a //
函数
// 模拟创建组件
var Component= function() {}; // 模拟使用函数作data
Component.prototype.data = function() { return { a: 1 } }; // 模拟使用组件
var component1 = new Component()
var component2 = new Component() // 两者互不影响
component1.data.a = 2
component2.data.a //
怎样理解 Vue 组件中 data 必须为函数 ?的更多相关文章
- vue组件中data是个函数
当我们const vm = new Vue({ el : '#app', data : { msg:‘hello World’ } })用习惯了,data是一个对象,可到了vue组件 Vue.co ...
- 黑马vue---61、为什么vue组件的data要是一个函数
黑马vue---61.为什么vue组件的data要是一个函数 一.总结 一句话总结: 因为js中以函数为变量作用域,所以这样可以保证每个组件的数据不互相影响 二.why components data ...
- Vue 组件中 data 为什么必须是函数
原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...
- 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数
1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...
- vue组件中data为什么必须是个函数
<body> <div id="app"> <counter></counter> </div> <templat ...
- vue组件中data为什么必须是一个函数?
因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象. 组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一 ...
- 039——VUE中组件之子组件中data使用实例与text-xtemplate的使用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 15.Vue组件中的data
1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...
- vue组件中的data为什么是函数?
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
随机推荐
- 【Redis 设置Redis使用LRU算法】
转自:http://ifeve.com/redis-lru/ 本文将介绍Redis在生产环境中使用的Redis的LRU策略,以及自己动手实现的LRU算法(php) 1.设置Redis使用LRU算法 L ...
- dapper通用分页方法
/// <summary> /// dapper通用分页方法 /// </summary> /// <typeparam name="T">泛型 ...
- JVM模型及内存溢出
一.JVM截图及概念 图1:JVM虚拟机运行时数据区域概念模型 1.程序计数器:内存空间中的一块小区域,作为当前线程所执行的字节码的行号指示器,注:如果是native方法,计数器为空 2.虚拟机栈:线 ...
- C#_实现Hello Word!
1:代码如下: using System;//using关键字可以引用MIcrosoft.NET框架类库中的现有资源. //System命名空间提供了对构建应用程序所需的所有系统功能的访问,包括本例中 ...
- maven在pom文件中引入了icepdf-core包,pom文件却莫名的报错,说jai_core包missing
maven在pom文件中引入了icepdf-core包,却莫名的报错,说jai_core包missing,把这个jai_core包引入之后还是一样报错,PS:icepdf-core使用的时候不用引用j ...
- golang——写文件和读文件
之前聊过,操作文件——读写文件,直接调用接口即可. 如果是一直写入操作,写入操作一直进行的,免不了会有,有时一大批数据过来,有时没有一条数据. 鉴于此场景,选择用select....channel 的 ...
- Python locust性能测试框架模板
locust框架模板 from locust import HttpLocust, TaskSet, task import Queue class UserBehavior(TaskSet): de ...
- druid 参数配置详解
druid 参数配置详解 */--> druid 参数配置详解 Table of Contents 1. 初始化连接 2. 参数配置及说明 3. 注意事项 3.1. 底层连接 3.2. 空闲检查 ...
- 怎么去检测浏览器支不支持html5和css3?
HTML5, CSS3 以及其他相关技术例如 Canvas.WebSocket 等等将 Web 应用开发带到了一个新的高度. 该技术通过组合 HTML.CSS 和 JavaScript 可以开发出桌面 ...
- Python3+RobotFramewok 循环判断以及Evaluate用法(三)
本章主要介绍RF的循环,判断以及关键字Evaluate. 1. for循环 在RF中通过 :FOR 编写循环 :FOR ${i} in range 10 log ${i} @{list} create ...