Data为什么必须是函数1

我心向阳.

已于 2022-06-01 19:01:19 修改

阅读量1.7k

点赞数

于 2022-06-01 18:58:45 首次发布

本文链接：https://blog.csdn.net/Mr_xiaoxuboke/article/details/125088602

版权

Vue 组件复用数据隔离函数式数据状态管理

关键词由CSDN通过智能技术生成

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>

我心向阳.

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Data为什么必须是函数1

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

扫一扫