data

• 類型：Object | Function

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

• 詳細：

  Vue 實例的數據對象。Vue 將會遞歸將 data 的屬性轉換為 getter/setter，從而讓 data 的屬性能夠響應數據變化。對象必須是純粹的對象 (含有零個或多個的 key/value 對)：瀏覽器 API 創建的原生對象，原型上的屬性會被忽略。大概來說，data 應該只能是數據 - 不推薦觀察擁有狀態行為的對象。

  一旦觀察過，不需要再次在數據對象上添加響應式屬性。因此推薦在創建實例之前，就聲明所有的根級響應式屬性。

  實例創建之后，可以通過?vm.$data?訪問原始數據對象。Vue 實例也代理了 data 對象上所有的屬性，因此訪問?vm.a?等價于訪問?vm.$data.a。

  以?_?或?$?開頭的屬性?不會?被 Vue 實例代理，因為它們可能和 Vue 內置的屬性、API 方法沖突。你可以使用例如?vm.$data._property?的方式訪問這些屬性。

  當一個組件被定義，data?必須聲明為返回一個初始數據對象的函數，因為組件可能被用來創建多個實例。如果?data?仍然是一個純粹的對象，則所有的實例將共享引用同一個數據對象！通過提供?data?函數，每次創建一個新實例后，我們能夠調用?data?函數，從而返回初始數據的一個全新副本數據對象。

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

• 示例：

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

  注意，如果你為?data?屬性使用了箭頭函數，則?this?不會指向這個組件的實例，不過你仍然可以將其實例作為函數的第一個參數來訪問。

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

• 參考：深入響應式原理

props

• 類型：Array<string> | Object

• 詳細：

  props 可以是數組或對象，用于接收來自父組件的數據。props 可以是簡單的數組，或者使用對象作為替代，對象允許配置高級選項，如類型檢測、自定義驗證和設置默認值。

  你可以基于對象的語法使用以下選項：

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

• 示例：

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

• 參考：Props

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

總結

以上是生活随笔為你收集整理的vue下的props,data的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。