在 Vue中，定義data時(shí)，經(jīng)常有好幾種寫法，一不小心會(huì)混淆，這里徹底詳述一下，以便記分清 。

一、在vue中，定義data可以有三種寫法

1. 第一種寫法，data是一個(gè)對(duì)象。

var app = new Vue({
　　el: '#app',
　　data: {
　　　　mess: 'aerchi'
　　}
})

2. 第二種寫法，data是一個(gè)函數(shù)。

var app = new Vue({
　　el: '#app',
　　data: function() {
　　　　return {
　　　　　　mess: 'aerchi'
　　　　}
　　}
})

3. 第三種寫法，data是一個(gè)函數(shù)，是第二種寫法的ES6寫法。

var app = new Vue({
　　el: '#app',
　　data() {
　　　　return {
　　　　　　mess: 'aerchi'
　　　　}
　　}
})

二、在Vue實(shí)例及組件中定義 data的形式。

1.  在Vue 實(shí)例中可以這樣定義 data， 兩種定義方法均生效。

//Vue中定義的data可以是 object 也可以是函數(shù)，效果相同。驗(yàn)證 2020-3-7
new Vue({
 // data () {
    //   return {
    //     message: 'message-data() function!',
    //   }
    // },
    data: {
        message: 'message-data{} object !',
    },
    ...
})

2.  在Vue 組件中data必須定義成函數(shù)形式， function定義方法和ES6定義均生效。

Vue.component('todo-item', {
    data:function(){
        return {mess: "aerchi--function"};
    },
    // data(){
    //     return {mess: "aerchi--data()"};
    // },
    template: '<li>{{mess}}</li>'
})

三、data三種寫法的區(qū)別

1. 在簡(jiǎn)單的vue實(shí)例應(yīng)用中，三種寫法幾乎是沒(méi)有什么區(qū)別的，因?yàn)樯鲜龆x的 #app對(duì)象  不會(huì)被復(fù)用。

var app = new Vue({...})

2. 在組件應(yīng)用的環(huán)境中，會(huì)存在多個(gè)地方調(diào)用同一個(gè)組件的情況，為了不讓多個(gè)地方的組件共享同一個(gè)data對(duì)象，通過(guò)提供 data 函數(shù)，每次創(chuàng)建一個(gè)新實(shí)例后，我們能夠調(diào)用 data 函數(shù)，從而返回初始數(shù)據(jù)的一個(gè)全新副本數(shù)據(jù)對(duì)象。

請(qǐng)注意： 在一個(gè)組件的定義里，data 必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)象的函數(shù)。

這個(gè)與JavaScript的作用域特性有關(guān)，函數(shù)自己擁有私有的作用域，函數(shù)之間的作用域相互獨(dú)立，也就不會(huì)出現(xiàn)組件對(duì)數(shù)據(jù)的綁定出現(xiàn)交錯(cuò)的情況。

export default{
    data(){
        return {
            ...
        }
    }

四、Vue官方中關(guān)于data的說(shuō)明

(https://cn.vuejs.org/v2/api/?#data)

data

類型：Object | Function

限制：組件的定義只接受 function。

詳細(xì)：

Vue 實(shí)例的數(shù)據(jù)對(duì)象。Vue 將會(huì)遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化。

對(duì)象必須是純粹的對(duì)象 (含有零個(gè)或多個(gè)的 key/value 對(duì))：

• 瀏覽器 API 創(chuàng)建的原生對(duì)象，原型上的屬性會(huì)被忽略。
• 大概來(lái)說(shuō)，data 應(yīng)該只能是數(shù)據(jù) - 不推薦觀察擁有狀態(tài)行為的對(duì)象。

一旦觀察過(guò)，你就無(wú)法在根數(shù)據(jù)對(duì)象上添加響應(yīng)式屬性。因此推薦在創(chuàng)建實(shí)例之前，就聲明所有的根級(jí)響應(yīng)式屬性。

實(shí)例創(chuàng)建之后，可以通過(guò) vm.$data 訪問(wèn)原始數(shù)據(jù)對(duì)象。Vue 實(shí)例也代理了 data 對(duì)象上所有的屬性，因此訪問(wèn) vm.a 等價(jià)于訪問(wèn) vm.$data.a。

以 _ 或 $ 開(kāi)頭的屬性 不會(huì) 被 Vue 實(shí)例代理，因?yàn)樗鼈兛赡芎?Vue 內(nèi)置的屬性、API 方法沖突。你可以使用例如 vm.$data._property 的方式訪問(wèn)這些屬性。

當(dāng)一個(gè)組件被定義，data 必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)象的函數(shù)，因?yàn)榻M件可能被用來(lái)創(chuàng)建多個(gè)實(shí)例。

如果 data 仍然是一個(gè)純粹的對(duì)象，則所有的實(shí)例將共享引用同一個(gè)數(shù)據(jù)對(duì)象！通過(guò)提供 data 函數(shù)，每次創(chuàng)建一個(gè)新實(shí)例后，我們能夠調(diào)用 data 函數(shù)，從而返回初始數(shù)據(jù)的一個(gè)全新副本數(shù)據(jù)對(duì)象。

如果需要，可以通過(guò)將 vm.$data 傳入 JSON.parse(JSON.stringify(...)) 得到深拷貝的原始數(shù)據(jù)對(duì)象。

示例：

var data = { a: 1 }
 
// 直接創(chuàng)建一個(gè)實(shí)例
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true
 
// Vue.extend() 中 data 必須是函數(shù)
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

注意，如果你為 data 屬性使用了箭頭函數(shù)，則 this 不會(huì)指向這個(gè)組件的實(shí)例，不過(guò)你仍然可以將其實(shí)例作為函數(shù)的第一個(gè)參數(shù)來(lái)訪問(wèn)。

data: vm => ({ a: vm.myProp })

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論