为什么每一个组件实例都需要有自己的状态（以及组件的data属性为啥必须是函数且需要返回一个对象）

解答如下

函数每执行一次，会分配新的内存地址。
函数返回新的对象，新的对象相互独立，因此不会相互影响。
组件data的属性只是在本地组件范围内有效，采用函数返回的形式，不会造成跨组件的变量污染。

下面举一个计数器的例子来详细解释

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计数器</title>
</head>
<body>
	<div id="app">
		当前数值：{{count}}
		<button @click="count++">+</button>
		<button @click="count--">-</button>
	</div>
	<script src="./js/vue.js"></script>
	<script>
		const vm = new Vue({
			el:"#app",
			data:{
				count:0
			}
		})
	</script>
</body>
</html>

1.首先，我们将下面这个计数器抽取成一个组件。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<cpn></cpn>
		<hr>
		<cpn></cpn>
		<hr>
		<cpn></cpn>
		<hr>
	</div>
	<template id="cpn">
		<div id="app">
		当前数值：{{counter}}
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		</div>
	</template>
	<script src="./js/vue.js"></script>
	<script>
		Vue.component('cpn',{
			template:'#cpn',
			data(){
				return {
					counter:0
				}
			},
			methods:{
				increment(){
					this.counter++
				},
				decrement(){
					this.counter--
				}
			}
		})
		const vm = new Vue({
			el:'#app'
		})
	</script>
</body>
</html>

浏览器页面：
在这里插入图片描述
这是我们所希望的效果，组件之间相互独立，互不影响。点击计数器一并不会导致计数器二、三跟着变化。
2.接下来演示跨组件变量污染的情况（将返回的对象定义在外部，data内不会每次返回一个新的对象了）
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<cpn></cpn>
		<hr>
		<cpn></cpn>
		<hr>
		<cpn></cpn>
		<hr>
	</div>
	<template id="cpn">
		<div id="app">
		当前数值：{{counter}}
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		</div>
	</template>
	<script src="./js/vue.js"></script>
	<script>
		const obj = {
			counter:0
		}
		Vue.component('cpn',{
			template:'#cpn',
			data(){
				return obj
			},
			methods:{
				increment(){
					this.counter++
				},
				decrement(){
					this.counter--
				}
			}
		})
		const vm = new Vue({
			el:'#app'
		})
	</script>
</body>
</html>

浏览器界面：
在这里插入图片描述
点击计数器一会导致计数器二、三跟着变化，这是我们在开发中不希望看到的。

为什么每一个组件实例都需要有自己的状态（以及组件的data属性为啥必须是函数且需要返回一个对象）

解答如下

下面举一个计数器的例子来详细解释

以上便是组件的data属性必须定义为一个函数且需要返回一个对象的原因（注意：返回的对象直接写在data属性内，不能够将这个对象先在外部定义）

猜你喜欢