Vue2 的组件中 data 为什么不能使用对象写法

最新推荐文章于 2024-10-29 14:10:06 发布
最新推荐文章于 2024-10-29 14:10:06 发布
阅读量159 收藏
点赞数 2
分类专栏： 面试 vue2 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59680972/article/details/129365766
版权

Vue2 的组件中 data 为什么不能使用对象

     为了避免数据污染

     如果组件里直接将data定义为一个对象的话，那么在模板中多次复用该组件，组件中的data会指向同一个引用。改变一个组件中的data，会导致其他组件data中的数据被污染。而如果使用函数的话，每个组件中的data就会有单独的引用，就不会存在变量污染的问题了

入门中……
关注
专栏目录
JavaScript - 实现向 formData 对象中追加数组或对象，使用 append() 插入数组、对象等复杂数据类型（vue / uniapp / react 项目通用解决方案）
王佳斌
02-14 5541
JS，vue如何在 FormData 中追加数组？uniapp vue js formData传递数组，数组添加进formdata,javascript - 将FormData对象放入数组，FormData传数组对象的方法 前端，vue JS,如何在FormData中追加数组，JS,如何在 FormData 中追加数组，JS,如何在 FormData 中追加数组，formData 传对象和数组、空文件的方法，我可以在javascript中将数组附加到'formdata'吗?，javascript如何向For
前端开发：关于Vue组件中的data属性值是函数而不是对象的详解
软贱开发攻城狮
10-29 2160
最近在搞关于前端开发的基础知识归纳，发现了不少经典知识点，那么本篇博文就来分享一个经典的知识点：Vue组件中的data属性值为什么是函数而不是对象。 首先来了解一下Vue组件的使用理念：在Vue组件使用中，组件复用是需要秉承的理念，组件创建好之初就要考虑到后期可复用性，考虑到可复用性，那么就涉及到组件中data数据是要相互独立、互不影响的，不管组件复用多少次，data数据都要被复制一遍，这样当某一处复用的组件数据发生变化的时候，其他地方的复用组件的data数据不受影响。而且由于JS的特性所致的原因，在co
Vue中组件data为什么是函数，不能直接对象
m0_61768030的博客
01-10 370
组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。即原理是如果data是一个对象的话，两个组件中设置的data都会引用同一个内存地址，而用函数的话，则会在每次引用的时候返回一个新的地址。根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况。
js中字符串转为DOM对象和DOM对象转为字符串
热门推荐
weixin_38098192的博客
05-08 1万+
1.在js中我们要动态的创建标准DOM对象一般使用：var obj= document.createElement('div');但是如果在ajax请求时返回的是一个带有标签的字符串，如：data：[["<span id="0">aaa</span>",'小明'，‘28’]]，这时获取到的data[0][0],是一个字符串，我们获取不到id。现在又一种方法可以解决：1.1 ...
为什么Vue实例中的data是对象，而Vue组件中的data必须是函数返回值？
单口相声Jay
07-05 618
这样，当组件重复使用的时候，每次调用data的函数时都会是不同的对象，既然是不同的对象，那么不同对象内的数据是相互不影响的，从而避免了数据“污染”。如果data直接是一个对象，那么组件复用时，它们使用的始终是同一个对象，所以对象内的数据是一样的。如果vue实例对象/vue组件复用时，data是一个对象，data属性的数据在不同的页面中会始终同步，那么造成的后果就是不同组件页面的数据会相互影响。一个事实是，不管是vue实例对象还是vue组件，在重复使用时，都会监听同一个data属性的数据。
vue组件中data为什么是函数？而不是对象
技术前端，忠于热爱 @回忆哆啦没有A梦
11-02 2761
vue组件中data为什么是函数？而不是对象
vue组件中的data为什么是 函数，而不是对象
Allen的博客
06-03 1731
new Vue() 和component组件中使用 在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。 data为什么是函数, 不是对象? 这并非是 Vue 自身如此设计，而是跟 JavaScript 特性相关，我们来回顾下 JavaScript 的原型链 从上面可以了解到，vue组件就是一个vue实例。JS中的实例是通过构造函数来创建的，每个构造函数可以new出很多个实例，那么每个实例都会继承原型上的
详解Vue 单文件组件的三种写法
10-15
通过使用`@Component`装饰器，我们可以将一个类定义为Vue组件，并且将类中的属性和方法映射为组件的数据和方法。这种写法使得类的继承、混入等面向对象的特性得以应用到Vue组件中，使得组件的逻辑更加清晰和有组织。...
Vue的组件data为什么必须是一个函数
youhebuke225的博客
05-28 260
在 Vue 中，组件的data必须是一个函数的原因是为了确保每个组件实例都有其自己独立的作用域和状态。让我们深入探讨一下这个设计的背后原因。
vue 需求 data中的数据之间的调用操作
10-14
但是在Vue组件的data函数返回的对象内部，你不能直接通过this来访问其他属性，因为这些属性是在该函数返回的对象内部被初始化的。 假设你有一个名为screeningCondition的对象，该对象有属性type。你希望在data中...
Vue异步组件使用详解
08-30
在实际的Vue单文件组件(SFC)中，我们可以这样使用异步组件： ```html import Vue from 'vue' const searchSearch = Vue.component('searchSearch', function (resolve) { require(['./service-search.vue'], ...
为什么Vue实例中的data是一个对象，但是组件实例中的data却必须是一个方法呢
EWJRQKJRQ的博客
10-17 1508
为什么Vue实例中的data是一个对象，但是组件实例中的data却必须是一个方法呢 先看一下vue实例 let vm = new Vue({ el:"#box", data:{ num:0 }, methods:{ }, computed:{ }, filters:{ }, watch:{ },
vue获取到数据，读取对象的属性无法读取报错
lllnana
02-24 2031
vue发送axios请求获取到数据，读取对象的属性，绑定在页面时，无法读取报错
为什么vue组件中的data是一个函数
weixin_55808645的博客
04-15 175
1. 实例与组件定义data的区别 vue实例中的data属性既可以是一个对象，也可以是一个函数，不会造成数据污染。 const app = new Vue({ el:"#div", // 对象格式 data:{ title:"title" }, // 函数格式 data(){ return { title:"title" } } 区别: 组件中定义data属性，只能是一
在Android开发中WebView的详细使用方法
LLZjiayou的博客
10-25 1217
WebView是一个非常强大的工具，用于在应用内加载网页内容。通过使用和其他配置，可以实现丰富的网页交互功能，同时确保应用的安全性和稳定性。如果有特定功能需求，可以在 Android 官方文档中查阅的详细说明。
vue3中toRef和toRefs的用法以及使用场景
涂涂
10-25 504
toRef。
【333基于Java Web的考编论坛网站的设计与实现
paopaokaka_luck的博客
10-25 1096
刚开始学习Java语言的时候，是不知道还有Tomcat这些东西的，各种语法各种输出在控制台进行输出结果，当Java网站开发的时候就不可避免的学习到了Tomcat服务器。Tomcat准确的来讲不算是服务器，可以说是vue引擎或者一个容器，这些都是学术上或者原理上都比较贴切的，但是实际工作中Tomcat就是作为一个web服务器来用的，因为可以实现网站的发布和运行。
vue如何让下拉框可以输入---查询下拉框内容
qq_42666729的博客
10-28 442
使用filterable。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
最新发布
everfoot的博客
10-29 601
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
Vue组件基础与理解：注册、使用及注意事项
"Vue组件的使用及个人理解与介绍" Vue.js 是一个流行的前端JavaScript框架，其核心特性之一就是组件化。组件是Vue应用的基本构建块，可以视为可重用的代码单元，它们能够独立地封装和管理自己的视图、状态和逻辑。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值