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ò)，不需要再次在數(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 })

• 參考：深入響應(yīng)式原理

props

• 類型：Array<string> | Object

• 詳細(xì)：

  props 可以是數(shù)組或?qū)ο?#xff0c;用于接收來(lái)自父組件的數(shù)據(jù)。props 可以是簡(jiǎn)單的數(shù)組，或者使用對(duì)象作為替代，對(duì)象允許配置高級(jí)選項(xiàng)，如類型檢測(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 是否是給定的類型，否則拋出警告。Prop 類型的更多信息在此。
  • default:?any
    為該 prop 指定一個(gè)默認(rèn)值。如果該 prop 沒(méi)有被傳入，則換做用這個(gè)值。對(duì)象或數(shù)組的默認(rèn)值必須從一個(gè)工廠函數(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)信息。

• 示例：

  // 簡(jiǎn)單語(yǔ)法 Vue.component('props-demo-simple', {props: ['size', 'myMessage'] })// 對(duì)象語(yǔ)法，提供驗(yàn)證 Vue.component('props-demo-advanced', {props: {// 檢測(cè)類型height: Number,// 檢測(cè)類型 + 其他驗(yàn)證age: {type: Number,default: 0,required: true,validator: function (value) {return value >= 0}}} })

• 參考：Props

• 摘自：https://cn.vuejs.org/v2/api/#data

總結(jié)

以上是生活随笔為你收集整理的vue下的props,data的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。