Let's take a look at what the official documentation says
- What the official document actually wants to express is to let each component have its own data
- It will return a new data every time it is called
- Let the data between the various components not affect each other
Understand
Code,
// 创建一个对象
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)
Look at the output to the console.
Perfect! Nothing wrong,
let’s change the content of obj.
At this point, print obj123 to see that they
can see that all 3 Supermen have become Diana. This is not the result we want, 3 men are boring, 3 women Is not fun either
In fact, this is not difficult to understand, let's draw a memory map
When we changed Superman to Diana, all three of them have the same memory address, so all the contents have been changed
Let's change the way of writing
function giveData() {
return {
name: '超人',
age: 20
}
}
const obj1 = giveData()
const obj2 = giveData()
const obj3 = giveData()
console.log(obj1)
console.log(obj2)
console.log(obj3)
Look at the results of the console again. It
looks the same as last time. Let’s change it and try
again. Look at the three of them.
You can see that only the name attribute of one of the objects has been changed, and now they can play happily
Look at the memory map again
It can be seen that the three of them are no longer clones of the same object. They are three independent individuals with their own memory addresses. At this time, we will change the first, second and third. will not change
The above is why the data in the component must be a function
Let's write an example to see
<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,
}
})
See the effect on the page,
click to try
- If the data in the component is not a function, then multiple components will share the same data, and the changes made to the data on one component will also affect the data on the other component.
- When the data on the component is a function, each time the component calls the data in data, it is the data returned by the unique function of data, so this component will not change the data of data, and the other is using this data The component will also change this data