再讀一次Vue官方文檔帶來的意外驚喜

時間 2020-01-05

標籤再讀一次 vue 官方文檔帶來意外驚喜简体版

原文原文鏈接

前言

Vue目前算是我用的時間最長的一個框架了,可是最近老是在想,我真的瞭解Vue了嗎,仍是說,僅僅只是會用它而已了呢.
最開始用Vue的時候只是草草看了一遍文檔,細節之處並未關心,以致於後面項目中遇到不少問題以後才又反覆的去查文檔,解決問題.
我認爲,不該該是這樣的,這種程度,僅僅只能讓我有處理問題的能力,雖然經驗讓我再遇到問題的時候知道大概的導向,但這樣永遠不會創建起對Vue技術懷有的自信.
因而,我打算再來一遍官方文檔,記錄其中從不曾瞭解過的東西.在這以後,我便會去嘗試着去讀讀Vue的源碼,並分享出來.

動態參數

<a :[attributeName]="url"> ... </a>css

這裏的 attributeName 會被做爲一個 JavaScript 表達式進行動態求值，求得的值將會做爲最終的參數來使用。例如，若是你的 Vue 實例有一個 data 屬性 attributeName，其值爲 "href"，那麼這個綁定將等價於 v-bind:hrefhtml

注意點:vue

attributeName 應該所有都是小寫
attributeName 若是是經過表達式生成的,那應將其放在計算屬性中,避免直接在HTML中書寫表達式

動態class和style的幾種寫法

class

1. <div v-bind:class="{ 'active': isActive, 'text-danger': hasError }"></div> // 對象語法

  2. <div v-bind:class="classObject"></div>// 對象語法

  3. <div v-bind:class="[{ 'active': isActive }, errorClass]"></div>// 數組語法 

     data: {
     isActive: true,
     hasError: false,
     classObject: {
       active: true,
       'text-danger': false
     },
     errorClass: 'text-danger'
     }

style

1. <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>// 對象語法

  2. <div v-bind:style="styleObject"></div>// 對象語法

  3. <div v-bind:style="[styleObject, styleObject2]"></div>// 數組語法

  data: {
      activeColor: 'red',
    fontSize: 30,
      styleObject: {
      color: 'red',
      fontSize: '13px'
    },
      styleObject2: {
      color: 'blac',
      fontSize: '13px'
    }
  }

v-show

v-show 不支持 <template> 元素，也不支持 v-elsegit

v-for

v-for遍歷對象github

<div v-for="(value, name, index) in object">
      {{ index }}. {{ name }}: {{ value }}
    </div>

Vue沒法檢測的數據變更的狀況

數組數組
1. 當你利用索引直接設置一個數組項時，例如：vm.items[indexOfItem] = newValue
2. 當你修改數組的長度時，例如：vm.items.length = newLength

解決辦法:瀏覽器

使用vm.$set() eg. vm.$set(vm.items, indexOfItem, newValue)
爲數組從新賦值新修改的數組

對象緩存
1. 對象屬性的添加
2. 對象屬性的刪除

解決辦法:框架

爲對象初始一個空的將要添加的對象
使用vm.$set() eg. vm.$set(vm.Obj, keyOfObj, newValue)
使用Object.assign() eg. vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Green'})

事件修飾符

.stop 阻止事件冒泡
.prevent 阻止瀏覽器默認行爲發生
.capture 捕獲冒泡，即有冒泡發生時，有該修飾符的dom元素會先執行，若是有多個，從外到內依次執行，而後再按天然順序執行觸發的事件
.self 將事件綁定到自身，只有自身才能觸發，一般用於避免冒泡事件的影響
.once 設置事件只能觸發一次，好比按鈕的點擊等
.passive 執行瀏覽器的默認行爲

【瀏覽器只有等內核線程執行到事件監聽器對應的JavaScript代碼時，才能知道內部是否會調用preventDefault函數來阻止事件的默認行爲，因此瀏覽器自己是沒有辦法對這種場景進行優化的。這種場景下，用戶的手勢事件沒法快速產生，會致使頁面沒法快速執行滑動邏輯，從而讓用戶感受到頁面卡頓。】
通俗點說就是每次事件產生，瀏覽器都會去查詢一下是否有preventDefault阻止該次事件的默認動做。咱們加上passive就是爲了告訴瀏覽器，不用查詢了，咱們沒用preventDefault阻止默認動做。
這裏通常用在滾動監聽，@scoll，@touchmove 。由於滾動監聽過程當中，移動每一個像素都會產生一次事件，每次都使用內核線程查詢prevent會使滑動卡頓。咱們經過passive將內核線程查詢跳過，能夠大大提高滑動的流暢度

鍵盤按鍵修飾符

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

鼠標按鈕修飾符

.left
.right
.middle

系統修飾鍵

能夠用以下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。dom

.ctrl
.alt
.shift
.meta 對應command 鍵 (⌘)和Windows 徽標鍵 (⊞)
.exact

<!-- 即便 Alt 或 Shift 被一同按下時也會觸發 -->
      <button @click.ctrl="onClick">A</button>
      
      <!-- 有且只有 Ctrl 被按下的時候才觸發 -->
      <button @click.ctrl.exact="onCtrlClick">A</button>
      
      <!-- 沒有任何系統修飾符被按下的時候才觸發 -->
      <button @click.exact="onClick">A</button>

v-model修飾符

.lazy 在「change」時而非「input」時更新
.number 自動將輸入值轉爲number類型
.trim 自動過濾用戶輸入的首尾空白字符

Vue全局導入基礎組件的示例代碼

詳述👉🏻chrisvfritz/vue-enterprise-boilerplate

import ElTableColumnPro from './ElTableColumnPro.vue'
    
    ElTableColumnPro.install = function (Vue) {
        Vue.component(ElTableColumnPro.name, ElTableColumnPro)
    }
    
    if (window.Vue) {
        window.Vue.use(ElTableColumnPro)
    }
    export default ElTableColumnPro

插槽

<!-- 插槽模板 -->
    <div class="container">
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
    <!-- 使用 -->
    <base-layout>
      <template v-slot:header>
        <h1>Here might be a page title</h1>
      </template>
    
      <template v-slot:default>
        <p>A paragraph for the main content.</p>
        <p>And another one.</p>
      </template>
    
      <template v-slot:footer>
        <p>Here's some contact info</p>
      </template>
    </base-layout>

inheritAttrs , $attrs , $listeners

總結一句話: $attrs存儲非prop特性，inheritAttrs控制vue對非prop特性默認行爲

詳述👉🏻Vue inheritAttrs, $attrs,$listeners 詳解

依賴注入 provide 和 inject

// 父組件
    provide: function () {
      return {
        getMap: this.getMap
      }
    }
    // 父組件下的全部組件(子,孫,重孫...)
    inject: ['getMap']

詳述👉🏻Vue的組件通訊之Provide與Inject機制

程序化的事件偵聽器

（懵逼的定義--其實就是建立實例和清除實例放在一塊兒,簡化操做和無用的代碼）

經過 $on(eventName, eventHandler) 偵聽一個事件
經過 $once(eventName, eventHandler) 一次性偵聽一個事件
經過 $off(eventName, eventHandler) 中止偵聽一個事件

詳述👉🏻vue 程序化的事件偵聽器

強制更新 $forceUpdate

若是你發現你本身須要在 Vue 中作一次強制更新，99.9% 的狀況，是你在某個地方作錯了事。

你可能尚未留意到數組和對象的變動檢測注意事項，或者你可能依賴了一個未被 Vue 的響應式系統追蹤的狀態。

然而，若是你已經作到了上述的事項仍然發如今極少數的狀況下須要手動強制更新，那麼你能夠經過 $forceUpdate 來作這件事。

經過 v-once 建立低開銷的靜態組件

渲染普通的 HTML 元素在 Vue 中是很是快速的，但有的時候你可能有一個組件，這個組件包含了大量靜態內容。在這種狀況下，你能夠在根元素上添加 v-once 特性以確保這些內容只計算一次而後緩存起來,並再也不更新. ( 正常狀況下不會用到 )

過渡 transition

哪些組件/元素能夠用?

條件渲染 (使用 v-if)
條件展現 (使用 v-show)
動態組件
組件根節點

過渡類

v-enter：定義進入過渡的開始狀態。
v-enter-active：定義進入過渡生效時的狀態。
v-enter-to: 定義進入過渡的結束狀態。
v-leave: 定義離開過渡的開始狀態。
v-leave-active：定義離開過渡生效時的狀態。
v-leave-to: 定義離開過渡的結束狀態。

對於這些在過渡中切換的類名來講，若是你使用一個沒有名字的，則 `v-` 是這些類名的默認前綴。若是你使用了，那麼 v-enter 會替換爲 my-transition-enter。

過渡模式

in-out：新元素先進行過渡，完成以後當前元素過渡離開。
out-in：當前元素先進行過渡，完成以後新元素過渡進入。

<transition name="fade" mode="out-in"> <!-- ... the buttons ... --> </transition>

自定義過渡類名

enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class

<transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterEnter"
    v-on:enter-cancelled="enterCancelled"
    v-on:before-leave="beforeLeave"
    v-on:leave="leave"
    v-on:after-leave="afterLeave"
    v-on:leave-cancelled="leaveCancelled"
  >
    <!-- ... -->
  </transition>