为什么在Vue组件中的data只能返回函数
来源:互联网 发布:dom编程艺术配套源码 编辑:程序博客网 时间:2024/05/16 04:43
引言:
通过Vue构造器传入的各种选项大多数都可以在组件里用,唯独只有data选项有区别,在Vue构造器中data返回的是对象,但是在组建中必须返回一个函数。why?
先来看下面一个例子:
HTML:<div id="example-2"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter></div>JS:var data = { counter: 0 }Vue.component('simple-counter', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', // 技术上 data 的确是一个函数了,因此 Vue 不会警告, // 但是我们返回给每个组件的实例的却引用了同一个data对象 data : data})new Vue({ el: '#example-2'})
这段代码本来的想法是,点击某个按钮然后那个按钮的值加一,但是因为所有按钮都使用同一个counter值,导致每次点击一个按钮,其他按钮的只也会加一,这是不允许的,每个组件模板不应该相互影响。那么如何解决这个问题呢?我们可以通过为每个组件返回全新的 data 对象来解决这个问题,例如:
data: function () { return { counter: 0 }}
那这个其中原理是什么?这个其实不关Vue的事情,这是js本身的一种特性造成的。当两个实例继承同一个对象的时候么当你修改其中一个属性的时候,另外一个实例也会跟着改。例如:
var MyComponent = function() {}MyComponent.prototype.data = { a: 1, b: 2,}var component1 = new MyComponent()var component2 = new MyComponent()component1.data.a === component2.data.a // truecomponent1.data.b = 5component2.data.b // 5
这是js继承机制决定的,不懂的童鞋可以看我另一篇关于js继承的文章
总结:
其实ES5继承是非常恶心的,所以ES6对于继承做了改进,引进了class, extends, super概念,想了解的童鞋去了解一下吧
阅读全文
0 0
- 为什么在Vue组件中的data只能返回函数
- Vue 组件 data为什么是函数?
- 为什么在vue的组件中,data要用function返回对象呢?
- Vue组件中data选项为什么必须是函数
- vue中data里为什么要写return返回
- 函数的返回值为什么只能有一个?
- 为什么super(...)和this(...)只能在构造函数中的第一句出现?
- 关于vue组件中定时器中只能使用箭头函数的问题
- Vue组件中的slot
- Vue实践--v-model在组件中的应用
- vue项目中的mock data
- vue 更新data中的数组
- STL中的stack的pop函数为什么不返回值?
- C++中的构造函数为什么没有返回值
- C++中的构造函数为什么没有返回值
- 深刻理解Vue中的组件
- vue中的父子组件调用
- 在C++中,为什么构造函数不能有返回值?
- nginx启动报错
- 毕业了
- BCD码、十六进制与十进制互转
- 突破程序猿基本课(笔记)
- 使用sklearn-theano来做object detection目标检测 (OverFeat)
- 为什么在Vue组件中的data只能返回函数
- 策略路由介绍
- 不使用中间变量交换两个数值变量的值
- eclipse觉得卡,怎么调优
- Kotlin基础教程-this关键字
- nginx 安装ssl证书及域名配置文件
- 题目二:const int *p,const * int p,int const *p的区别还有int const *const p
- IntelliJ Idea取消Could not autowire. No beans of 'xxxx' type found的错误提示
- 166. Fraction to Recurring Decimal