Vue组件中为什么要用data函数

最新推荐文章于 2024-06-03 14:34:42 发布
最新推荐文章于 2024-06-03 14:34:42 发布
阅读量1k 收藏 1
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66664693/article/details/124851876
版权

Vue组件中必须要有data函数，而且并且必须有return

从栈内存和堆内存的角度来看，创建的组件标签保存在栈内存中，声明的组件和data对象保存在堆内存中，当在页面上重复使用相同的组件标签时，如果data使用对象形式，那么所有组件标签指向的都是同一data对象，如果在页面上一处更改了数据，那么其他地方引用的组件标签对应的数据也会改变，如果data使用函数形式的话，每次在页面引用组件标签，都会return出一个全新的对象，组件标签与data数据一一对应，数据之间互不影响。Vue里面用data对象，是因为Vue实例不会重复使用，为了更好地理解，可以参考下图：

 

玖儿*
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue解疑之data属性为什么是函数
Hayden
03-03 653
Vue解疑之data属性为什么是函数 在Vue项目中，我们通常使用单文件组件和全局的component方法来定义组件，像下面这样： Vue.component('test', { data () { return 'test' } }) 但是，不管是使用单文件组件或是component的函数，我们发现组件options中的data是一个函数，并且返回了一个对象，为...
vue中为什么组件里面的data数据必须是一个函数？
计算机小白佳的博客
07-31 261
在讲解之前先来做一个铺垫，补充一下知识 先看下面代码，是一个函数里面定义对象。 function abc() { return { name: 'why', age: 18 } } let obj1 = abc() let obj2 = abc() let obj3 = abc() obj1.name = 'kobe' console.log(obj1); console.log(obj
Vue组件中data为什么必须是函数
一个技术垃圾站
08-05 117
因为一个组件是可以共享的，但是他们的data是私有的，所以每一个都要return一个新的data对象，返回一个唯一的对象，不能和其他组件共用一个对象 <script> export default { data() { return { // 返回一个唯一的对象，不要和其他组件共用一个对象进行返回 ...
vue From表单 新增 or 编辑
m0_58893670的博客
10-19 1952
在做增删改查的需求时，新增和编辑大多数用的同一个form表单，这时候需要我们判断用户当前点击的是新增还是编辑，编辑的话需要回显当前该条数据。给 modal 绑定 title，在 data 里面定义 dialogTitle 为 ' '，然后点击新增或者编辑弹窗之前给他赋值。编辑的接口中，会有个 id字段，只需要判断表单里是否会有id，如果有就是编辑，没有就是新增。点击table文件中的修改按钮，给title赋值。点击新增按钮，给title赋值。二、判断当前是新增还是编辑？在index文件中，监听回显。
【vuejs】组件中 data 函数的作用和分析
最新发布
工作的日常记录和平凡的生活分享
06-03 1004
使用函数定义data，Vue还提供了额外的优势。例如，可以在data函数内部访问this关键字，这意味着可以基于组件的属性或其它状态来初始化data对象。此外，函数返回的对象可以包含方法，这些方法可以用于操作数据，使得状态管理更加集中和一致。这种方法提高了组件设计的灵活性和可维护性。组件中data定义为函数是Vue框架设计的核心决策之一，它确保了组件的复用性和数据隔离。通过这种方式，每个组件实例都能拥有一个独立的状态，避免了不同实例间数据的相互影响。
vue中data为什么是函数
weixin_51040174的博客
05-21 1142
1、data是函数不会污染 <script> function Data(){ return{ name:'lxx', age:18 } } //在App.vue 导入import Child from "./components/Child"时 Child也是一个对象 //组件对象Child1有data属性 ，data:Data
Vue2——VUE模板语法、数据绑定、el与data的写法
mantou_riji的博客
04-23 818
文章目录模板语法插值语法指令语法模板语法的总结对于需要重名的变量，可以设置层级来访问数据绑定单向数据绑定——v-bind双向数据绑定——v-model 模板语法 即html模板块的语法。 插值语法 使用 {{js表达式}}作为vue语法。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板语法</title> <sc
vue将方法挂载到原型上
weixin_52941842的博客
05-07 4419
有时我们在做项目的时候某个方法或某些方法需要重复时候，这个时候我们可以将他挂载到原型上，然后直接this.方法，使用 首先在main.js写入以下代码 //feedback 是我封装的一个对象，里面主要是uniapp消息反馈的api二次封装，由于多个页面需要使用这里我将它封装成一个对象然后挂到原型上以便于使用 const feedback = require('./public/public.js')//引入封装好的反馈方法 Vue.prototype.$feedback = feedback//
详解Vue的组件中data选项为什么必须是函数
10-14
总之，Vue组件中的`data`选项必须是一个函数，是为了避免组件实例间的数据共享，确保每个实例都有独立的状态，从而保持组件的封装性和数据安全性。理解这一设计背后的原理对于编写可维护、可扩展的Vue应用至关重要。...
Vue组件为什么data必须是一个函数
10-15
在Vue组件中，如果我们不使用函数来定义`data`，而是直接使用一个对象，如： ```javascript Vue.component('my-component', { data: { name: 'jack', age: 22 } }); ``` 然后创建两个`my-component`的实例，这...
解析vue data不可以使用箭头函数问题
08-27
Vue 中 data 不可使用箭头函数问题解析 在 Vue 中，data 属性不能使用箭头函数，这是因为箭头函数的 this 指向问题。在 JavaScript 中，非严格模式下，函数都会有一个 this 指向，但是箭头函数的 this 指向的是定义...
2-2.vue的实例属性：data
weixin_45660035的博客
12-19 3045
2-2.vue的实例属性：data data属性的作用 data属性的作用是存储vue实例或组件里面的数值。在vue的实例中它是以一个对象的方式（多个键值对），在组件中它是一个函数，通过函数返回一个对象。 data在vue的实例里面使用 1.代码展示 <body> <div id='app'> <P>{{message}}</P> </div> <script> const app = new Vue({
深刻理解vue 组件中的 data 为什么必须是函数
huohuoit的博客
06-06 552
关于这个问题，需要意识到：这是因为js的特性，跟vue本身设计无关。js本身的面向对象编程是基于原型链和构造函数，我们会注意到，原型链上添加一般都是一个函数方法而不会去添加一个对象。vue实例中的data是一个对象，作为绑定的数据。而这里组件中的data()必须是一个函数，其实应该叫做setData()。 现在我们开始一步步理解： 一、关于js的数据类型 js中的数据可以分为基础数据类型和引用数据类型 1、基础数据类型 如undefinded，null，Number，String，Boolean，
vue为什么要用data(函数)包裹属性？
接着奏乐接着舞的博客
03-20 1241
1.确保数据的独立性2.启动响应式系统3.组件的可维护性4.更好的支持TypeScript
vue中为什么把数据放在data当中
CSDNchaxundaima的博客
10-30 1802
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 vue中为什么把数据放在data当中data的作用 vue的核心是数据驱动与组件化，数据驱动的背后是数据劫持与观察者模式 数据劫持通过object.defineProperty方法将原生js代码注入到vue当中作为data的选项，然后遍历产生setter与getter，其目的是为了更好的感知数据的变化 data可以理解为发布源，这样其data当中的数据发生改变时，其他用到data数据的地方也会跟着改变，（发布订阅者模式，也就是观察者模式，一
vue入门到精通详解介绍（第一部分）data详细介绍
WYT11的博客
08-16 5906
第一章 引入vue脚本在html页面上 基本操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
vue组件中的data函数
桃子的博客
10-04 4416
复习 记录 vue 中的data函数 组件是一个单独功能模块的封装，这个模块有属于自己的HTML模板，也应该有属于自己的数据data vue组件中的数据是不能保存在 vue实例中的data中的。 明确 vue组件中的data 是一个函数 data必须是函数的原因是 组件是会被复用的 。data是函数类型，就会避免发生连锁反应。因为每调用一次函数，都会在函数的栈空间创建一个对象并返回，即使每次调用的是同一个函数，但返回对象的内存地址是不同的 组件是可复用的vue实例，一个组件被创建好之后，就可能被
VUE——data配置项详细解析
热门推荐
施益明的博客
11-01 1万+
VUE——data配置项详细解析
vue中data必须是函数
shaleilei的博客
10-08 8936
看了好多博客论坛啥的，我比较笨不是很理解，包括我之前转载的一篇，不过我转载的我是看懂了，今天没事重新过了下官网，下面我们一起看看官网是如何给出解答的，这里面第一个他也用了return，但是和我们说的return不同，这个完全是为了躲避语法报错，我们也可以自己创建vue实例注册组件，然后多个地方同时注册，解释的还是很好的，我这里抛砖引玉下~~~ 通过 Vue 构造器传入的各种选项大多数都可
vue组件中为什么data必须是函数
04-21
这是因为在 Vue 中，当定义组件时，如果直接将 data 属性值设为一个对象字面量，那么所有该组件的实例将共享同一个 data 对象。从而导致其中一个组件实例中所进行的对 data 的修改会影响到其他组件实例中的 data。 为了避免这个问题，Vue 官方推荐将 data 属性值设为一个函数，这样每个实例将会拥有自己独立的 data 对象。函数返回一个对象字面量，这个对象就是这个实例的 data。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值