Data为什么必须是函数1

107 阅读 0 评论 71 点赞

我是靠谱客的博主成就帆布鞋，最近开发中收集的这篇文章主要介绍Data为什么必须是函数1，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。
2.因为当 data 是函数时，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变
3.如果data是对象时，这些实例用的是同一个构造函数，由于JavaScript的特性所导致，所有的组件实例共用了一个data，就会造成一个变了全都会变的结果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn1></cpn1>
			<cpn1></cpn1>
			<cpn1></cpn1>
			<hr>
			<cpn2></cpn2>
			<cpn2></cpn2>
			<cpn2></cpn2>
		</div>
		
		
		
		
		<template  id="cpn1">
			<div>
				<button @click="count++">+</button>
				<h2>{{count}}</h2>
				<button @click="count--">-</button>
			</div>
		</template>
		
		<template  id="cpn2">
			<div>
				<button @click="count++">+</button>
				<h2>{{count}}</h2>
				<button @click="count--">-</button>
			</div>
		</template>
		<script src="vue.js"></script>
		<script type="text/javascript">
			var obj = {
				count:0
			}
			const vm = new Vue({
				el:"#app",
				data(){
					return{
						
					}
				},
				components:{
					cpn1:{
						template:"#cpn1",
						data(){
							return obj
						}
					},
					cpn2:{
						template:"#cpn2",
						data(){
							return{
								count:0
							}
						}
					}
				}
			})
		</script>
	</body>
</html>