vue2.6.0知識點梳理

時間 2019-11-08

標籤 vue2.6.0 vue 知識梳理简体版

原文原文鏈接

我的博客地址，有興趣的能夠了解一下。html

Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統

生命週期

注意事項：vue

不要在選項屬性或回調上使用箭頭函數，由於箭頭函數沒有this。
生命週期鉤子的 this 上下文指向調用它的 Vue實例

圖示：webpack

模板語法web

Vue.js 使用了基於 HTML 的模板語法，容許開發者聲明式地將 DOM 綁定至底層 Vue實例的數據。api

在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，Vue 可以智能地計算出最少須要從新渲染多少組件，並把 DOM 操做次數減到最少。數組

指令

Vue的指令有：瀏覽器

v-if
v-else
v-else-if
v-on
v-bind
v-for
v-show
v-once
v-model
v-text
v-html
v-model
v-slot
v-pre
v-cloak

動態參數

從 2.6.0 開始，能夠用方括號括起來的 JavaScript 表達式做爲一個指令的參數：緩存

<a v-bind:[attributeName]="url"> ... </a>
複製代碼

計算屬性和偵聽器

計算屬性

處理複雜的邏輯
計算屬性是基於它們的響應式依賴進行緩存的，在相關響應式依賴發生改變時它們纔會從新求值
默認只有 getter ，不過在須要時你也能夠提供一個 setter

偵聽器

觀察和響應 Vue 實例上的數據變更
當須要在數據變化時執行異步或開銷較大的操做時，這個方式是最有用的。

Class和Style的綁定

對象語法

<div v-bind:class="{ active: isActive }"></div>
複製代碼

綁定的數據對象沒必要內聯定義在模板裏：bash

<div v-bind:class="classObject"></div>
複製代碼

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
複製代碼

CSS 屬性名能夠用駝峯式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：app

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
複製代碼

<div v-bind:style="styleObject"></div>
複製代碼

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
複製代碼

數組語法

<div v-bind:class="[activeClass, errorClass]"></div>
複製代碼

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

複製代碼

也能夠配合使用三元表達式，數組語法中也可使用對象語法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

複製代碼

當 v-bind:style 使用須要添加瀏覽器引擎前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測並添加相應的前綴。

從 2.3.0 起你能夠爲 style 綁定中的屬性提供一個包含多個值的數組，經常使用於提供多個帶前綴的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

複製代碼

這樣寫只會渲染數組中最後一個被瀏覽器支持的值。在本例中，若是瀏覽器支持不帶瀏覽器前綴的 flexbox，那麼就只會渲染 display: flex。

用在組件上

當在一個自定義組件上使用 class 屬性時，這些類將被添加到該組件的根元素上面。這個元素上已經存在的類不會被覆蓋。

條件渲染

`v-if` /`v-else-if` /`v-else`

用 key 管理可複用的元素

`v-show`

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

通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。

不推薦v-if和v-for一塊兒使用，同時存在時，v-for具備更高的優先級。

列表渲染

數組

<li v-for="(item, index) in arr">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

複製代碼

對象

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

複製代碼

在組件上使用

任何數據都不會被自動傳遞到組件裏，由於組件有本身獨立的做用域。爲了把迭代數據傳遞到組件裏，咱們要使用 prop。

不自動將 item 注入到組件裏的緣由是，這會使得組件與 v-for 的運做緊密耦合。明確組件數據的來源可以使組件在其餘場合重複使用。

維護狀態

當 Vue 正在更新使用 v-for 渲染的元素列表時，它默認使用「就地更新」的策略。若是數據項的順序被改變， Vue 將不會移動 DOM 元素來匹配數據項的順序，而是就地更新每一個元素，而且確保它們在每一個索引位置正確渲染。

這個默認的模式是高效的，可是只適用於不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。

爲了給 Vue 一個提示，以便它能跟蹤每一個節點的身份，從而重用和從新排序現有元素，你須要爲每項提供一個惟一 key 屬性

建議儘量在使用 v-for 時提供 key attribute，除非遍歷輸出的 DOM 內容很是簡單，或者是刻意依賴默認行爲以獲取性能上的提高。

事件處理

事件修飾符

.stop
.prevent
.capture
.selt
.once
.passive

按鍵修飾符

.enter
.tab
.delete（捕獲刪除和退格鍵）
.esc
.space
.up
.down
.left
.right

系統修飾符

.ctrl
.alt
.shift
.meta

.exact 修飾符容許你控制由精確的系統修飾符組合觸發的事件。

鼠標按鈕修飾符

.left
.right
.middle

爲何在 HTML 中監聽事件?

你可能注意到這種事件監聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優良傳統。但沒必要擔憂，由於全部的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會致使任何維護上的困難。實際上，使用 v-on 有幾個好處：

掃一眼 HTML 模板便能輕鬆定位在 JavaScript 代碼裏對應的方法。
由於你無須在 JavaScript 裏手動綁定事件，你的 ViewModel 代碼能夠是很是純粹的邏輯，和 DOM 徹底解耦，更易於測試。
當一個 ViewModel 被銷燬時，全部的事件處理器都會自動被刪除。你無須擔憂如何清理它們。

表單輸入綁定

修飾符

.lazy

<!-- 在「change」時而非「input」時更新 -->
<input v-model.lazy="msg" >

複製代碼

.number

自動將用戶的輸入值轉爲數值類型。若是這個值沒法被 parseFloat() 解析，則會返回原始的值。
```
<input v-model.number="age" type="number">

複製代碼
```
.trim

自動過濾用戶輸入的首尾空白字符
```
<input v-model.trim="msg">

複製代碼
```

組件註冊

全局註冊

Vue.component('my-component-name', {
  // ... 選項 ...
})

複製代碼

全局註冊的行爲必須在根 Vue 實例 (經過 new Vue) 建立以前發生

局部註冊

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

複製代碼

局部註冊的組件在其子組件中不可用

Prop

大小寫

當你使用 DOM 中的模板時，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 傳入，你可使用不帶參數的 v-bind (取代 v-bind:prop- name)

post: {
  id: 1,
  title: 'My Journey with Vue'
}

<blog-post v-bind="post"></blog-post>

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

複製代碼

單向數據流

全部的 prop 都使得其父子 prop 之間造成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而致使你的應用的數據流向難以理解。

注意在 JavaScript 中對象和數組是經過引用傳入的，因此對於一個數組或對象類型的 prop 來講，在子組件中改變這個對象或數組自己將會影響到父組件的狀態。

Prop驗證

'null'、'undefind'會經過任何類型的檢查

非Prop的特性

一個非 prop 特性是指傳向一個組件，可是該組件並無相應 prop 定義的特性。

由於顯式定義的 prop 適用於向一個子組件傳入信息，然而組件庫的做者並不總能預見組件會被用於怎樣的場景。這也是爲何組件能夠接受任意的特性，而這些特性會被添加到這個組件的根元素上。

對於絕大多數特性來講，從外部提供給組件的值會替換掉組件內部設置好的值。因此若是傳入 type="text" 就會替換掉 type="date" 並把它破壞！慶幸的是，class 和 style 特性會稍微智能一些，即兩邊的值會被合並起來

若是你不但願組件的根元素繼承特性，你能夠在組件的選項中設置 inheritAttrs: false。

自定義事件

事件名

不一樣於組件和 prop，事件名不存在任何自動化的大小寫轉換。而是觸發的事件名須要徹底匹配監聽這個事件所用的名稱。推薦始終使用 kebab-case 的事件名。

自定義組件使用v-model

一個組件上的 v-model 默認會利用名爲 value 的 prop 和名爲 input 的事件，可是像單選框、複選框等類型的輸入控件可能會將 value 特性用於不一樣的目的。model 選項能夠用來避免這樣的衝突：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

複製代碼

Slot

注意 v-slot 只能添加在一個

編譯做用域

父級模板裏的全部內容都是在父級做用域中編譯的；子模板裏的全部內容都是在子做用域中編譯的。

後備內容

具名插槽

做用域插槽

動態組件/異步組件

在動態組件上使用keep-alive

 <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive> 複製代碼
異步組件

局部註冊的時候，你也能夠直接提供一個返回 Promise 的函數：

new Vue({ // ... components: { 'my-component': () => import('./my-async-component') } }) 複製代碼

全局註冊的時候，你也能夠在工廠函數中返回一個 Promise，因此把 webpack 2 和 ES2015 語法加在一塊兒，咱們能夠寫成這樣：

Vue.component( 'async-webpack-example', // 這個 `import` 函數會返回一個 `Promise` 對象。 () => import('./my-async-component') ) 複製代碼
處理加載狀態

處理邊界狀況

訪問根實例

this.$root

訪問父級組件實例

this.$parent

訪問子組件實例或子元素

你能夠經過 ref 特性爲子組件賦予一個 ID 引用

<base-input ref="usernameInput"></base-input> this.$refs.usernameInput 複製代碼
當 ref 和 v-for 一塊兒使用的時候，你獲得的引用將會是一個包含了對應數據源的這些子組件的數組。

$refs 只會在組件渲染完成以後生效，而且它們不是響應式的。

依賴注入

父組件provide 注入，子組件 inject接受。

程序化的事件偵聽器

循環引用

遞歸組件

組件間的相互引用

模板定義的替代品

內聯模板 inline-template 內聯模板須要定義在 Vue 所屬的 DOM 元素內。

x-template 在一個 <script> 元素中，併爲其帶上 text/x-template 的類型，而後經過一個 id 將模板引用過去 x-template 須要定義在 Vue 所屬的 DOM 元素外。

強制更新

$forceUpdate

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

可用性與組合

混入

自定義指令

渲染函數&JSX

插件

過濾器