热门标签 | 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 不会相互影响

如有错误请指出, 谢谢 !

推荐阅读
  • 本文详细记录了腾讯ABS云平台的一次前端开发岗位面试经历,包括面试过程中遇到的JavaScript相关问题、Vue.js等框架的深入探讨以及算法挑战等内容。 ... [详细]
  • 1.绑定htmlcss1.1对象语法:  传给v-bind:class一个对象,以动态地切换class   ... [详细]
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • 小编给大家分享一下Vue3中如何提高开发效率,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获, ... [详细]
  • Bootstrap Paginator 分页插件详解与应用
    本文深入探讨了Bootstrap Paginator这款流行的JavaScript分页插件,提供了详细的使用指南和示例代码,旨在帮助开发者更好地理解和利用该工具进行高效的数据展示。 ... [详细]
  • 八段代码完全控制Promise
    1.Promise的马上实行性varpnewPromise(function(resolve,reject){console.log(createapromise);resolve ... [详细]
  • 本文详细介绍了如何在 Node.js 环境中利用 Nodemailer 库实现邮件发送功能,包括环境配置、代码实现及常见问题解决方法。 ... [详细]
  • 本文介绍了如何在 Node.js 中使用流(Stream)进行数据读取与写入,包括创建可读流与可写流的基本方法,并提供了具体的代码示例。 ... [详细]
  • 本文详细介绍了如何在循环双链表的指定位置插入新元素的方法,包括必要的步骤和代码示例。 ... [详细]
  • 文章目录前言Program(程序)Identifier(标识符)Literal(字面量)Vari ... [详细]
  • 高效的JavaScript异步资源加载解决方案
    本文探讨了如何通过异步加载技术处理网页中大型第三方插件的加载问题,避免将大文件打包进主JS文件中导致的加载时间过长,介绍了实现异步加载的具体方法及其优化。 ... [详细]
  • JavaScript 实现图片文件转Base64编码的方法
    本文详细介绍了如何使用JavaScript将用户通过文件输入控件选择的图片文件转换为Base64编码字符串,适用于Web前端开发中图片上传前的预处理。 ... [详细]
  • JavaScript 函数详解
    本文详细介绍了 JavaScript 中函数的基本概念和高级用法,包括函数的声明、参数传递、返回值、函数提升、函数表达式、IIFE 即时调用函数表达式以及函数作用域等内容。 ... [详细]
  • 本文探讨了 JavaScript 中 yield 关键字的使用及其在生成器函数中的行为,特别是当全局变量被修改时的情况。 ... [详细]
  • 探讨 JavaScript 中函数参数传递机制及默认值的影响 ... [详细]
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社区 版权所有