热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Vue组件data为什么要返回一个函数?

本文讨论了在Vue组件中,为什么data属性要返回一个函数的问题。通过示例代码,说明了对象变量和对象函数在数据更改前后的影响。

var a = {names: "张三",
};
function b() {return { names: "李四" };
}var c = a;
var d = a;
console.log("one", c, d);
c.names = "123";
console.log("one", c, d);var e = b();
var f = b();
console.log("two", e, f);
e.names = "456";
console.log("two", e, f);
结果:
one { names: '张三' } { names: '张三' } // 对象变量更改前
one { names: '123' } { names: '123' } // 对象变量更改后, 数据之间会相互影响
two { names: '李四' } { names: '李四' } // 对象函数更改前
two { names: '456' } { names: '李四' } // 对象函数更改后, 数据之间不相互影响// Vue data 为什么要返回一个函数 ?
// 解答:
// Vue 是组件其本质也是一个对象, 当组件被多次导入使用(引用) 时相当于对象的赋值操作, 对象赋值时都是赋值的引用而非新的对象,
// 当多个引用 操作组件内部的 data 时, 由于都是使用的同一个组件的引用, 所以内部的data也都是同一个, 不管哪个引用先加载, 后面的引用加载后一旦修改了data, 先前引用设置好的 data 数据, 就会被覆盖成新的数据
// 故儿需要使用 函数来返回 data , 由于函数也是对象的一种, 函数在运行时返回的 data 是一个新的对象, 所以多个引用之间的 data 不会相互影响

如有错误请指出, 谢谢 !

推荐阅读
author-avatar
lookadgo_544
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有