认识Vue Data

最新推荐文章于 2024-06-21 09:43:57 发布

炸炸毛还能继续写代码吗

最新推荐文章于 2024-06-21 09:43:57 发布

阅读量101

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_61608271/article/details/125508604

版权

Data为什么必须是一个函数？

根实例对象data可以是对象也可以是函数，不会产生数据污染情况.

组件中的data必须是一个函数

因为组件中的data如果是一个对象的话, 对象A的值发生改变,对象B的值也会跟着改变

但是,组件中的data是一个函数的话,不会产生这样的问题

这样的好处是,不会受到其他实例对象数据的污染.

组件中data必须为函数，目的是为了防止多个组件对象之间共用一个data，产生数据污染。

<body>
		<div id="app">
           <cpn1></cpn1>
		   <cpn1></cpn1>
		   <cpn1></cpn1>
		   <hr />
		   <cpn2></cpn2>
		   <cpn2></cpn2>
		   <cpn2></cpn2>
		</div>
		<script src="vue.js"></script>
		<template id="cpn1">
			<div>
				<button type="button" @click="count++">+</button>
				<h2>{{count}}</h2>
				<button type="button" @click="count--">-</button>
			</div>
		</template>
		<template id="cpn2">
			<div>
				<button type="button" @click="count++">+</button>
				<h2>{{count}}</h2>
				<button type="button" @click="count--">-</button>
			</div>
		</template>
		<script>
			var obj = {
				count:0
			}
			const app = new Vue({
				el: "#app",
				data: {
				
				},
				methods: {
                 
				},
				components:{
					cpn1:{
						template:'#cpn1',
						data(){
							return obj
						}
					},
					cpn2:{
						template:'#cpn2',
						data(){
							return {count:0}
						}
					}
				}
			})
		</script>
	</body>

vue中组件是用来复用的，为了防止data复用，将其定义为函数。
因为当 data 是函数时，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变
举例：

<script>
		/* 	var obj = {
				name: '张三',
				age: 30
			} */
 
			function box() {
				return {
					name: '张三',
					age: 30
				}
			}
			var a = box()
			var b = box()
			var c = box()
			console.log(a);
			console.log(b);
			console.log(c);
			a.name = '李四'
			console.log(a);
			console.log(b);
			console.log(c);
		</script>