vue中的data为什么是一个函数(前端)

已于 2022-07-20 11:09:28 修改
阅读量615 收藏 6
点赞数 5
分类专栏： vue开发问题 文章标签： vue.js
于 2020-07-23 17:04:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45811884/article/details/107541759
版权

首先看一下data
在这里插入图片描述

  • 主要也是受到javascript的特性影响，跟vue本身设计无关。
  • 大家都知道.vue的组件是可以复用的，这也就意味着如果我们的data是一个普通对象的话，所有复用了这个实例的组件都会引用同一份数据，就造成了数据污染。
  • 但是，data是一个函数的话，数据以函数返回值的形式定义，每次组件的data都是独立的，相当于有了自己的独立空间，就不会相互影响了

不给白嫖，随手留赞🤞

不法
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js文件，在前端项目中引入vue框架
05-08
2. **初始化项目**: 使用Vue CLI（命令行工具）创建一个新项目。例如： ``` vue create my-vue-project ``` 这将生成一个包含基本配置的Vue项目结构。 3. **使用Vue**: 在项目的`src`目录下，主要的入口文件是`...
Vue2.x中的Render函数详解
10-19
在这个例子中，`h`函数创建了一个`h2`元素，并且包含一个`a`元素作为子节点。`a`元素的数据对象中设置了`href`属性。 `VNode`（虚拟节点）是Vue渲染过程中的重要概念，它包含了多个属性，如`tag`（标签名）、`data`...
Vue 组件中的 data 为什么是函数？
q4717529的博客
03-18 5631
一、总结 1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。 2.vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。......
vue中data为什么是函数
weixin_51040174的博客
05-21 1140
1、data是函数不会污染 <script> function Data(){ return{ name:'lxx', age:18 } } //在App.vue 导入import Child from "./components/Child"时 Child也是一个对象 //组件对象Child1有data属性 ，data:Data
vue中，为什么data属性是一个函数，而不是一个对象？
最新发布
pig_ning的博客
04-18 557
vue中，为什么data属性是一个函数，而不是一个对象？
【前端面试题之VUE】为什么data为什么是一个函数而不是一个对象？
阿卡内的博客
07-20 3511
为什么data为什么是一个函数而不是一个对象？
vue中的data为什么是一个函数
m0_54566205的博客
04-04 740
在组件实例化时，Vue 会调用该函数并返回一个对象，这个对象就成为该组件实例的数据对象。这个函数的返回值会被缓存起来，以后再创建该组件实例时就直接使用缓存的对象，而不会再调用该函数。这是因为 Vue 在创建组件实例时，会为每个组件实例都创建一个独立的数据作用域，如果将。直接定义为一个对象，那么所有组件实例都将共享同一个数据对象，这样就无法实现数据的隔离。定义为一个函数是为了保证每个组件实例都拥有自己独立的数据对象，以实现数据的隔离。选项返回的是一个函数，这个函数返回一个对象，包含一个属性。
为什么Vue中data一定要是一个函数?
hmxs_hmbb的博客
05-25 5485
为什么data要是一个函数?
Vue自定义指令封装节流函数的方法示例
08-27
在上面的代码中，我们定义了一个名为 v-debounce 的自定义指令。这个指令将负责延迟搜索事件的执行。在 inserted 回调函数中，我们使用了 addEventListener 方法来监听 keyup 事件，并使用 setTimeout 函数来延迟...
vue 解决data中定义图片相对路径页面不显示的问题
10-14
在示例代码中，Vue组件的data()函数定义了两个图片路径，它们都是相对路径： ```javascript data() { return { active: 1, icon: { active: "../assets/images/home-selected.png", inactive: "../assets/...
Vue 中 template 有且只能一个 root的原因解析(源码分析)
10-15
1. **为什么限制只有一个root**： - **结构一致性**：保证模板生成的VNode树具有清晰的层次结构，避免混乱。一个单一的root元素确保了每个组件都有一个明确的包裹元素，使得DOM结构更加有序。 - **性能优化**：多...
vue核心面试题：组件中的data为什么是一个函数
王三六博客
08-17 2万+
一、总结 1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。 2.vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。 3.当我们将组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，拥有自己的作用域，类似于给每个组件实例创建一个私有的数据空间，
Vue--为什么data是个函数--实例讲解
IT利刃出鞘的博客
01-06 1516
原文网址： 简介 说明 本文用示例介绍Vue中的data设计为函数的原因。 结论 对象是一个引用数据类型，如果data是一个对象会造成所有组件共用一个data。若data是一个函数，每次函数都会返回一个新的对象，这样每个组件都会维护一份独立的对象（data）。 根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况。 官网 组件基础 — Vue.js 问题引出 大家都知道，Vue的组件一般是下边这样写...
vue中data为什么是一个函数
q4717529的博客
05-30 274
vue中data为什么是一个函数 如果data是一个函数的话，这样每复用一次组件，就会返回一个新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据，而单纯的写成对象形式，就使得所有的组件实例共用了一份data，就会造成一个变了全都会变得结果。 所以说vue组件中的data必须是函数，这都是因为js的特性带来的。 js本身的面对对象变成也是基于原型链和构造函数应该会注意原型链上添加一般都是一个函数方法而不会去添加一个对象了。 ...
vue中data为什么必须是个函数？
qq_56105902的博客
05-30 5233
vue中data必须是函数是为了保证组件的独立性和可复用性，data是一个函数，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，你实例化几次，就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。 ...
为什么vue中data必须是一个函数
热门推荐
xyphf的博客
03-28 3万+
本文从JavaScript原型链角度来解释为什么vue中的data必须是一个函数 VUE组件中的data必须是函数 类别引用数据类型 Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了； JavaScript只有函数构成作用域(注意理解作用域，只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),dat...
前端面试每日一题——在Vue中，为什么 data 是一个函数？
L3gacy
06-10 232
在Vue中，为什么 data 是一个函数？ 先来了解一下对象Object和函数Function的区别： 在JS中，对象是引用数据类型，没有作用域，如果两个实例引用同一个对象，当修改其中一个属性值时，另一个实例也会跟着改变 函数可以构成一个独立的作用域，可以有属于自己的this指向 export default { data(){ return {} } } 总结 在vue中，组件是会被复用的，而data如果是对象的话，那么变量的作用域都会是同一个，子组件data中的属性值就会互相影响，所以为了
为何组件的data必须是一个函数
weixin_53944118的博客
04-07 1372
一、实例和组件定义data的区别 vue实例中的data属性既可以是一个对象，也可以是一个函数 const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } } 组件中定义data属性， 只能是一个函数 如果为组件data直接定义为一个对象 Vu
vue组件中的data为什么是一个函数
weixin_45695200的博客
09-10 113
组件是可以被复用的，注册了一个组件本质上就是创建了一个组件构造器的引用。 // 创建一个组件 var Component= function() {} Component.prototype.data = { a: 1, b: 2 } // 使用组件 var component1 = new Component() var component2 = new Component() component1.data.b = 3 component2.data.b // 3 当使用组件的时候，实例化
data 为啥是个函数
07-08
您提到的 "data" 是一个函数的情况可能是指在某些前端框架（如Vue.js）中，组件的数据属性（data）可以定义为一个函数。这是为了避免数据在组件之间共享引用导致的副作用。 当将 data 属性定义为函数时，每个组件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值