VUE中data配置项详细解析

时间:2023-03-23 三千洲人气:0

1.data是什么？有什么作用？

data是Vue实例中一个配置项。用来存储vue实例或者组件里面的数值。

2.data的存在位置差异（data配置项存在于两种位置）

2.1.当data存在于Vue实例中时，它既可以是以一个对象的形式（键值对）。

在Vue的data属性定义以下数据类型：

1、字符串

2、整数

3、数组

4、对象

5、对象数组

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也可以是一个函数的形式。

const app = new Vue({
    el:"#app",
    // 对象格式
    data:{
        foo:"foo"
    },
    // 函数格式
    data(){
        return {
             foo:"foo"
        }
    }

2.2当data存在于组件中时，它只能是一个函数

Vue.component('component1',{
    template:`<div>组件</div>`,
     data(){
        return {
             foo:"foo"
        }
    }
})

3.为什么在组件中data只能是一个函数呢？

Vue的官方文档中也有说组件中的data必须使用函数否则会报错，这是为什么呢？

这就要追溯到我们的Jvascript的对象了，众所周知Javascript的对象属于引用数据类型，如果将一个对象赋值给另一个对象他并不是将该对象的值赋给新变量，而是在内存中将起初申明的对象去指向这个新对象。

let obj = {
    name: "小明",
    age:19
}
let obj1 = obj 
obj.name = "小红"
// 此时   obj1.name == "小红"
// 并且   obj.name == "小红"

这种情况下如果修改obj1中的属性，obj的数据也会发生变化

为什么要提到这个呢我们就要理解一下组件其实就类似原生js的一个构造函数

我们去调用的组件就是相当于原生js我们去实例化的对象加入我们申明一个构造函数 person并改变其中的值

    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)
    // 我们再去查看一下会发现，小明小红都变成了维吾尔族

所以，为了防止对象的变量修改，在组件的data必须要用函数的形式存在，因为只有函数有函数的封闭作用域，这也就是为什么Vue的设计者为什么在组件中使用了一个data却再次return了一个对象。

总结

加载全部内容