快捷導(dǎo)航

VUE中data配置項(xiàng)詳細(xì)解析

更新時(shí)間：2023年02月27日 11:25:51 作者：三千洲

data屬性是Vue實(shí)例的數(shù)據(jù)對(duì)象,可以綁定的是對(duì)象或者是函數(shù),下面這篇文章主要給大家介紹了關(guān)于VUE中data配置項(xiàng)詳細(xì)解析的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

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

data是Vue實(shí)例中一個(gè)配置項(xiàng)。用來(lái)存儲(chǔ)vue實(shí)例或者組件里面的數(shù)值。

2.data的存在位置差異（data配置項(xiàng)存在于兩種位置）

2.1.當(dāng)data存在于Vue實(shí)例中時(shí)，它既可以是以一個(gè)對(duì)象的形式（鍵值對(duì)）。

在Vue的data屬性定義以下數(shù)據(jù)類型：

1、字符串

2、整數(shù)

3、數(shù)組

4、對(duì)象

5、對(duì)象數(shù)組

data: {
                    // 定義字符串
                    name: "谷哥的小弟",
                    // 定義整數(shù)
                    number:9527,
                    // 定義數(shù)組
                    hobby:["籃球","足球","擊劍"],
                    // 定義對(duì)象
                    user:{id: 21, name: "zxx", age: 50},
                    // 定義對(duì)象數(shù)組
                    users:[
                        {id: 21, name: "zxx", age: 50},
                        {id: 22, name: "zxc", age: 51},
                        {id: 23, name: "zcc", age: 52},
                    ]
                }

2.1也可以是一個(gè)函數(shù)的形式。

const app = new Vue({
    el:"#app",
    // 對(duì)象格式
    data:{
        foo:"foo"
    },
    // 函數(shù)格式
    data(){
        return {
             foo:"foo"
        }
    }

2.2當(dāng)data存在于組件中時(shí)，它只能是一個(gè)函數(shù)

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

3.為什么在組件中data只能是一個(gè)函數(shù)呢？

Vue的官方文檔中也有說(shuō)組件中的data必須使用函數(shù)否則會(huì)報(bào)錯(cuò)，這是為什么呢？

這就要追溯到我們的Jvascript的對(duì)象了，眾所周知Javascript的對(duì)象屬于引用數(shù)據(jù)類型，如果將一個(gè)對(duì)象賦值給另一個(gè)對(duì)象他并不是將該對(duì)象的值賦給新變量，而是在內(nèi)存中將起初申明的對(duì)象去指向這個(gè)新對(duì)象。

let obj = {
    name: "小明",
    age:19
}
let obj1 = obj 
obj.name = "小紅"
// 此時(shí)   obj1.name == "小紅"
// 并且   obj.name == "小紅"

這種情況下如果修改obj1中的屬性，obj的數(shù)據(jù)也會(huì)發(fā)生變化

為什么要提到這個(gè)呢我們就要理解一下組件其實(shí)就類似原生js的一個(gè)構(gòu)造函數(shù)

我們?nèi)フ{(diào)用的組件就是相當(dāng)于原生js我們?nèi)?shí)例化的對(duì)象加入我們申明一個(gè)構(gòu)造函數(shù) 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)
    // 此時(shí)如果我們把小明的名族改了
    ming.race="維吾爾族"
    console.log(ming)
    console.log(hong)
    // 我們?cè)偃ゲ榭匆幌聲?huì)發(fā)現(xiàn)，小明小紅都變成了維吾爾族

所以，為了防止對(duì)象的變量修改，在組件的data必須要用函數(shù)的形式存在，因?yàn)橹挥泻瘮?shù)有函數(shù)的封閉作用域，這也就是為什么Vue的設(shè)計(jì)者為什么在組件中使用了一個(gè)data卻再次return了一個(gè)對(duì)象。