Vue整理(1.0.0)

恰丶如其分發表於2019-03-05
Vue
元件生命週期

  • 如圖示：

    image
    image

  • 元件巢狀時生命週期


beforeCreate-parent
created-parent      
//已經可以獲取data資料，dom還未渲染，不可進行dom操作；需要操作dom，寫在nextTick()回撥函式中
beforeMount-parent  //建立了dom結構，繫結的資料還未被替換

beforeCreate-children
created-children     //可以獲取父元件傳遞過來的值
beforeMount-children
mounted-children   //子元件編譯為dom結構

mounted-parent     //父元件編譯為dom結構，資料繫結替換
//所有dom掛載和渲染都已經完成，可進行dom操作
複製程式碼

vue生命週期在真實場景下的業務應用

  • created：進行ajax請求非同步資料的獲取、初始化資料
  • mounted：掛載元素內dom節點的獲取
  • nextTick：針對單一事件更新資料後立即操作dom
  • updated：任何資料的更新，如果要做統一的業務邏輯處理
  • watch：監聽具體資料變化，並做相應的處理，執行非同步或開銷比較大的處理時
元件通訊
  • 父傳子
    • props
      • 子元件可以響應父元件資料變化
      • 子元件不能修改資料(單向資料流)
  • 子傳父
    • 事件傳遞
      • 子元件發射事件：$emit('send-event')，父元件註冊@send-event="fn"
      • 通過props傳遞一個父元件的回撥函式到子元件
  • 兄弟元件
    • 事件匯流排方法
      • 使用一個共同的eventBusVue物件
//event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

//main.js
Vue.prototype.$EventBus = new Vue()
複製程式碼
元件全域性註冊
Vue.component('my-component-name', {
  // ... 選項 ...
  data: function(){
      return {
          
      }
  }
})
全域性註冊的元件可以用在其被註冊之後的任何通過new Vue建立的例項中
複製程式碼
元件區域性註冊
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

複製程式碼
模組系統中註冊
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

複製程式碼
【Vue外掛寫法】
  • 宣告外掛
  • 寫外掛
  • 註冊外掛
  • 使用外掛
1.外掛註冊
// 呼叫 `MyPlugin.install(Vue)`
//在根例項之前註冊外掛
import MyPlugin from './MyPlugin.js'
Vue.use(MyPlugin)

new Vue({
  //... options
})
複製程式碼
2.自定義外掛寫法
//自定義外掛提供一下四種寫法

MyPlugin.install = function (Vue, options) {
  
  // 1. 新增全域性方法或屬性
  Vue.myGlobalMethod = function () {
    // 邏輯...
  }

  // 2. 新增全域性資源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })

  // 3. 注入元件
  Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })

  // 4. 新增例項方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 邏輯...
  }
}
複製程式碼

相關文章