【面试常考】vue中的data函数

最新推荐文章于 2023-10-10 10:39:10 发布
最新推荐文章于 2023-10-10 10:39:10 发布
阅读量688 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40104695/article/details/111721908
版权

问题：vue中的data为何一定要是函数？

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

前置知识：
JS浅拷贝、组件复用的实质

叶子加油加油
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
常考的vue面试题免费分享
03-19
5、Vue的生命周期 beforeCreate（创建前） 在数据观测和初始化事件还未开始 created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来 beforeMount（载入前） 在挂载开始之前被调用...
vue面试题-vue常见面试题和答案
03-13
返回在.then函数中如果成功，失败则是在.catch函数中。 12. v-model的使用。 答：v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：v-bind绑定一个value属性；v-on指令给当前元素...
【Vue 组件data函数】
武帝为此的博客
10-10 916
data。
vue组件中的data函数
桃子的博客
10-04 4395
复习 记录 vue 中的data函数 组件是一个单独功能模块的封装，这个模块有属于自己的HTML模板，也应该有属于自己的数据data vue组件中的数据是不能保存在 vue实例中的data中的。 明确 vue组件中的data 是一个函数 data必须是函数的原因是 组件是会被复用的 。data是函数类型，就会避免发生连锁反应。因为每调用一次函数，都会在函数的栈空间创建一个对象并返回，即使每次调用的是同一个函数，但返回对象的内存地址是不同的 组件是可复用的vue实例，一个组件被创建好之后，就可能被
vue中data必须是函数
shaleilei的博客
10-08 8931
看了好多博客论坛啥的，我比较笨不是很理解，包括我之前转载的一篇，不过我转载的我是看懂了，今天没事重新过了下官网，下面我们一起看看官网是如何给出解答的，这里面第一个他也用了return，但是和我们说的return不同，这个完全是为了躲避语法报错，我们也可以自己创建vue实例注册组件，然后多个地方同时注册，解释的还是很好的，我这里抛砖引玉下~~~ 通过 Vue 构造器传入的各种选项大多数都可
vue中的data为何是函数
nick_zhang的博客
06-09 170
javascipt只有函数构成作用域，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响，这样么一个实例的data属性都是独立的,不会相互影响了. 所以，你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的，跟vue本身设计无关。其实vue不应该把这个方法名取为data()，应该叫setData或其他更容易理解的方法名。 ...
VUE 组建中的data必须为函数
qq_37372407的博客
03-26 275
<div id="app"> <my-div></my-div> </div> <template id="my-div"> <div> <p>{{messgage}}</p> </div&a
vue面试题30道经典
02-22
Vue 面试题 30 道经典 本文总结了 Vue.js 相关的知识点，涵盖了 Vue 的特点、双向数据绑定的原理、MVVM 和 MVC 的区别、Vue 的核心、与 Angular 的区别、底层原理、单页面应用的优缺点、与 React 的对比、组件化的...
2023前端面试题vue专版
最新发布
12-26
5.为什么Vue实例对象中的data直接是个对象，而组件内的data是个 函数，且返回一个对象？ 5.组件间如何通讯？ 7.this.$emit 的返回值是什么？如果需要返回值该怎么办？ 8.filter中的this是什么？ 9. v-if 和 v-show ...
2021Vue面试题笔记.pdf
12-14
* Vue 实例创建时，Vue 会遍历 data 中的属性，使用 Object.defineProperty（Vue 3.0 使用 proxy）将它们转换为 getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 * 每个组件实例都有相应的 ...
Vue中定义全局变量与常量的各种方式详解
12-01
前言 本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍： 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入. 尝试1: 创建 global.js 并且在其中定义 let a = 10; 在入口文件中引入 global.js import './global.js' 在项目中使用: a // 报错 发现报错了, a 并没有定义. 为什么? 这个涉及到模块作用域: 1 每一个 js 都相当于一个模块, 一个模块有自己的模块作用域. 意思就是说: 其中的变量方法, 都只在这个
vue中data为什么是函数
weixin_51040174的博客
05-21 1120
1、data是函数不会污染 <script> function Data(){ return{ name:'lxx', age:18 } } //在App.vue 导入import Child from "./components/Child"时 Child也是一个对象 //组件对象Child1有data属性 ，data:Data
vue中的data为什么是一个函数？起到什么作用？
热门推荐
在写作的路上持续输出。
05-04 1万+
vue中的data为什么是一个函数？起到什么作用？
vue 组件中的 data 为什么必须是函数
君非道的博客
12-26 7593
在说之前我先讲讲深拷贝和浅拷贝 在 javascript 里面简单数据类型的拷贝一般使用浅拷贝，复杂类型一般使用深拷贝，请看例子 var a = 0; var b = a; b = 1 console.log('a···' + a,'b···' + b) //a···0 b···1 可以看到我把 a 赋值给了 b ，修改了 b 的值后 a 的值没有变 var a = { ...
Vue 组件中 data 为什么必须是函数？
kobezzZ的博客
08-05 304
//为什么data函数里面要return一个对象 <script> export default { data() { return { // 返回一个唯一的对象，不要和其他组件共用一个对象进行返回 menu: MENU.data, poi: POILIST.data ...
data函数+vue通信方法 （vue 13）
maggie
03-09 821
组件中的data为什么是一个函数? 当我们的data是一个函数的时候，每一个实例的data属性都是独立的，不会相互影响了。 当假设data为对象的时候， // 创建一个组件 var Component= function() { } Component.prototype.data = { #不存在return a: 1, b: 2 } // 使用组件 var component1...
由 Vue 中三个常见问题引发的深度思考
前端大全
06-03 706
（给前端大全加星标，提升前端技能）作者：前端序 公号 / SimonWoo （本文来自作者投稿）前言工作中我们通过搜索引擎或者官方文档很容易就会知道一个语法怎么使用，但...
Vue面试系列之二：vue组件中data为什么是个函数？
jmsLU的博客
08-06 237
1. 问题分析 对于这个问题，大多数人可能都有所注意，但是却没有过多的在意，那么接下来我就来简单分析一下，希望各位读者能够有所收获。 首先，我们来分析一下这个data： 在我们初次接触vue的时候，我们大多都是在页面中引入vue.js，然后在页面中直接创建一个Vue根实例，代码如下： <html> <body> <div id='demon'> <h1>{{msg}}</h1> </div> &
剖析vue常见问题（二）之组件的data为什么要定义为函数，而根实例的data则没有限制？
wh_xmy的博客
11-10 678
背景：vue组件话是它的特点，经常定义组件的我们会知道把组件的data定义为函数，也知道是为了避免数据污染，而跟实例则没有强制要求(因为根实例是单例，不用担心数据污染)，具体原因是什么呢？我们也从源码来做分析吧，详见源码：src/core/instance/state.js中的initData()方法，当然我们也用demo来说明，demo如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="
vue的生命周期函数的面试题
08-24
可以在此函数中执行一些操作，例如获取更新后的DOM节点等。 4. 请问destroyed生命周期函数在什么时候被调用？ destroyed生命周期函数在vue实例销毁之前被调用，用于清理工作和解绑事件监听器等。当vue实例销毁后，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值