速记：粗浅的理解是，事件的结果是影响单个组件还是多个组件。因为大部分组件是要共享的，但他们的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. web项目中的监听器，过滤器以及自定义servlet的执行顺序

    可以看到web容器一启动就会实例化监听器的contextInitialized(ServletContextEvent event)方法,然后是过滤器的init()方法,最后在用户访问web应用的 时 ...

  2. spring @Validated 注解开发中使用group分组校验

    之前知道spring支持JSR校验,在自己定义的bean中加入@NotNull,@NotBlank,@Length等之类的校验用于处理前台传递过来的request请求,避免在写多余的代码去处理. 但是 ...

  3. Go语言流程控制

    1.条件语句 几个注意点和C#不一样的. { } else { } ① 条件语句不需要使用括号将条件包含起来 a<5 ,C#必须有() ②无论语句体内有几条语句,花括号{}都是必须存在的:C#如 ...

  4. $.ajax ,ajax请求添加请求头，添加Authorization字段

    beforeSend : function(request) { request.setRequestHeader("Authorization", sessionStorage. ...

  5. [PA2012] Tax

    传送门:>Here< 题意:给出一个N个点M条边的无向图,经过一个点的代价是进入和离开这个点的两条边的边权的较大值,求从起点1到点N的最小代价.起点的代价是离开起点的边的边权,终点的代价是 ...

  6. CODEFORCES掉RATING记 #4

    比赛:Codeforces Round #427 (Div. 2) 时间:2017.7.31晚 开场发现有6道题,都是水题(可能我只会做水题) A:比较\(2t_1+sv_1\)与\(2t_2+sv_ ...

  7. 【WC2018】即时战略（动态点分治，替罪羊树）

    [WC2018]即时战略(动态点分治,替罪羊树) 题面 UOJ 题解 其实这题我也不知道应该怎么确定他到底用了啥.只是想法很类似就写上了QwQ. 首先链的部分都告诉你要特殊处理那就没有办法只能特殊处理 ...

  8. [luogu3157][bzoj3295][CQOI2011]动态逆序对【cdq分治+树状数组】

    题目描述 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计整个序列的逆序 ...

  9. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  10. 「ZJOI2016」大森林 解题报告

    「ZJOI2016」大森林 神仙题... 很显然线段树搞不了 考虑离线操作 我们只搞一颗树,从位置1一直往后移动,然后维护它的形态试试 显然操作0,1都可以拆成差分的形式,就是加入和删除 因为保证了操 ...