[VUE系列二]vue官方文件總結和整理

呼啦圖謎發表於2019-04-11
Vue

一、選項/資料

1. data

  • 型別：Object | Function
  • 元件的定義只接受Function
    •  因為元件可能被用來建立多個例項。如果data仍然是一個純粹的物件，則所有的例項將共享引用同一個資料物件！而通過data函式，每次建立一個新例項後，我們能夠呼叫data函式，從而返回初始資料的一個全新副本資料物件。

  • data屬性使用箭頭函式，則this不會指向這個元件的例項

    • 如果你為data屬性使用了箭頭函式，則this不會指向這個元件的例項，不過仍然可以將其例項作為函式的第一個引數來訪問 
    data:vm=>({a:vm.myProp})複製程式碼

    2. props

  • 型別：Array<string> | Object 用於接收來自父元件的資料。
  • 使用物件object有以下選項：
    • type：String、Number、Boolean、Array、Object、Date、Function、Symbol、自定義建構函式
    • default：預設值，物件或陣列的預設值必須從一個工廠函式返回
    • required：Boolean，定義是否是必填項
    • validator：Function，自定義驗證函式
// 物件語法，提供驗證
Vue.component('props-demo-advanced', {
  props: {
    // 檢測型別
    height: Number,
    // 檢測型別 + 其他驗證
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})複製程式碼
  • Prop的大小寫，camelCase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名
Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})複製程式碼
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>複製程式碼
  • 單項資料流
    • 父級prop的更新會向下流動到子元件中，但是反過來不行。所以就意味著不能在子元件內改變prop
    • 使用計算屬性對prop原始值進行轉換
props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}複製程式碼

3. computed

  • 型別：
    {[key : string] : Function  | {get : Function,set : Function}}複製程式碼
  • 計算屬性快取 VS 方法
computed:{
     reverseName:function(){
        return this.name.split('.').reverse().join('.')
     }
 }複製程式碼
methods:{
  reverseName(){
     return this.name.split('.').reverse().join('.')
  }
}複製程式碼

以上兩種方式呼叫都可以達到同樣效果，不同的是計算屬性computed是基於他們的響應式依賴name進行快取的。name還沒有改變，多次訪問reverseName計算屬性會從快取中返回之前的計算結果。而呼叫方法將總會再次執行函式。

  • 計算屬性 VS 偵聽屬性
data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }複製程式碼
 data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }複製程式碼

不能濫用watch，通常更好做法是使用計算屬性而不是命令式的watch回撥

4. method

  • 型別：{ [ key:string ] : Function }
  • 不應該使用箭頭函式來定義method函式，箭頭函式繫結了父級作用域的上下文

5.watch

  • 型別：{ [key:string] : string | Function | Object | Array }
  • 主要用於觀測某個值的變化去完成一段開銷較大的複雜業務邏輯

二、選項/DOM

1.  el

  • 型別：string | Element
  • 可以是css選擇器，也可以是HTMLElement例項
  • 例項掛載之後，可以用vm.$el來訪問
    • 如果例項化時存在這個選項，例項將立即進入編譯過程，否則需要顯示呼叫vm.$mount()手動開啟編譯。
var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// 建立並掛載到 #app (會替換 #app)
new MyComponent().$mount('#app')
// 或者
new MyComponent().$mount(document.querySelector('#app'))複製程式碼

2. template

  • 型別：string
  • 模板將會替換掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發插槽slot
<alert-box>
  Something bad happened.
</alert-box>複製程式碼
Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})複製程式碼

3. render

  • 型別：（createElement:() => VNode）=>VNode

三、選項/生命週期鉤子

1. beforeCreate

  • 型別：Function
  • 例項初始化之後，資料觀測（data observer）和event/watcher事件配置之前被呼叫。

2. created

  • 型別：Function
  • 這一步，例項完成以下配置：資料觀測（data observer），屬性和方法運算，watch/event事件回撥。然而，掛載階段還沒開始，$el屬性目前不可見

3. beforeMount

  • 型別：Function
  • 相關的render函式首次被呼叫

4. mounted

  • 型別：Function
  • el被新建立的vm.$el替換，並掛載到例項上去之後呼叫該鉤子。
  • 注意mounted不會承諾所有的子元件也都一起被掛載。如果希望等到整個檢視都渲染完畢，可以用vm.$nextTick替換掉mounted

5. beforeUpdate

  • 型別：Function
  • 相關的render函式首次被呼叫


相關文章