VUE中data配置的作用是什么

本文小編為大家詳細介紹“VUE中data配置的作用是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“VUE中data配置的作用是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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了一個對象。

讀到這里，這篇“VUE中data配置的作用是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。