首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

vue data为什么是函数?而不是对象

2019年01月07日 发布 阅读(778) 作者:懒炖

关于组件

首先了解一下,什么是vue组件?
官方解释:
组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 <button-counter>,如下:

  1. // 定义一个名为 button-counter 的新组件
  2. Vue.component('button-counter', {
  3. data: function () {
  4. return {
  5. count: 0
  6. }
  7. },
  8. template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
  9. })

data为什么是函数不是对象?

从上面可以了解到,vue组件就是一个vue实例

JS中的实例是通过构造函数来创建的,每个构造函数可以new出很多个实例,那么每个实例都会继承原型上的方法或属性。

vuedata数据其实是vue原型上的属性,数据存在于内存当中

vue为了保证每个实例上的data数据的独立性,规定了必须使用函数,而不是对象。

因为使用对象的话,每个实例(组件)上使用的data数据是相互影响的,这当然就不是我们想要的了。对象是对于内存地址的引用,直接定义个对象的话组件之间都会使用这个对象,这样会造成组件之间数据相互影响。

示例:

  1. // 创建一个简单的构建函数
  2. var MyComponent = function() {
  3. // ... code here
  4. }
  5. // 原型链对象上设置data数据,为里为Object
  6. MyComponent.prototype.data = {
  7. name: 'abc',
  8. age: 20,
  9. }
  10. // 创建两个实例:小明,小红
  11. var xiaoming = new MyComponent()
  12. var xiaohong = new MyComponent()
  13. // 默认状态下小明和小红的年龄一样
  14. console.log(xiaoming.data.age === xiaohong.data.age) // true
  15. // 改变一下小明的年龄
  16. xiaoming.data.age = 30;
  17. // 打印下小红的年龄,发现因为改变了小明的年龄,结果造成小红的年龄也变了
  18. console.log(xiaoming.data.age)// 30
  19. console.log(xiaohong.data.age) // 30

上面原因是因为小明和小红的属性data引用的是同一个内存地址

为什么使用函数不会有这种问题
使用函数后,使用的是data()函数,data()函数中的this指向的是当前实例本身

  1. // 创建一个简单的构建函数
  2. var MyComponent = function() {
  3. // ... code here
  4. this.data = this.data();
  5. }
  6. // 原型链对象上设置data数据,为里为Object
  7. MyComponent.prototype.data = function(){
  8. return {
  9. name: 'abc',
  10. age: 20,
  11. }
  12. };
  13. // 创建两个实例:小明,小红
  14. var xiaoming = new MyComponent()
  15. var xiaohong = new MyComponent()
  16. // 默认状态下小明和小红的年龄一样
  17. console.log(xiaoming.data.age === xiaohong.data.age) // true
  18. // 改变一下小明的年龄
  19. xiaoming.data.age = 30;
  20. // 打印下小红的年龄,发现因为必变了小明的年龄,结果造成小红的年龄也变了
  21. console.log(xiaoming.data.age)//30
  22. console.log(xiaohong.data.age) // 20

参考

官网:https://cn.vuejs.org/v2/guide/components.html
原型及原型链:https://www.jianshu.com/p/dee9f8b14771

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •