速记：粗浅的理解是，事件的结果是影响单个组件还是多个组件。因为大部分组件是要共享的，但他们的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>



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>

Vue中data返回对象和返回值的区别的更多相关文章

  1. 为什么在项目中data需要使用return返回数据呢？

    问:为什么在项目中data需要使用return返回数据呢? 答:不使用return包裹的数据会在项目的全局可见,会造成变量污染:使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件.

  2. vue中如何实时修改输入的值

    vue中如何实时修改输入的值 经常看到需要对用户输入的值进行实时修改,有时是需要修改为指定的展示内容,有时候是用来校验,禁止用户输入非法数据,总之是一个常见的需求吧,只是自己一直没有特意去关注.思来想 ...

  3. C++返回对象和返回引用

    我们发现,在C++中,有些成员函数返回的是对象,而有些函数返回的又是引用. 返回对象和返回引用的最主要的区别就是函数原型和函数头. Car run(const Car &)     //返回对 ...

  4. vue中的项目目录assets和staitc的区别

    vue中的项目目录assets和staitc的区别 在进行发行正式版时,即为npm run build编译后, assets下的文件如(js.css)都会在dist文件夹下面的项目目录分别合并到一个文 ...

  5. c++中返回对象与返回引用的区别

    这几天在做用C++做课程设计,对其返回对象的实现感到迷惑. 通过对汇编代码的分析,可以清楚的看到,直接返回引用和返回对象的区别到底是什么. 分析的程序如下 #include<cstdio> ...

  6. Vue中data重置问题

    Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 目标对象有1个,后边可以有多个源对象.注意他只会拷贝源对 ...

  7. Vue中的循环以及修改差值表达式

    0828自我总结 一.Vue中的循环 v-for 常见的4总情况 #第一种 <div v-for="item in items"></div> #第二种 & ...

  8. vue中data必须是一个函数

    前端面试时经常被问到:“组建中data为什么是函数”? 答案就是:在组件中data必须是一个函数,这样的话,每个实例可以维护一份被返回对象的独立拷贝.

  9. vue中data中引用本地图片报错404

    首先说明vue-cli中assets和static两个文件的区别 1.assets在项目编译的过程中会被webpack处理理解为模块依赖,如果执行npm run dev或npm run build命令 ...

随机推荐

  1. Windows 10 安装PHP Manager 失败的解决办法

    首先安装.NET 2.0和.NET 3.5, 在  控制面板----程序----启用或关闭Windows功能   里面 然后修改注册表:HKLM/System/CCS/Services/W3SVC/P ...

  2. FastJson、Jackson、Gson进行Java对象转换Json细节处理

    前言 Java对象在转json的时候,如果对象里面有属性值为null的话,那么在json序列化的时候要不要序列出来呢?对比以下json转换方式 一.fastJson 1.fastJson在转换java ...

  3. axis函数

    axis函数 axis([xmin xmax ymin ymax]) 用来标注输出的图线的最大值最小值. MATLAB中坐标系的设置函数   MATLAB 函数 axis([XMIN XMAX YMI ...

  4. Nginx stream如何获取ssl信息并反向代理至上游服务器

    L:116

  5. Nginx 如何减轻高流量下的压力

    L:102 比如 Nginx 缓存服务出现问题(比如新增服务器等造成缓存失效) 所有资源请求直接穿透上游服务器 造成上游服务器压力倍增 特别热点文件 都是访问同个文件  以下可以减轻上述问题 第二种方 ...

  6. #191 sea（动态规划）

    假设已经求出了i个点j个桥的连通图数量f[i][j],容易由此推出最终答案,套路地枚举1号点所在连通块大小即可. 假设已经求出了i个点的边双连通图数量h[i],考虑由此推出f[i][j].可以枚举其中 ...

  7. DRF 视图和路由

    Django Rest Feamework 视图和路由 DRF的视图 APIView 我们django中写CBV的时候继承的是View,rest_framework继承的是APIView,那么他们两个 ...

  8. Codeforces1063D Candies for Children 【分类讨论】【暴力】

    题目分析: 首先要想两个暴力,一个的时间复杂度是$O(n^2)$,另一个是$O([\frac{n}{k}])$的. $n^2$的暴力可以枚举两段,一段有$i$个取两个的小朋友,一段有$j$个取两个的小 ...

  9. Codeforces1037F Maximum Reduction 【单调栈】

    题目分析: 没啥好说的,会单调栈就会做. 代码: #include<bits/stdc++.h> using namespace std; ; ; int n,k; int pre[max ...

  10. BZOJ3787 gty的文艺妹子序列 【树状数组】【分块】

    题目分析: 首先这种乱七八糟的题目就分块.然后考虑逆序对的统计. 一是块内的,二是块之间的,三是一个块内一个块外,四是都在块外. 令分块大小为$S$. 块内的容易维护,单次维护时间是$O(S)$. 块 ...