1. What is data? what's the effect?
data is a configuration item in the Vue instance. Used to store values in vue instances or components.
2. There is a difference in the location of data (data configuration items exist in two locations)
2.1. When data exists in a Vue instance, it can be in the form of an object (key-value pair).
The following data types are defined in Vue's data attribute:
1. String
2. Integer
3. Array
4. Object
5. Object array
data: {
// 定义字符串
name: "谷哥的小弟",
// 定义整数
number:9527,
// 定义数组
hobby:["篮球","足球","击剑"],
// 定义对象
user:{
id: 21, name: "zxx", age: 50},
// 定义对象数组
users:[
{
id: 21, name: "zxx", age: 50},
{
id: 22, name: "zxc", age: 51},
{
id: 23, name: "zcc", age: 52},
]
}
2.1 can also be in the form of a function.
const app = new Vue({
el:"#app",
// 对象格式
data:{
foo:"foo"
},
// 函数格式
data(){
return {
foo:"foo"
}
}
2.2 When data exists in a component, it can only be a function
Vue.component('component1',{
template:`<div>组件</div>`,
data(){
return {
foo:"foo"
}
}
})
3. Why data can only be a function in the component?
Vue's official documentation also says that the data in the component must use a function or an error will be reported. Why is this?
This goes back to our Jvascript objects. As we all know, Javascript objects belong to the reference data type. If you assign an object to another object, it does not assign the value of the object to a new variable, but in memory. The declared object points to this new object.
let obj = {
name: "小明",
age:19
}
let obj1 = obj
obj.name = "小红"
// 此时 obj1.name == "小红"
// 并且 obj.name == "小红"
In this case, if you modify the properties in obj1, the data of obj will also change.
Why do we mention this? We need to understand that components are actually similar to a constructor function of native js.
The components we call are equivalent to native js. The object to be instantiated joins us to declare a constructor person and change the value in it
function Person(name,age){
this.name = nmae;
this.age = age ;
this.race = "汉族"
}
let ming = new Person("xiaoming",19)
let hong = new Person("xiaohong",20)
console.log(ming)
console.log(hong)
// 此时如果我们把小明的名族改了
ming.race="维吾尔族"
console.log(ming)
console.log(hong)
// 我们再去查看一下会发现，小明小红都变成了维吾尔族
Therefore, in order to prevent the variable modification of the object, the data in the component must exist in the form of a function, because only the function has the closed scope of the function, which is why the designer of Vue uses a data in the component but returns again an object.