Vue 组件 data为什么是函数?
来源:互联网 发布:qq业务乐园源码 编辑:程序博客网 时间:2024/05/17 08:14
在创建或注册模板的时候,传入一个data属性作为用来绑定的数据。但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它。
Vue.component('my-component', { template: '<div>OK</div>', data() { return {} // 返回一个唯一的对象,不要和其他组件共用一个对象进行返回 },})
你在前面看到,在new Vue()的时候,是可以给data直接赋值为一个对象的。这是怎么回事,为什么到了组件这里就不行了。
你要理解,上面这个操作是一个简易操作,实际上,它首先需要创建一个组件构造器,然后注册组件。注册组件的本质其实就是建立一个组件构造器的引用。使用组件才是真正创建一个组件实例。所以,注册组件其实并不产生新的组件类,但会产生一个可以用来实例化的新方式。
理解这点之后,再理解js的原型链:
var MyComponent = function() {}MyComponent.prototype.data = { a: 1, b: 2,}// 上面是一个虚拟的组件构造器,真实的组件构造器方法很多var component1 = new MyComponent()var component2 = new MyComponent()// 上面实例化出来两个组件实例,也就是通过<my-component>调用,创建的两个实例component1.data.a === component2.data.a // truecomponent1.data.b = 5component2.data.b // 5
可以看到上面代码中最后三句,这就比较坑爹了,如果两个实例同时引用一个对象,那么当你修改其中一个属性的时候,另外一个实例也会跟着改。这怎么可以,两个实例应该有自己各自的域才对。所以,需要通过下面方法来进行处理:
var MyComponent = function() { this.data = this.data()}MyComponent.prototype.data = function() { return { a: 1, b: 2, }}
这样每一个实例的data属性都是独立的,不会相互影响了。所以,你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的,跟vue本身设计无关。其实vue不应该把这个方法名取为data(),应该叫setData或其他更容易立即的方法名。
阅读全文
0 0
- Vue 组件 data为什么是函数?
- Vue组件中data选项为什么必须是函数
- 为什么在Vue组件中的data只能返回函数
- data为什么是一个函数
- vue中data必须是函数
- vue的data为何是个函数
- 为什么在vue的组件中,data要用function返回对象呢?
- vue 组件 之 注册 及 组件内data的使用
- Vue的父组件到底是啥?
- json解析为什么是eval("("+data+")")
- vue中data里为什么要写return返回
- Vue之过渡组件的钩子函数
- Vue函数式组件个人理解
- vue 组件
- Vue组件
- vue 组件
- vue组件
- Vue组件
- 奖学金
- Git 常见问题和解决方案
- 初学http整理笔记
- Hive学习笔记 3 Hive的数据模型:内部表、分区表、外部表、桶表、视图
- Android之路——第二步:Activity之间传值(Intent、onActivityResult)
- Vue 组件 data为什么是函数?
- 了解CoordinatorLayout,在项目中运用
- 二分和三分总结与误区分析
- LAMP/LNMP安装与配置
- c语言初步学习记录
- Java 多线程 (PART X)synchronized (III)synchronized的几种格式
- Turtle
- 动态规划-309. Best Time to Buy and Sell Stock with Cooldown
- TaotaoResult