Vue 3.0 選項(xiàng) Data

2022-04-18 14:22 更新

#data

  • 類(lèi)型：Function

  • 詳細(xì)：

返回組件實(shí)例的 data 對(duì)象的函數(shù)。在 data 中，我們不建議觀(guān)察具有自身狀態(tài)行為的對(duì)象，如瀏覽器 API 對(duì)象和原型 property。一個(gè)好主意是這里只有一個(gè)表示組件 data 的普通對(duì)象。

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

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

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

  • 示例：

  1.   // 直接創(chuàng)建一個(gè)實(shí)例
  2.   const data = { a: 1 }
  4.   
  5.   // 這個(gè)對(duì)象將添加到組件實(shí)例中
  6.   const vm = Vue.createApp({
  7.     data() {
  8.       return data
  9.     }
  10.   }).mount('#app')
  12.   
  13.   console.log(vm.a) // => 1

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

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

#props

  • 類(lèi)型：Array<string> | Object

  • 詳細(xì)：

props 可以是數(shù)組或?qū)ο螅糜诮邮諄?lái)自父組件的數(shù)據(jù)。props 可以是簡(jiǎn)單的數(shù)組，或者使用對(duì)象作為替代，對(duì)象允許配置高階選項(xiàng)，如類(lèi)型檢測(cè)、自定義驗(yàn)證和設(shè)置默認(rèn)值。

你可以基于對(duì)象的語(yǔ)法使用以下選項(xiàng)：

  • type：可以是下列原生構(gòu)造函數(shù)中的一種：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定義構(gòu)造函數(shù)、或上述內(nèi)容組成的數(shù)組。會(huì)檢查一個(gè) prop 是否是給定的類(lèi)型，否則拋出警告。Prop 類(lèi)型的更多信息在此。
  • default：any 為該 prop 指定一個(gè)默認(rèn)值。如果該 prop 沒(méi)有被傳入，則換做用這個(gè)值。對(duì)象或數(shù)組的默認(rèn)值必須從一個(gè)工廠(chǎng)函數(shù)返回
  • required：Boolean 義該 prop 是否是必填項(xiàng)。在非生產(chǎn)環(huán)境中，如果這個(gè)值為 truthy 且該 prop 沒(méi)有被傳入的，則一個(gè)控制臺(tái)警告將會(huì)被拋出。
  • validator：Function 自定義驗(yàn)證函數(shù)會(huì)將該 prop 的值作為唯一的參數(shù)代入。在非生產(chǎn)環(huán)境下，如果該函數(shù)返回一個(gè) falsy 的值 (也就是驗(yàn)證失敗)，一個(gè)控制臺(tái)警告將會(huì)被拋出。你可以在這里查閱更多 prop 驗(yàn)證的相關(guān)信息。

  • 示例：

  1.   const app = Vue.createApp({})
  3.   
  4.   // 簡(jiǎn)單語(yǔ)法
  5.   app.component('props-demo-simple', {
  6.     props: ['size', 'myMessage']
  7.   })
  9.   
  10.   // 對(duì)象語(yǔ)法，提供驗(yàn)證
  11.   app.component('props-demo-advanced', {
  12.     props: {
  13.       // 類(lèi)型檢查
  14.       height: Number,
  15.       // 類(lèi)型檢查 + 其他驗(yàn)證
  16.       age: {
  17.         type: Number,
  18.         default: 0,
  19.         required: true,
  20.         validator: value => {
  21.           return value >= 0
  22.         }
  23.       }
  24.     }
  25.   })

#computed

  • 類(lèi)型：{ [key: string]: Function | { get: Function, set: Function } }

  • 詳細(xì)：

計(jì)算屬性將被混入到組件實(shí)例中。所有 getter 和 setter 的 this 上下文自動(dòng)地綁定為組件實(shí)例。

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

  1.   computed: {
  2.     aDouble: vm => vm.a * 2
  3.   }

計(jì)算屬性的結(jié)果會(huì)被緩存，除非依賴(lài)的響應(yīng)式 property 變化才會(huì)重新計(jì)算。注意，如果某個(gè)依賴(lài) (比如非響應(yīng)式 property) 在該實(shí)例范疇之外，則計(jì)算屬性是不會(huì)被更新的。

  • 示例：

  1.   const app = Vue.createApp({
  2.     data() {
  3.       return { a: 1 }
  4.     },
  5.     computed: {
  6.       // 僅讀取
  7.       aDouble() {
  8.         return this.a * 2
  9.       },
  10.       // 讀取和設(shè)置
  11.       aPlus: {
  12.         get() {
  13.           return this.a + 1
  14.         },
  15.         set(v) {
  16.           this.a = v - 1
  17.         }
  18.       }
  19.     }
  20.   })
  22.   
  23.   const vm = app.mount('#app')
  24.   console.log(vm.aPlus) // => 2
  25.   vm.aPlus = 3
  26.   console.log(vm.a) // => 2
  27.   console.log(vm.aDouble) // => 4

#methods

  • 類(lèi)型：{ [key: string]: Function }

  • 詳細(xì)：

methods 將被混入到組件實(shí)例中?？梢灾苯油ㄟ^(guò) VM 實(shí)例訪(fǎng)問(wèn)這些方法，或者在指令表達(dá)式中使用。方法中的 this 自動(dòng)綁定為組件實(shí)例。

注意

注意，不應(yīng)該使用箭頭函數(shù)來(lái)定義 method 函數(shù) (例如 plus：() => this.a++)。理由是箭頭函數(shù)綁定了父級(jí)作用域的上下文，所以 this 將不會(huì)按照期望指向組件實(shí)例，this.a 將是 undefined。

  • 示例：

  1.   const app = Vue.createApp({
  2.     data() {
  3.       return { a: 1 }
  4.     },
  5.     methods: {
  6.       plus() {
  7.         this.a++
  8.       }
  9.     }
  10.   })
  12.   
  13.   const vm = app.mount('#app')
  15.   
  16.   vm.plus()
  17.   console.log(vm.a) // => 2

#watch

  • 類(lèi)型：{ [key: string]: string | Function | Object | Array}
  • 詳細(xì)：

一個(gè)對(duì)象，鍵是需要觀(guān)察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對(duì)象。組件實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用 $watch()，參閱 $watch，了解更多關(guān)于 deep、immediate 和 flush 選項(xiàng)的信息。

  • 示例：

  1.   const app = Vue.createApp({
  2.     data() {
  3.       return {
  4.         a: 1,
  5.         b: 2,
  6.         c: {
  7.           d: 4
  8.         },
  9.         e: 'test',
  10.         f: 5
  11.       }
  12.     },
  13.     watch: {
  14.       a(val, oldVal) {
  15.         console.log(`new: ${val}, old: ${oldVal}`)
  16.       },
  17.       // 字符串方法名
  18.       b: 'someMethod',
  19.       // 該回調(diào)會(huì)在任何被偵聽(tīng)的對(duì)象的 property 改變時(shí)被調(diào)用，不論其被嵌套多深
  20.       c: {
  21.         handler(val, oldVal) {
  22.           console.log('c changed')
  23.         },
  24.         deep: true
  25.       },
  26.       // 該回調(diào)將會(huì)在偵聽(tīng)開(kāi)始之后被立即調(diào)用
  27.       e: {
  28.         handler(val, oldVal) {
  29.           console.log('e changed')
  30.         },
  31.         immediate: true
  32.       },
  33.       // 你可以傳入回調(diào)數(shù)組，它們會(huì)被逐一調(diào)用
  34.       f: [
  35.         'handle1',
  36.         function handle2(val, oldVal) {
  37.           console.log('handle2 triggered')
  38.         },
  39.         {
  40.           handler: function handle3(val, oldVal) {
  41.             console.log('handle3 triggered')
  42.           }
  43.           /* ... */
  44.         }
  45.       ]
  46.     },
  47.     methods: {
  48.       someMethod() {
  49.         console.log('b changed')
  50.       },
  51.       handle1() {
  52.         console.log('handle 1 triggered')
  53.       }
  54.     }
  55.   })
  57.   
  58.   const vm = app.mount('#app')
  60.   
  61.   vm.a = 3 // => new: 3, old: 1

注意

注意，不應(yīng)該使用箭頭函數(shù)來(lái)定義 watcher 函數(shù) (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭頭函數(shù)綁定了父級(jí)作用域的上下文，所以 this 將不會(huì)按照期望指向組件實(shí)例，this.updateAutocomplete 將是 undefined。

#emits

  • 類(lèi)型：Array<string> | Object

  • 詳細(xì)：

emits 可以是數(shù)組或?qū)ο?，從組件觸發(fā)自定義事件，emits 可以是簡(jiǎn)單的數(shù)組，或者對(duì)象作為替代，允許配置和事件驗(yàn)證。

在對(duì)象語(yǔ)法中，每個(gè) property 的值可以為 null 或驗(yàn)證函數(shù)。驗(yàn)證函數(shù)將接收傳遞給 $emit 調(diào)用的其他參數(shù)。如果 this.$emit('foo',1) 被調(diào)用，foo 的相應(yīng)驗(yàn)證函數(shù)將接收參數(shù) 1。驗(yàn)證函數(shù)應(yīng)返回布爾值，以表示事件參數(shù)是否有效。

  • 用法：

  1.   const app = Vue.createApp({})
  3.   
  4.   // 數(shù)組語(yǔ)法
  5.   app.component('todo-item', {
  6.     emits: ['check'],
  7.     created() {
  8.       this.$emit('check')
  9.     }
  10.   })
  12.   
  13.   // 對(duì)象語(yǔ)法
  14.   app.component('reply-form', {
  15.     emits: {
  16.       // 沒(méi)有驗(yàn)證函數(shù)
  17.       click: null,
  19.   
  20.       // 帶有驗(yàn)證函數(shù)
  21.       submit: payload => {
  22.         if (payload.email && payload.password) {
  23.           return true
  24.         } else {
  25.           console.warn(`Invalid submit event payload!`)
  26.           return false
  27.         }
  28.       }
  29.     }
  30.   })

注意

emits 選項(xiàng)中列出的事件不會(huì)從組件的根元素繼承，也將從 $attrs property 中移除。

以上內(nèi)容是否對(duì)您有幫助：
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)