Vue中data返回对象和返回值的区别

最新推荐文章于 2022-07-04 14:48:41 发布
最新推荐文章于 2022-07-04 14:48:41 发布
阅读量511 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/smart-girl/p/10521950.html
版权

速记：粗浅的理解是，事件的结果是影响单个组件还是多个组件。因为大部分组件是要共享的，但他们的data是私有的，所以每个组件都要return一个新的data对象

返回对象的时候

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="components-demo3" class="demo">
        <button-counter2></button-counter2>
        <button-counter2></button-counter2>
        <button-counter2></button-counter2>
    </div>
    <script>
    Vue.component('button-counter2',{
        data:function(){
            return {
                count:0
            }
        },
        template:'<button v-on:click="count++">点击了{{count}}次</button>'
    })
    
    new Vue({
        el:'#components-demo3'
    })
    
    </script>
</body>
</html>

1037363-20190313112332335-1076964043.png
data直接返回值的时候

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="components-demo3" class="demo">
        <button-counter2></button-counter2>
        <button-counter2></button-counter2>
        <button-counter2></button-counter2>
    </div>
    <script>
    buttonCounter2Data={
        count:0
    }
    Vue.component('button-counter2',{
        data:function(){
            return buttonCounter2Data
        },
        template:'<button v-on:click="count++">点击了{{count}}次</button>'
    })
    
    new Vue({
        el:'#components-demo3'
    })
    
    </script>
</body>
</html>

1037363-20190313112443730-104032439.png

转载于:https://www.cnblogs.com/smart-girl/p/10521950.html

weixin_30821731
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue的子组件为什么就需要用data函数return一个对象
peifeng_chen的微博
02-17 643
JavaScript中的实例是通过构造函数来创建的，每个构造函数可以new出很多个实例，那么每个实例都会继承原型上的方法或属性。 我们在通过构造函数new vue()的时候传入对象中的data数据其实是vue实例对象上的属性，数据存在于内存当中，可以直接是对象，而对于创建子组件components则不能直接使用data定义对象，vue规定了必须使用函数，而不是对象。 因为使用对象的话，每个子组件上使用的data数据是相互影响的，这当然就不是我们想要的了。对象是...
vue中data返回一个函数
weixin_42458965的博客
04-23 2121
function person() { return { name:"a", } }; var obj1 = person(); var obj2 = person(); obj1.name = 'b'; console.log(obj1); console.log(obj2); a=...
Vue实例里面的data属性为什么用函数返回
Lawliet
01-19 5782
最近在学习Vue中在图灵社区买了一本电子书《Vue小书》，我感觉挺坑的，没有期待的那么好。 其中有的一下子就给一大串代码，但这一大串代码只是为了说明某一点，但是这片代码很多处都可以讲的，大概是因为篇幅限制原因吧。 其中我第一次看到的Vue实例中的data属性时，很好奇为什么是用function return 一个对象，而在之前某些视频中的写法又是直接写的对象，然后一查，又牵扯到JS原型链等一些
为什么在vue的组件中，data要用return返回对象？
Joe_yuqiao的博客
11-27 2639
官方： 当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。 类比与引用数据类型。如果不用function return 每个组件的data都是内存的同一个地址，那一个数据改变其他也改变了，这当然就不是我们想要的。用function return 其实就相当于申明了.
vue 自定义组件切换时刷新
weixin_45977625的博客
09-25 2217
我们在使用vue自定义组件时，常常会遇到切换组件的操作，但是切换组件的时候，如果没有处理好，组件内容就不会刷新。如：标签页下放自定义组件，切换标签时，组件里面的内容不刷新，导致页面停留在上一次的操作。那么我们应该如何来解决这个问题呢？接下来说说我在网上看到的两种方法 一、通过v-if来刷新 当我们在爷辈组件请求后台接口完成后要刷新子孙组件时，我们就可以在爷辈组件使用以下代码,实现子孙组件的刷新（感觉这种方法怪怪的，个人喜欢第二种方法） 上代码： //父组件内容 <child v-if="show"&g
解析vue data不可以使用箭头函数问题
12-11
在Vue.js框架中，`data` 选项是用来定义组件实例的数据对象。然而，存在一个重要的注意事项，即在Vue中，`data` 不应该使用箭头函数来定义，因为这会导致预期的行为失效。让我们深入理解这个问题的原因和背后的机制...
Vue中的this.$options.data()和this.$data用法说明
10-15
在Vue.js框架中，`this.$options` 和 `this.$data` 是两个非常重要的属性，它们分别用于获取组件的配置选项和当前实例的数据对象。在开发过程中，正确理解和使用这两个属性对于管理组件的状态至关重要。 首先，`...
vue watch监听对象及对应值的变化详解
08-27
Vue实例中的data对象用于存储需要在模板中显示的响应式数据。当这些数据发生变化时，Vue会自动重新渲染相关的DOM元素。watch属性允许开发者监视data中的数据变化，以便执行一些特定的逻辑，比如异步操作或更新其他...
vue中实现上传文件给后台实例详解
12-01
在Vue.js中实现上传文件给后台是一个常见的需求，通常涉及到前端与后端的数据交互，以及对用户界面的处理。在这个过程中，FormData对象扮演了至关重要的角色...希望这个详解能帮助你理解和实现在Vue中上传文件的功能。
初识Vue 3.0 —— data:获取到data的值
QUX轻博客
12-14 6123
<h5>13.data</h5> <p>组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一...
这几个小技巧，让你书写不一样的Vue！
XZSJ_Front的博客
10-24 471
前言 最近一直在阅读Vue的源码，发现了几个实战中用得上的小技巧，下面跟大家分享一下。 同时也可以阅读我之前写的Vue文章 vue开发中的"骚操作" 挖掘隐藏在源码中的Vue技巧！ 抽丝剥茧般的阅读源码，将$nextTick()拉下神坛！ 隐藏在源码中的技巧 在实例化Vue时，首先调用的是Vue.prototype._init方法，而在此方法中mergeOptions()方法返回的options将运用在所有的初始化函数中。也就是如下代码： vm.$options = mergeOptions( reso
vue实例中data使用return包裹
pobu168的博客
06-07 2万+
vue组件变量污染
为什么vue中的data要用return返回
weixin_41807530的博客
07-01 589
export default{ data(){ return { } } } 主要就是为了防止数据污染 return包裹后就是当前组件可用。不会影响其他组件。
vue判断后端返回的数据有没有存data属性
牛逼的博客
12-07 754
vue判断后端返回的数据有没有存data属性 sunyiIrr() { sunyiget1(this.gcid).then((res) => { if (res.code == 200) { if(‘data’ in res){ this.jzsyl.irr = res.data.irr; } } }); },
vue 数据（data）赋值问题
热门推荐
Bryant953的博客
03-01 9万+
总结一下我遇到的一个纠结很久的问题。在项目中需要用到后台的数据对前端渲染，使用到了vue整合的axios，使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data（）中定义的属性：执行后前端报错：原因：在请求执行成功后执行回调函数中的内容，回调函数处于其它函数的内部this不会与任何对象绑定，为undefined。解决方案：一）将指向vue对象的this赋...
vue中通过方法返回data中的对象是这个{__ob__: Observer}
荆轲刺秦王
12-09 8万+
__ob__: Observer这些数据是vue这个框架对数据设置的监控器，一般都是不可枚举的。 console.log这样的打印函数，被打印的变量会执行自身的toString()，这样，即便内部属性是不可枚举，实际上也能看到。 操作数据的过程中不要删除这些属性： 因为你已经将数据绑定在了vue之中，vue就肯定要为数据添加监控器的，如果你强制删掉了这些监控器，那么这些数据也就失去了监...
12.组件-why components data must be a function
weixin_30474613的博客
05-21 84
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
【vue】获取另外一个方法的返回值
cimbala的博客
07-04 3377
vue获取另外一个方法的返回值
vue 方法获取返回值_vue.js 在一个方法中访问另一个方法的返回值
weixin_39935571的博客
12-19 4381
vue.js 在一个方法中访问另一个方法的返回值doScan(){var face_token = "";var image_base64 = "";var api_key = "kPGvG79PCMXPthX8utdJ6GULYklk-xdW";var api_secret = "i6VEDBRy9YX8U4gcD0oTa-NXMpZr5aYZ";var requestData = {};req...
vue中什么时候返回值是json对象
最新发布
05-29
在Vue.js中，返回JSON对象通常在使用`axios`或`fetch`进行HTTP请求时发生。这是因为这些库会自动将服务器返回的数据解析为JSON格式。 例如，使用`axios`进行GET请求的代码如下所示： ``` axios.get('/api/data') .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); ``` 在这个例子中，`axios.get()`方法返回一个Promise对象，它的响应（response）对象的`data`属性包含了服务器返回的JSON格式数据。 使用`fetch`进行GET请求的代码如下所示： ``` fetch('/api/data') .then(response => { return response.json(); }) .then(data => { console.log(data); }) .catch(error => { console.log(error); }); ``` 在这个例子中，`fetch()`方法返回一个Promise对象，它的响应（response）对象需要调用`json()`方法来解析服务器返回的JSON格式数据，并返回一个新的Promise对象，以便进行异步处理。 因此，当使用`axios`或`fetch`进行HTTP请求时，返回值通常是JSON格式的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值