vuejs中data與props有哪些區(qū)別

這篇文章主要講解了“vuejs中data與props有哪些區(qū)別”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vuejs中data與props有哪些區(qū)別”吧！

vuejs中data與props的區(qū)別：1、data不需要用戶（開發(fā)者）傳值，自身維護；而props需要用戶（開發(fā)者）傳值。2、data上的數(shù)據(jù)都是可讀可寫的；而props上的數(shù)據(jù)只可以讀的，無法重新賦值。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

在使用Vue.js的過程中，經(jīng)常會遇到 data和 props。今天就來探索一下二者的區(qū)別。

data

• 類型： Object | Function

• 限制 ：組件的定義只接受 Function
Vue實例的數(shù)據(jù)對象。Vue 將會遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化。對象必須是純粹的對象 (含有零個或多個的 key/value 對)：瀏覽器 API 創(chuàng)建的原生對象，原型上的屬性會被忽略。大概來說，data 應(yīng)該只能是數(shù)據(jù) - 不推薦觀察擁有狀態(tài)行為的對象。
  例：

var data = { a: 1 }

// 直接創(chuàng)建一個實例
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 }
  }
})

props

• 類型：Array<string>| Object
props 可以是數(shù)組或?qū)ο?，用于接收來自父組件的數(shù)據(jù)。props 可以是簡單的數(shù)組，或者使用對象作為替代，對象允許配置高級選項，如類型檢測、自定義驗證和設(shè)置默認值。
  例 ：

// 簡單語法
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
      }
    }
  }
})

兩者的區(qū)別 ：

區(qū)別一：

data不需要用戶（開發(fā)者）傳值，自身維護

props需要用戶（開發(fā)者）傳值

區(qū)別二：

1、data上的數(shù)據(jù)都是可讀可寫的，

2、props上的數(shù)據(jù)只可以讀的，無法重新賦值

感謝各位的閱讀，以上就是“vuejs中data與props有哪些區(qū)別”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對vuejs中data與props有哪些區(qū)別這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！