vue里data为什么要用return返回数据

原因:不使用return包裹的数据会在项目的全局可见,会造成变量污染;而使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。

vue里data为什么要用return返回数据

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

官方:
当一个组件被定义, data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data
仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data
函数,从而返回初始数据的一个全新副本数据对象。

为什么在项目中data需要使用return返回数据呢?

不使用return包裹的数据会在项目的全局可见,会造成变量污染;使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。

立即学习“前端免费学习笔记(深入)”;

当一个组件被定义, data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data
仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data函数,从而返回初始数据的一个全新副本数据对象。

类比与引用数据类型。如果不用function return 每个组件的data都是内存的同一个地址,那一个数据改变其他也改变了,这当然就不是我们想要的。用function return 其实就相当于申明了新的变量,相互独立,自然就不会有这样的问题;js在赋值object对象时,是直接一个相同的内存地址。所以为了每个组件的data独立,采用了这种方式。
如果不是组件的话,正常data的写法可以直接写一个对象,比如同一组件中的两个计算器都共用了data:{ num : 0},JS中直接共享对象会造成引用传递,也就是说按了加减按钮后所有num值都会跟着修改,所以这里用function来每次返回一个对象实例。

【相关推荐:vue.js教程】

以上就是vue里data为什么要用return返回数据的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2940568.html

(0)
上一篇 2025年3月11日 21:46:00
下一篇 2025年2月23日 18:36:13

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue怎么反转数组

    vue中可以利用“v-for”指令和计算属性来反转数组,语法“”和“computed:{reverseDIV(){return this.items.reverse()}}”。 本教程操作环境:windows7系统、vue2.9.6版,DE…

    2025年3月11日
    200
  • vue合并两个对象的方法是什么

    在vue中,可以利用“Object.assign()”方法来合并两个对象,该方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,它将返回目标对象,语法为“Object.assign(对象1, 对象2)”。 本教程操作环境:wind…

    2025年3月11日
    200
  • 一个vue页面由什么组成

    一个vue页面由三部分组成:1、template标签包裹的界面展示代码(HTML代码);2、script标签包裹的业务实现代码(js脚本代码);3、style标签包裹的界面布局代码(css样式代码)。 本教程操作环境:windows7系统、…

    2025年3月11日
    200
  • vue中骨架屏是什么

    在vue中,骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容;骨架屏可以理解为是当数据还未加载进来前,页面的一个空白版本,一个简单的关键渲染路径。 本教程操作环境:windo…

    2025年3月11日 编程技术
    200
  • vue路由有哪两种模式

    vue路由的两种模式:1、hash模式,其原理是onhashchange事件,可以在window对象上监听这个事件;2、history模式,可利用“history.pushState”的API来完成URL跳转。 本教程操作环境:window…

    2025年3月11日 编程技术
    200
  • vue构建需要哪些目录

    vue构建需要的目录:1、build(构建脚本目录);2、config(项目配置目录);3、node_modules(项目依赖模块目录);4、src;5、static(静态资源目录);6、components(组件目录)等等。 本教程操作环…

    2025年3月11日 编程技术
    200
  • vue的核心是什么

    vue有两大核心:1、数据驱动,也就是数据的双向绑定,让视图(DOM)的内容随着数据的改变而改变;2、组件化系统,可实现扩展HTML元素,封装可用的代码。 本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。 vu…

    2025年3月11日
    200
  • ajax()中data参数是什么意思

    在ajax中,data的意思为“数据”,该参数用于规定要发送到服务器的数据,会将数据自动转换为请求字符串格式;如果是GET请求,就会将要发送数据附加在URL后。 本教程操作环境:windows7系统、jquery1.10.2版本、Dell …

    2025年3月11日
    200
  • vue中的ajax一般放在哪个生命周期中

    vue中的ajax请求一般放在“created”周期中,好处:1、能更快获取到服务端数据,减少页面loading时间;2、有助于一致性,因为ssr不支持beforeMount、mounted钩子函数。 本教程操作环境:windows7系统、…

    2025年3月11日
    200
  • JavaScript中return的用法是什么

    JavaScript中return的用法:1、返回函数值,可以返回包括基本数据类型、对象、函数等任意类型的值;2、利用不带返回值的return语句来随时中止函数的执行。 本教程操作环境:windows7系统、javascript1.8.5版…

    2025年3月11日
    200

发表回复

登录后才能评论