首頁  >  文章  >  web前端  >  vue元件中data不能是函數嗎

vue元件中data不能是函數嗎

青灯夜游
青灯夜游原創
2022-12-19 17:22:072107瀏覽

不是,vue元件中data必須是一個函數。 vue中元件是用來重複使用的,為了防止data重複使用,將其定義為函數。 vue元件中的data資料都應該是互相隔離,互不影響的,元件每復用一次,data資料就應該被複製一次,之後,當某一處複用的地方元件內data資料被改變時,其他重複使用地方元件的data資料不受影響,就需要透過data函數傳回一個物件作為元件的狀態。

vue元件中data不能是函數嗎

本教學操作環境:windows7系統、vue3版,DELL G3電腦。

vue實例的時候定義data屬性既可以是一個對象,也可以是一個函數

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

但,元件中定義data屬性,只能是一個函數

如果為元件data直接定義為一個物件

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

則會得到警告訊息

vue元件中data不能是函數嗎

警告說明:傳回的data應該是一個函數在每一個元件實例中

為什麼data屬性是一個函數而不是一個物件?

Vue元件中data屬性不能為物件原因是物件是參考類型,元件會被多個實例同時引用導致的結果就是多個實例共用一個對象,其中一個元件改變了data物件中的值,其他實例也會受到影響。

如圖所示,元件重複使用後,隨機點選其中一個元件中的按鈕其他兩個元件的數值也會受到影響

vue元件中data不能是函數嗎

vue元件data為函數的原因:data為函數,透過return返回對象,可以實作每個實例都有自己獨立的對象,實例之間互不影響;如下圖所示

vue元件中data不能是函數嗎

結論

根實例物件data可以是物件也可以是函數(根實例是單例),不會產生資料污染情況

元件實例物件data必須為函數,目的是為了防止多個元件實例物件之間共用一個data,產生資料污染。採用函數的形式,initData時會將其作為工廠函數都會傳回全新data物件

說明:

  • ##vue中元件是用來復用的,為了防止data復用,將其定義為函數。

  • vue元件中的data資料都應該是互相隔離,互不影響的,元件每復用一次,data資料就應該被複製一次,之後,當某處複用的地方元件內data資料改變時,其他複用地方元件的data資料不受影響,就需要透過data函數傳回一個物件作為元件的狀態。

  • 當我們將元件中的data寫成一個函數,資料以函數傳回值形式定義,這樣每複用一次元件,就會傳回一份新的data,擁有自己的作用域,類似於為每個元件實例建立一個私有的資料空間,讓各個元件實例維護各自的資料。

  • 當我們元件的date單純的寫成物件形式,這些實例用的是同一個建構函數,由於JavaScript的特性所導致,所有的元件實例共用了一個data,就會造成一個變了全都會變的結果。

(學習影片分享:

web前端開發程式設計基礎影片

以上是vue元件中data不能是函數嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn