初識Vue 嘗試理解vue API的第一天

vue選項/數據

data

props

• 類型: Object | Function

• 限制: 組件的定義只接收function

• 詳細:

  • Vue實例的數據對象.Vue將會遞歸將data的property轉換爲getter/swetter,從而讓data的property可以響應數據變化.對象必須是純粹的對象(含有零個或多個key/value對) 瀏覽器API建立的原生對象, 原型上的property會被忽略.大概來講,data應該只能是數據- 不推薦觀察擁有狀態行爲的對象.

  • 一旦觀察過,你就沒法在根數據對象上添加響應式property.所以推薦在建立實例以前,就聲明全部的根級響應式property.

  • 建立實例以後,能夠經過 vm.$data 訪問原始數據對象. Vue實例也代理了data對象上全部的property,所以訪問vm.a等價於訪問vm.$data.a

  • 以_或 data._property`的方式訪問這些property.

  • 當一個組件被定義,ata必須聲明爲返回一個初始數據對象的函數,由於組件可能被用來建立多個實例.若是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.extended({
            data() {
                return {
                    a: 1
                }
            },
        })

複製代碼

• 深刻響應式原理cn.vuejs.org/v2/guide/re…

propsData

• 類型: Array<string> | Object
• 詳細 : props 能夠是數組或對象,用於接受來自父組件的數據.props能夠是簡單的數組,或者使用對象做爲替代,對象容許配置高級選項,如類型檢測 自定義驗證 和設置默認值 你能夠給予對象的語法使用如下選項 :

  • type : 能夠是下列原生構造函數中的一種:String Number Boolean Array Object Date Function Symbol 任何自定義構造函數 或上述內容組成的數組.會檢查一個prop是不是給定的
    類型,不然拋出警告.

  • defalut: any 爲該prop指定一個默認值.若是改prop沒有被傳入,則換作用這個值.對象或數組的默認值必須從一個工廠函數返回

  • required : Boolean 定義該prop是不是必填項.在非生產環境中,若是這個值爲truthy且該prop沒有被傳入的,則一個控制檯警告將會被拋出.

  • validator : Function 自定義驗證函數會將該prop值做爲惟一參數帶入.在非生產環境下,若是該函數返回一個falsy的值(驗證失敗),一個控制檯警告將會被拋出.

  • 示例

//簡單語法
    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
                }
            }
         }
    })
複製代碼

• 深刻了解propcn.vuejs.org/v2/guide/co…

propsData

• 類型 : { [ key: string ] : any }
• 限制 : 只用於new 建立的實例中.
• 詳細:
  • 建立實例時傳遞props.主要做用是方便測試
• 示例:

var Comp  =Vue.extend({
    props:[ ' msg ' ],
    template: ' <div> {{ msg }} </div> ' 
})

var vm  = new Comp( { 
    propsData :｛
        msg : ' hello ' 
    ｝
})
複製代碼

computed

• 類型 : { [ key : string ] : Function ｜ { get : Function, set : Function }  }

• 詳細 :

  • 計算屬性將被混入到Vue實例中. 全部getter和setter的this上下文自動地綁定爲Vue實例.
  • 注意若是你爲一個計算屬性使用了箭頭函數,則this 不會指向這個組件的實例, 不過你仍然能夠將其實例在uowei函數的第一個參數來訪問.

  computed: { 
  aDouble : vm => vm.a * ２
  }  
  複製代碼

  ＊計算屬性的結果會被緩存，除非依賴的響應式property變化纔會從新計算. 注意,若是某個依賴(好比響應式property)在該實例範疇以外,則計算屬性不會被更新的

  • 示例

var vm = new Vue({
            data: {
                a: 1
            },
            computed: {
                //僅讀取
                aDouble: function() {
                    return this.a * 2
                },
                // 讀取和設置
                aPlus: {
                    get: function() {
                        return this.a + 1
                    },
                    set: function() {
                        this.a = v - 1
                    }
                }
            },
        })
        vm.aPlus //2
        vm.aPlus //3
        vm.a //2
        vm.avm.aDouble //2
複製代碼

第一次寫博客 md也不是很熟練 就想試着寫一下 若有錯誤望指出 謝謝0.0