先看一下官方文档是怎么说的
- 官方文档其实想表达的意思是,让每一个组件都有自己的数据
- 每次调用的时候都会return一个新的数据
- 让各个组件之间的数据不会相互影响
理解一下
上代码,
// 创建一个对象
const obj = {
name: '超人',
age: 20
}
// 通过这个函数分发
function giveData() {
return obj
}
// 通过函数创建出来三个
const obj1 = giveData()
const obj2 = giveData()
const obj3 = giveData()
// 打印出来看看
console.log(obj1)
console.log(obj2)
console.log(obj3)
看一下输出到控制台的结果
完美!没一点毛病
我们来改一下obj的内容
此时在打印一下obj123看看他们
可以看到,3个超人都变成戴安娜了,这不是我们想要的结果把,3个爷们没意思,3个女的也不好玩啊
其实这不难理解,我们来画一下内存图
当我们把超人改成戴安娜之后,他们三个都是同一个内存地址,所以内容全部都被改了
我们来换一种写法
function giveData() {
return {
name: '超人',
age: 20
}
}
const obj1 = giveData()
const obj2 = giveData()
const obj3 = giveData()
console.log(obj1)
console.log(obj2)
console.log(obj3)
再看一下控制台的结果
看起来跟上次一样,我们来更改一下试试
再看看他们三个
可以看到只有其中一个对象的name属性被更改了,这下子他们就能愉快的玩耍了
再来看一下内存图
可以看出来,他们三个这下子不在同一个对象的分身了,他们是三个独立的个体,有着属于自己的内存地址,这时候我们再去更改第一个,第二个和第三个当然不会改变
以上就是为什么组件里的data必须是一个函数的原因
我们写一个实例看看
<body>
<div id="app">
<cpnson></cpnson>
<cpnson></cpnson>
</div>
<template id="cpnson">
<div>
<h1>{{message}}</h1>
<button @click='add'>点击变大</button>
</div>
</template>
</body>
const cpnson = {
template: "#cpnson",
data() {
return { message: 0 }
},
methods: {
add() {
this.message++
}
}
}
const app = new Vue({
el: "#app",
data: {},
components: {
cpnson,
}
})
看一下到页面上的效果
点击试试看
- 如果组件中的data不是函数的话,那么多个组件将会共享同一个数据,其中一个组件上对数据做出的改变,也会影响另一个组件上的数据 、
- 组件上的data是函数的情况下,组件每次调用data里面的数据,都是由data这个独有的函数返回过来的数据,所以不会造成这个组件更改data的数据,另一个在使用这个数据的组件也会更改这个数据