文章目錄

• 過渡 & 動畫
• • Transition 組件
  • • 基于 CSS 的過渡效果
    • • CSS 過渡類名 class
      • 為過渡效果命名
      • CSS 過渡 transition
      • • 實例1：
        • 實例2：
      • CSS 動畫
      • 自定義過渡的類名
      • 同時使用 transition 和 animation
      • 深層級過渡與顯式過渡時長
      • 性能考量
    • JavaScript 動畫
    • 可復用過渡效果
    • 出現時過渡
    • 元素間過渡
    • 過渡模式
    • 組件間過渡
    • 動態過渡
  • TransitionGroup 組件
  • • 和 `<Transition>` 的區別
    • 列表的進入 / 離開動畫
    • 移動動畫
  • 動畫技巧
  • • 基于 CSS class 的動畫
    • 狀態驅動的動畫
    • 基于偵聽器的動畫
• 混入 mixin
• • 概念
  • Mixin和Vuex的區別？
  • 注冊混入
  • 選項合并
  • mixin的優缺點
  • [組合式API 和 Mixin 的對比](https://cn.vuejs.org/guide/reusability/composables.html#comparisons-with-other-techniques)
• 插件
• • 插件的功能
  • 使用插件
  • 開發插件
• 自定義指令
• • 指令介紹
  • 注冊指令
  • 指令鉤子函數與參數
  • • 鉤子函數
    • 鉤子函數參數
  • 注冊指令的兩種方式
  • • 配置對象
    • 函數簡寫
  • 對象字面量
  • 在組件上使用
  • 指令函數中的this
  • 實例
• 渲染函數 render
• • 虛擬 DOM
  • 渲染管線
  • 模板 vs. 渲染函數
  • 創建虛擬DOM
  • • render函數使用方式
    • 深入數據對象
  • 使用render函數創建組件
  • • 訪問this
    • 單個根標簽
    • VNode 必須唯一
  • render函數的應用
• MVVM
• • MVVM 模型
  • MVVM思想有兩個方向
  • MVC 和 MVVM 的區別(關系)
  • 常見關于Vue的面試題
• 響應式原理
• • 數據代理
  • 模擬響應式的實現
  • Vue中的數據代理
  • 響應式原理
  • 總結
• 響應式屬性
• • vue的響應式屬性
  • 檢測對象的屬性的變化
  • 檢測數組元素值的變化
  • • 檢測數組
    • 替換數組

過渡 & 動畫

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。包括以下工具：

• 在 CSS 過渡和動畫中自動應用 class
• 可以配合使用第三方 CSS 動畫庫，如 Animate.css
• 在過渡鉤子函數中使用 JavaScript 直接操作 DOM
• 可以配合使用第三方 JavaScript 動畫庫，如 anime.js

Vue 提供了兩個內置組件，可以幫助你制作基于狀態變化的過渡和動畫：

• <Transition> 會在一個元素或組件進入和離開 DOM 時應用動畫。
• <TransitionGroup> 會在一個 v-for 列表中的元素或組件被插入，移動，或移除時應用動畫。

除了這兩個組件，我們也可以通過其他技術手段來應用動畫，比如切換 CSS class 或用狀態綁定樣式來驅動動畫。這些其他的方法會在動畫技巧章節中展開。

Transition 組件

<Transition> 是一個內置組件，這意味著它在任意別的組件中都可以被使用，無需注冊。它可以將進入和離開動畫應用到通過默認插槽傳遞給它的單個元素或組件上。進入或離開可以由以下的條件之一觸發：

• 由 v-if 所觸發的切換

• 由 v-show 所觸發的切換

• 由特殊元素 <component> 切換的動態組件

• 組件根節點

當一個 <Transition> 組件中的元素被插入或移除時，會發生下面這些事情：

Vue 會自動檢測目標元素是否應用了 CSS 過渡或動畫。如果是，則一些 CSS 過渡類名 class 會在適當的時機被添加和移除。

如果有作為監聽器的 JavaScript 鉤子，這些鉤子函數會在適當時機被調用。

如果沒有探測到 CSS 過渡或動畫、也沒有提供 JavaScript 鉤子，那么 DOM 的插入、刪除操作將在瀏覽器的下一個動畫幀后執行。

基于 CSS 的過渡效果

CSS 過渡類名 class

在進入/離開的過渡中，一共有 6 個應用于進入與離開過渡效果的 CSS class。

v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之后的下一幀移除。

v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。

v-enter-to：定義進入過渡的結束狀態。在元素被插入之后下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之后移除。

v-leave：定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。

v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。

v-leave-to：定義離開過渡的結束狀態。在離開過渡被觸發之后下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之后移除。

對于進入動畫：

.v-enter.v-enter-to.v-enter-active

定義過渡的開始狀態	定義過渡的結束狀態	定義過渡生效時的狀
插入之前生效	插入之后下—幀生效（同時v-enter被移除）	動畫整個過程生效
下—幀被移除	動畫完成之后移除	動畫整個過程生效

對于離開動畫：

.v-leave.v-leave-to.v-leave-active

定義過渡的開始狀態	定義過渡的結束狀態	定義過渡生效時的狀態
離開過渡被觸發時立即生效	觸發之后下一幀生效（與此同時v-leave被刪除）	整個離開過渡的階段中應用
下—幀被移除	動畫完成之后移除	整個離開過渡的階段中應用

為過渡效果命名

我們可以給 <Transition> 組件傳一個 name prop 來聲明一個過渡效果名：

<Transition name="fade">... </Transition>

對于這些在過渡中切換的類名來說，如果你使用一個沒有名字的 <transition>，則 v- 是這些類名的默認前綴。

如果你使用了一個有名字的過渡效果 <transition name="fade">，對它起作用的過渡 class 會以其名字而不是 v 作為前綴。比如，上方例子中被應用的 class v-enter-active 會替換為 fade-enter-active 。

這個“fade”過渡的 class 應該是這樣：

.fade-enter-active, .fade-leave-active {transition: opacity 0.5s ease; }.fade-enter, .fade-leave-to {opacity: 0; }

CSS 過渡 transition

<Transition> 一般都會搭配原生 CSS 過渡一起使用，配和 transition CSS 屬性是，使我們可以一次定義一個過渡的各個方面，包括需要執行動畫的屬性、持續時間和速度曲線。

實例1：

使用按鈕控制標簽的顯示隱藏：

<div id="app"><button @click="show = !show">show:{{show}}</button><transition name="fade"><p v-show="show">hello vue!</p></transition></div><script>new Vue({el: '#app',data: {show: true,},}); </script>

添加進入和離開的動畫：

/* 離開的動畫 */ /* 1、離開的開始狀態 opacity為1是標簽的默認值，只要是默認值可以省略 */ .fade-leave{opacity: 1; } /* 2、離開的結束狀態 opacity為0 */ .fade-leave-to{opacity: 0; } /* 3、離開的整個過程，添加過渡屬性 transition */ .fade-leave-active{transition: opacity 10s linear; } /* 進入的動畫 */ /* 1、進入的開始狀態 opacity為0 */ .fade-enter{opacity: 0; } /* 2、進入的結束狀態 opacity為1，也是默認值，也可以省略 */ .fade-enter-to{opacity: 1; } /* 3、進入的整個過程，添加過渡屬性 transition */ .fade-enter-active{transition: opacity 10s linear; }

省略默認樣式，合并相同樣式：

/* 把默認的樣式省略，再把相同的樣式屬性的類名合并 */ .fade-leave-to, .fade-enter {opacity: 0; }.fade-leave-active, .fade-enter-active {transition: opacity 3s linear; }

實例2：

下面是一個更高級的例子，它使用了不同的持續時間和速度曲線來過渡多個屬性：

<Transition name="slide-fade"><p v-if="show">hello</p> </Transition> /*進入和離開動畫可以使用不同持續時間和速度曲線。 */ .slide-fade-enter-active {transition: all 0.3s ease-out; }.slide-fade-leave-active {transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1); }.slide-fade-enter, .slide-fade-leave-to {transform: translateX(20px);opacity: 0; }

CSS 動畫

原生 CSS 動畫和 CSS transition 的應用方式基本上是相同的，只有一點不同，那就是 *-enter 不是在元素插入后立即移除，而是在一個 animationend 事件觸發時被移除。

對于大多數的 CSS 動畫，我們可以簡單地在 *-enter-active 和 *-leave-active class 下聲明它們。下面是一個示例：

使用按鈕控制標簽的顯示和隱藏：

<div id="app"><button @click="show = !show">show:{{show}}</button><transition name="bounce"><p v-show="show" ref="p">動畫</p></transition> </div>

設置關鍵幀動畫只需要設置leave-active和enter-active樣式，不需要設置leave和leave-to以及enter和enter-to：

/*元素出來時的動畫*/ .bounce-enter-active {animation: bounce-in 0.5s; } /*元素離開時的動畫*/ .bounce-leave-active {animation: bounce-in 0.5s reverse; } @keyframes bounce-in {0% {transform: scale(0);}50% {transform: scale(1.25);}100% {transform: scale(1);} }

自定義過渡的類名

你也可以向 <Transition> 傳遞以下的 props 來指定自定義的過渡 class：

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

你傳入的這些 class （他們的優先級高于普通的類名）會覆蓋相應階段的默認 class 名。這個功能在你想要在 Vue 的動畫機制下集成其他的第三方 CSS 動畫庫時非常有用，比如 Animate.css：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"><transition name="move"leave-active-class="animate__animated animate__bounceOut"enter-active-class="animate__animated animate__bounceIn" ><div class="box" v-show="show">自定義動畫名</div> </transition>

同時使用 transition 和 animation

Vue 需要附加事件監聽器，以便知道過渡何時結束。可以是 transitionend 或 animationend，這取決于你所應用的 CSS 規則。如果你僅僅使用二者的其中之一，Vue 可以自動探測到正確的類型。

然而在某些場景中，你或許想要在同一個元素上同時使用它們兩個。舉例來說，Vue 觸發了一個 CSS 動畫，同時鼠標懸停觸發另一個 CSS 過渡。此時你需要顯式地傳入 type prop 來聲明，告訴 Vue 需要關心哪種類型，傳入的值是 animation 或 transition：

<Transition type="animation">...</Transition>

深層級過渡與顯式過渡時長

盡管過渡 class 僅能應用在 <Transition> 的直接子元素上，我們還是可以使用深層級的 CSS 選擇器，在深層級的元素上觸發過渡效果。

<Transition name="nested"><div v-if="show" class="outer"><div class="inner">Hello</div></div> </Transition> /* 應用于嵌套元素的規則 */ .nested-enter-active .inner, .nested-leave-active .inner {transition: all 0.3s ease-in-out; }.nested-enter-from .inner, .nested-leave-to .inner {transform: translateX(30px);opacity: 0; }/* ... 省略了其他必要的 CSS */

我們甚至可以在深層元素上添加一個過渡延遲，從而創建一個帶漸進延遲的動畫序列：

/* 延遲嵌套元素的進入以獲得交錯效果 */ .nested-enter-active .inner {transition-delay: 0.25s; }

然而，這會帶來一個小問題。默認情況下，<Transition> 組件會通過監聽過渡根元素上的第一個 transitionend 或者 animationend 事件來嘗試自動判斷過渡何時結束。而在嵌套的過渡中，期望的行為應該是等待所有內部元素的過渡完成。

在這種情況下，你可以通過向 <Transition> 組件傳入 duration prop 來顯式指定過渡的持續時間 (以毫秒為單位)。總持續時間應該匹配延遲加上內部元素的過渡持續時間：

<Transition :duration="550">...</Transition>

如果有必要的話，你也可以用對象的形式傳入，分開指定進入和離開所需的時間：

<Transition :duration="{ enter: 500, leave: 800 }">...</Transition>

性能考量

你可能注意到我們上面例子中展示的動畫所用到的 CSS 屬性大多是 transform 和 opacity 之類的。用這些屬性制作動畫非常高效，因為：

他們在動畫過程中不會影響到 DOM 結構，因此不會每一幀都觸發昂貴的 CSS 布局重新計算。

大多數的現代瀏覽器都可以在執行 transform 動畫時利用 GPU 進行硬件加速。

相比之下，像 height 或者 margin 這樣的屬性會觸發 CSS 布局變動，因此執行它們的動畫效果更昂貴，需要謹慎使用。我們可以在 CSS-Triggers 這類的網站查詢哪些屬性會在執行動畫時觸發 CSS 布局變動。

JavaScript 動畫

你可以通過監聽 <Transition> 組件事件的方式在過渡過程中掛上鉤子函數：

<transition @before-enter="onBeforeEnter"@enter="onEnter"@after-enter="onAfterEnter"@enter-cancelled="onEnterCancelled"@before-leave="onBeforeLeave"@leave="onLeave"@after-leave="onAfterLeave"@leave-cancelled="onLeaveCancelled" ><!-- ... --> </transition> // ... methods: {// 在元素被插入到 DOM 之前被調用// 用這個來設置元素的 "enter-from" 狀態onBeforeEnter(el) {},// 在元素被插入到 DOM 之后的下一幀被調用// 用這個來開始進入動畫// el：是要做動畫的元素對象，// done：是一個函數，是動畫結束時的回調函數onEnter(el, done) {// 調用回調函數 done 表示過渡結束// 如果與 CSS 結合使用，則這個回調是可選參數done()},// 當進入過渡完成時調用。onAfterEnter(el) {},onEnterCancelled(el) {},// 在 leave 鉤子之前調用// 大多數時候，你應該只會用到 leave 鉤子onBeforeLeave(el) {},// 在離開過渡開始時調用// 用這個來開始離開動畫onLeave(el, done) {// 調用回調函數 done 表示過渡結束// 如果與 CSS 結合使用，則這個回調是可選參數done()},// 在離開過渡完成、// 且元素已從 DOM 中移除時調用onAfterLeave(el) {},// 僅在 v-show 過渡中可用onLeaveCancelled(el) {}}

這些鉤子可以與 CSS 過渡或動畫結合使用，也可以單獨使用。

在使用僅由 JavaScript 執行的動畫時，最好是添加一個 :css="false" prop。這顯式地向 Vue 表明可以跳過對 CSS 過渡的自動探測。除了性能稍好一些之外，還可以防止 CSS 規則意外地干擾過渡效果。

<Transition...:css="false" >... </Transition>

在有了 :css="false" 后，我們就自己全權負責控制什么時候過渡結束了。**這種情況下對于 @enter 和 @leave 鉤子來說，必須使用 done進行回調。**否則，鉤子將被同步調用，過渡將立即完成。

動畫實例：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <style>p {width: 100px;height: 100px;margin-left: 100px;margin-top: 100px;background-color: red;position: relative;} </style><div id="app"><button @click="show = !show">toggle:{{show}}</button><transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave" @leave="leave" v-bind:css="false"><p v-show="show">hello</p></transition> </div><script>var app = new Vue({el: '#app',data: {show: true,},methods: {// 離開的動畫beforeLeave(el) {console.log('離開之前');$(el).css({ transform: 'scale(0.8)' });},leave(el, done) {console.log('正在離開');$(el).animate({ left: 300}, 200, function () {$(this).css({ top: -200, left: 0 });done();});},// 進入的動畫beforeEnter(el) {console.log('進入之前');$(el).css({ transform: 'scale(1)' });},enter(el, done) {console.log('進入中');$(el).animate({ top: 0 }, 200, function () {done();});},},}); </script>

可復用過渡效果

得益于 Vue 的組件系統，過渡效果是可以被封裝復用的。要創建一個可被復用的過渡，我們需要為 <Transition> 組件創建一個包裝組件，并向內傳入插槽內容：

<!-- MyTransition.vue --> <script> // JavaScript 鉤子邏輯... </script><template><!-- 包裝內置的 Transition 組件 --><Transitionname="my-transition"@enter="onEnter"@leave="onLeave"><slot></slot> <!-- 向內傳遞插槽內容 --></Transition> </template><style> /*必要的 CSS...注意：避免在這里使用 <style scoped>因為那不會應用到插槽內容上 */ </style>

現在 MyTransition 可以在導入后像內置組件那樣使用了：

<MyTransition><div v-if="show">Hello</div> </MyTransition>

出現時過渡

如果你想在某個節點初次渲染時應用一個過渡效果，你可以添加 appear prop：

<Transition appear>... </Transition>

這里默認和進入/離開過渡一樣，同樣也可以自定義 CSS 類名。

<transitionappearappear-class="custom-appear-class"appear-to-class="custom-appear-to-class"appear-active-class="custom-appear-active-class" ><!-- ... --> </transition>

自定義 JavaScript 鉤子：

<transitionappearv-on:before-appear="customBeforeAppearHook"v-on:appear="customAppearHook"v-on:after-appear="customAfterAppearHook"v-on:appear-cancelled="customAppearCancelledHook" ><!-- ... --> </transition>

在上面的例子中，無論是 appear attribute 還是 v-on:appear 鉤子都會生成初始渲染過渡。

元素間過渡

除了通過 v-if / v-show 切換一個元素，我們也可以通過 v-if / v-else / v-else-if 在幾個組件間進行切換，只要確保任一時刻只會有一個元素被渲染即可：

<div id="app"><div class="btn-container"><transition name="slide-up"><button v-if="show" key="save" @click="show=!show">Save</button><button v-else key="edit" @click="show=!show">Edit</button></transition></div> </div><script>new Vue({el: '#app',data: {show: true,},}); </script>

可以這樣使用，但是有一點需要注意：

當有相同標簽名的元素切換時，需要通過 key attribute 設置唯一的值來標記以讓 Vue 區分它們，否則 Vue 為了效率只會替換相同標簽內部的內容。即使在技術上沒有必要，給在 <transition> 組件中的多個元素設置 key 是一個更好的實踐。

.btn-container {margin-top: 30px;position: relative; }/* 在“Save”按鈕和“Edit”按鈕的過渡中，兩個按鈕都被重繪了，一個離開過渡的時候另一個開始進入過渡。 這是 <transition> 的默認行為 - 進入和離開同時發生。 需要給button添加定位，否則二者同時存在時出現的布局問題。 */ button {position: absolute; }.slide-up-enter-active, .slide-up-leave-active {transition: all .25s ease-out; }.slide-up-enter {opacity: 0;transform: translateY(30px); } .slide-up-leave-to {opacity: 0;transform: translateY(-30px); }

過渡模式

在上前的例子中，進入和離開的元素都是在同時開始動畫的，因此我們不得不將它們設為 position: absolute 以避免二者同時存在時出現的布局問題。

然而，很多情況下同時生效的進入和離開的過渡可能并不符合需求。我們可能想要先執行離開動畫，然后在其完成之后再執行元素的進入動畫。手動編排這樣的動畫是非常復雜的，好在Vue 提供了過渡模式，可以通過向 <Transition> 傳入一個 mode prop 來實現這個行為：

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

<Transition mode="out-in">... </Transition>

將之前的例子改為 mode="out-in" 后是這樣：

<div class="btn-container"><transition name="slide-up" mode="out-in"><button v-if="show" key="save" @click="show=!show">Save</button><button v-else key="edit" @click="show=!show">Edit</button></transition> </div>

in-out 模式不是經常用到，但對于一些稍微不同的過渡效果還是有用的：

<div class="btn-container"><transition name="slide-up" mode="out-in"><button v-if="show" key="save" @click="show=!show">Save</button><button v-else key="edit" @click="show=!show">Edit</button></transition> </div>

組件間過渡

<Transition> 也可以作用于動態組件之間的切換，多個組件的過渡簡單很多 - 我們不需要使用 key ：

<div id="app"><button @click="view = view=='v-a' ? 'v-b' : 'v-a' ">view：{{view}}</button><transition name="fade" mode="out-in"><component :is="view"></component></transition> </div><script>new Vue({el: '#app',data () {return {view: 'v-a'}},components: {'v-a': {template: '<div>Component A</div>'},'v-b': {template: '<div>Component B</div>'}}}); </script><style>.fade-enter-active,.fade-leave-active {transition: opacity .3s ease;}.fade-enter,.fade-leave-to {opacity: 0;} </style>

動態過渡

<Transition> 的 props (比如 name) 也可以是動態的！這讓我們可以根據狀態變化動態地應用不同類型的過渡：

<Transition :name="transitionName"><!-- ... --> </Transition>

這個特性的用處是可以提前定義好多組 CSS 過渡或動畫的 class，然后在它們之間動態切換。

你也可以根據你的組件的當前狀態在 JavaScript 過渡鉤子中應用不同的行為。最后，創建動態過渡的終極方式還是創建可復用的過渡組件，并讓這些組件根據動態的 props 來改變過渡的效果。掌握了這些技巧后，就真的只有你想不到，沒有做不到的了。

TransitionGroup 組件

<TransitionGroup> 是一個內置組件，用于對 v-for 列表中的元素或組件的插入、移除和順序改變添加動畫效果。

和 <Transition> 的區別

<Transition>可以實現的過渡效果：

• 單個節點
• 同一時間渲染多個節點中的一個

那么怎么同時渲染整個列表，比如使用 v-for？在這種場景中，使用 <transition-group> 組件。

<TransitionGroup> 支持和 <Transition> 基本相同的 props、CSS 過渡 class 和 JavaScript 鉤子監聽器，但有以下幾點區別：

• 不同于 <transition>，它會以一個真實元素呈現：默認為一個 <span>。但你可以通過傳入 tag prop 來更換為其他元素作為容器元素來渲染。
• 過渡模式在這里不可用，因為我們不再是在互斥的元素之間進行切換。
• 列表中的每個元素都必須有一個獨一無二的 key attribute。
• CSS 過渡 class 會被應用在列表內的元素上，而不是容器元素上。

列表的進入 / 離開動畫

這里是 <TransitionGroup> 對一個 v-for 列表添加進入 / 離開動畫的示例：

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script><div id="app"><button @click="insert">添加</button><button @click="remove">移除</button><button @click="reset">重置</button><button @click="shuffle">隨機排序</button><transition-group tag="ul" name="list" class="list"><li v-for="item in items" class="item" :key="item">{{ item }}</li></transition-group> </div> <script>new Vue({el: '#app',data: {items: [1, 2, 3, 4, 5, 6],nextNum: 10,},methods: {randomIndex: function () {return Math.floor(Math.random() * this.items.length);},insert() {this.items.splice(this.randomIndex(), 0, this.nextNum++);},remove(item) {this.items.splice(this.randomIndex(), 1);},reset() {this.items = [1, 2, 3, 4, 5, 6];},shuffle() {this.items = _.shuffle(this.items);console.log(this.items);},},}); </script> .list-enter-active, .list-leave-active {transition: all 0.5s ease; } .list-enter, .list-leave-to {opacity: 0;transform: translateX(30px); }

這個例子有個問題，當添加和移除元素的時候，周圍的元素會瞬間移動到他們的新布局的位置，而不是平滑的過渡，我們下面會解決這個問題。

移動動畫

上面的示例有一些明顯的缺陷：當某一項被插入或移除時，它周圍的元素會立即發生“跳躍”而不是平穩地移動。我們可以通過添加一些額外的 CSS 規則來解決這個問題，這需要用到 v-move class。

<transition-group> 組件還有一個特殊之處。不僅可以進入和離開動畫，還可以改變定位。要使用這個新功能只需了解新增的 v-move class，它會在元素的改變定位的過程中應用。像之前的類名一樣，可以通過 name attribute 來自定義前綴，也可以通過 move-class prop手動設置。

v-move 對于設置過渡的切換時機和過渡曲線非常有用，你會看到如下的例子：

.list-enter-active, .list-leave-active {transition: all .5s ease; } .list-enter, .list-leave-to {opacity: 0;transform: translateX(30px); } /* 對移動中的元素應用的過渡 */ .list-move {transition: all 0.5s ease; } /* 確保將離開的元素從布局流中刪除，以便能夠正確地計算移動的動畫。 */ .list-leave-active {position: absolute; }

現在它看起來好多了，甚至對整個列表執行洗牌的動畫也都非常流暢。

這個看起來很神奇，內部的實現，Vue 使用了一個叫 FLIP 簡單的動畫隊列使用 transforms 將元素從之前的位置平滑過渡新的位置。

需要注意的是使用 FLIP 過渡的元素不能設置為 display: inline 。作為替代方案，可以設置為 display: inline-block 或者放置于 flex 中。

動畫技巧

Vue 提供了 Transition 和 TransitionGroup 組件來處理元素進入、離開和列表順序變化的過渡效果。但除此之外，還有許多其他制作網頁動畫的方式在 Vue 應用中也適用。這里我們會探討一些額外的技巧。

基于 CSS class 的動畫

對于那些不是正在進入或離開 DOM 的元素，我們可以通過給它們動態添加 CSS class 來觸發動畫：

<div id="app"><div :class="{ shake: disabled }"><button @click="warnDisabled">Click me</button><span v-if="disabled">This feature is disabled!</span></div> </div> <script>new Vue({el: '#app',data: {disabled: false,},methods: {warnDisabled() {this.disabled = true;setTimeout(() => {this.disabled = false;}, 1500);},},}); </script> <style>.shake {animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform: translate3d(0, 0, 0);}@keyframes shake {10%,90% {transform: translate3d(-1px, 0, 0);}20%,80% {transform: translate3d(2px, 0, 0);}30%,50%,70% {transform: translate3d(-4px, 0, 0);}40%,60% {transform: translate3d(4px, 0, 0);}} </style>

狀態驅動的動畫

有些過渡效果可以通過動態插值來實現，比如在交互時動態地給元素綁定樣式。看下面這個例子：

<style>.movearea {border-radius: 10px;padding: 10px;cursor: pointer;transition: 0.3s background-color ease;} </style><div id="app"><div @mousemove="onMousemove" :style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }" class="movearea"><p>移動你的鼠標穿過這個div...</p><p>x: {{ x }}</p></div> </div><script>new Vue({el: '#app',data: {x: 0,},methods: {onMousemove(e) {this.x = e.clientX;},},}); </script>

除了顏色外，你還可以使用樣式綁定 CSS transform、寬度或高度。你甚至可以通過運用彈性物理模擬為 SVG 添加動畫，畢竟它們也只是 attribute 的數據綁定：

SVG動畫

基于偵聽器的動畫

通過發揮一些創意，我們可以基于一些數字狀態，配合偵聽器給任何東西加上動畫。例如，我們可以將數字本身變成動畫：

<script src="https://cdn.bootcdn.net/ajax/libs/gsap/3.11.3/gsap.min.js"></script><style>.big-number {font-weight: bold;font-size: 2em;} </style><div id="app">Type a number: <input v-model.number="number" /><p>{{ tweened.toFixed(0) }}</p> </div><script>new Vue({el: '#app',data: {number: 0,tweened: 0,},watch: {number(n) {gsap.to(this, { duration: 0.5, tweened: Number(n) || 0 });},},}); </script>

混入 mixin

概念

混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。

可以把混入理解為：將組件的公共邏輯或者配置提取出來，哪個組件需要用到時，直接將提取的這部分混入到組件內部即可。這樣既可以減少代碼冗余度，也可以讓后期維護起來更加容易。

這里需要注意的是：提取的是邏輯或配置，而不是HTML代碼和CSS代碼。mixin就是組件中的組件（組件配置的一部分），Vue組件化讓我們的代碼復用性更高，那么組件與組件之間還有重復部分，我們使用Mixin在抽離一遍。

Mixin和Vuex的區別？

上面一點說Mixin就是一個抽離公共部分的作用。在Vue中，Vuex狀態管理似乎也是做的這一件事，它也是將組件之間可能共享的數據抽離出來。兩者看似一樣，實則還是有細微的區別，區別如下：

• Vuex公共狀態管理，如果在一個組件中更改了Vuex中的某個數據，那么其它所有引用了Vuex中該數據的組件也會跟著變化。
• Mixin中的數據和方法都是獨立的，組件之間使用后是互相不影響的。

注冊混入

混入分為全局混入和局部混入：

• 注冊全局混入：Vue.directive(混入對象)

• 注冊局部混入：new Vue{ mixins:[混入對象1, 混入對象2, ...], }

混入對象：

• 混入對象和Vue的實例一樣包含實例選項：data、methods、computed、聲明周期鉤子等，這些選項將會被合并到最終的選項中。也就是說，如果你的混入包含一個 created 鉤子，而創建組件本身也有一個，那么兩個函數都會被調用。

// 定義混入對象 const myMixin1 = {created: function () {console.log('hello from myMixin1!')}, }const myMixin2 = {created: function () {console.log('hello from myMixin2!')}, }// 重要： // 一個組件中改動了mixin對象中的數據，另一個引用了mixin的組件不會受影響 // 因為不同組件中的mixin是相互獨立的！// 使用全局混入 Vue.mixin(myMixin1); Vue.mixin(myMixin2);// 使用局部混入 Vue.component('m-v', {template: '<p>m-v</p>',mixins:[myMixin1, myMixin2], });

全局混入的注意點：

• 請謹慎使用全局混入，一旦使用全局混入，它將影響每一個之后創建的 Vue 實例(包括第三方組件)。大多數情況下，只應當應用于自定義選項，就像下面示例一樣。推薦將其作為插件發布，以避免重復應用混入。

// 為自定義的選項 'myOption' 注入一個處理器。 Vue.mixin({created: function () {var myOption = this.$options.myOptionif (myOption) {console.log(myOption)}} })new Vue({myOption: 'hello!' })

選項合并

當把混入對象添加到組件中，根據混入規則添加混入的數據：當組件和混入對象含有同名選項時，這些選項將以恰當的方式進行“合并”：

• data：數據對象在內部會進行遞歸合并，發生鍵名沖突時，組件數據覆蓋混入對象的數據。

• 生命周期鉤子：同名鉤子函數將合并為一個數組，因此都將被調用。先執行混入對象的鉤子函數，再執行組件自身鉤子函數。

• 值為對象的選項：例如 methods、components 和 directives，將被合并為同一個對象。兩個對象鍵名沖突時，組件的鍵值覆蓋混入對象的鍵值，最后使用的是組件的方法等。

混入的規則可以總結為兩點：

組件的選項是對象類型（data、computed、methods、watch、components），如果混入對象中的屬性或者方法名與組件內部的重名，組件的數據覆蓋混入對象的數據。

組件實例的選項是函數類型（生命周期函數），同名鉤子函數將合并為一個數組，因此都將被調用。另外，先執行混入對象的鉤子函數，再執行組件自身鉤子函數。

mixin的優缺點

從上面的例子看來，使用mixin的好處多多，但是凡是都有兩面性：

• 優點：

  • 提高代碼復用性

  • 無需傳遞狀態

  • 維護方便，只需要修改一個地方即可

• 缺點：

  • 命名沖突

  • 濫用的話后期很難維護

  • 不好追溯源，排查問題稍顯麻煩

  • 不能輕易的重復代碼

組合式API 和 Mixin 的對比

在 Vue 2 中，mixins 是創建可重用組件邏輯的主要方式。盡管在 Vue 3 中保留了 mixins 支持，但對于組件間的邏輯復用，Composition API 是現在更推薦的方式。

讓我們能夠把組件邏輯提取到可復用的單元里。然而 mixins 有三個主要的短板：

不清晰的數據來源：當使用了多個 mixin 時，實例上的數據屬性來自哪個 mixin 變得不清晰，這使追溯實現和理解組件行為變得困難。這也是我們推薦在組合式函數中使用 ref + 解構模式的理由：讓屬性的來源在消費組件時一目了然。

命名空間沖突：多個來自不同作者的 mixin 可能會注冊相同的屬性名，造成命名沖突。若使用組合式函數，你可以通過在解構變量時對變量進行重命名來避免相同的鍵名。

隱式的跨 mixin 交流：多個 mixin 需要依賴共享的屬性名來進行相互作用，這使得它們隱性地耦合在一起。而一個組合式函數的返回值可以作為另一個組合式函數的參數被傳入，像普通函數那樣。

基于上述理由，我們不再推薦在 Vue 3 中繼續使用 mixin。保留該功能只是為了項目遷移的需求和照顧熟悉它的用戶。

插件

插件的功能

插件通常用來為 Vue 添加全局功能。插件的功能范圍沒有嚴格的限制——一般有下面幾種：

添加全局方法或者 property。如：vue-custom-element

添加全局資源：指令/過濾器/過渡等。如 vue-touch

通過全局混入來添加一些組件選項。如 vue-router

添加 Vue 實例方法，通過把它們添加到 Vue.prototype 上實現。

一個庫，提供自己的 API，同時提供上面提到的一個或多個功能。如 vue-router

使用插件

通過全局方法 Vue.use() 使用插件。需要在 new Vue() 啟動應用之前完成Vue.use()的調用：

// 創建插件 const MyPlugin = {install (Vue, options) {console.log('install');} }// 使用插件，插件的install函數會自動調用： `MyPlugin.install(Vue)` Vue.use(MyPlugin)new Vue({// ...組件選項 })

也可以傳入一個可選的選項對象：

Vue.use(MyPlugin, { someOption: true })

Vue.use 會自動阻止多次注冊相同插件，屆時即使多次調用也只會注冊一次該插件。

比如路由插件在vue腳手架中的使用：

import Vue from 'vue'; import VueRouter from 'vue-router';Vue.use(VueRouter);// 使用路由插件

開發插件

Vue.js 的插件應該暴露一個 install 方法。這個方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象：

const MyPlugin = {install (Vue, options) {// 1. 添加全局過濾器Vue.filter(...)// 2. 添加全局指令Vue.directive(...)// 3. 添加全局混入Vue.mixin(...)// 4. 添加實例方法或屬性Vue.prototype.$myMethod = function (methodOptions) {...}Vue.prototype.$myProperty = xxxx// 5.添加全局方法或屬性 Vue.myGlobalMethod = function () {}} }export default MyPlugin;

自定義指令

指令介紹

除了 Vue 內置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 還允許你注冊自定義的指令 (Custom Directives)。

一個自定義指令由一個包含類似組件生命周期鉤子的對象來定義。鉤子函數會接收到指令所綁定元素作為其參數。

下面是一個自定義指令的例子，當一個 input 元素被 Vue 插入到 DOM 中后，它會被自動聚焦：

Vue.directive('focus', {inserted (el) {el.focus();} }); <input v-focus>

假設你還未點擊頁面中的其他地方，那么上面這個 input 元素應該會被自動聚焦。該指令比 autofocus attribute 更有用，因為它不僅僅可以在頁面加載完成后生效，還可以在 Vue 動態插入元素后生效。

和組件類似，自定義指令在模板中使用前必須先注冊。

注冊指令

注冊自定義指令分為全局指令和局部指令：

• 注冊全局指令：Vue.directive(指令名, 回調函數或者配置對象)

  Vue.directive('color', {inserted (el, binding) {el.style.color = binding.value} });

• 注冊局部指令：new Vue{directives:{指令名: 回調函數或者配置對象 }}

  new Vue({directives: {focus: {inserted: function (el) {el.focus()}}} });

• 指令名

  • 指令注冊時不加v-，但使用時要加v-

  • 指令名如果是多個單詞，要使用kebab-case命名方式，不要用camelCase命名。

指令鉤子函數與參數

鉤子函數

一個指令的定義對象可以提供幾種鉤子函數 (都是可選的)：

Vue.directive('directive-name', {// 只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。bind(el, binding, vnode, prevVnode) {},// 被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。inserted(el, binding, vnode, prevVnode) {},// 所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。// 但是你可以通過比較更新前后的值來忽略不必要的模板更新。update(el, binding, vnode, prevVnode) {},// 指令所在組件的 VNode 及其子 VNode 全部更新后調用。componentUpdated(el, binding, vnode, prevVnode) {},// 只調用一次，指令與元素解綁時調用。unbind(el, binding, vnode, prevVnode) {}, })

鉤子函數參數

指令鉤子函數會被傳入以下參數：

• el：指令所綁定的元素，可以用來直接操作 DOM。
• binding：一個對象，包含以下 property：
  • name：指令名，不包括 v- 前綴。
  • value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
  • oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
  • expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
  • arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。
  • modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
• vnode：Vue 編譯生成的虛擬節點。
• prevVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

除了 el 之外，其它參數都應該是只讀的，切勿進行修改。如果需要在鉤子之間共享數據，建議通過元素的 dataset 來進行。

舉例來說，像下面這樣使用指令：

<div v-example:foo.bar="baz">

binding 參數會是一個這樣的對象：

{arg: 'foo',modifiers: { bar: true },value: /* `baz` 的值 */,oldValue: /* 上一次更新時 `baz` 的值 */ }

和內置指令類似，自定義指令的參數也可以是動態的。舉例來說：

<div v-example:[arg]="value"></div>

這里指令的參數會基于組件的 arg 數據屬性響應式地更新。

注冊指令的兩種方式

配置對象

Vue.directive('directive-name', {bind(el, binding, vnode, prevVnode) {}, })

函數簡寫

在很多時候，你可能想在 bind 和 update 時觸發相同行為，除此之外并不需要其他鉤子。這種情況下我們可以直接用一個函數來定義指令，如下所示：

Vue.directive('color', function (el, binding) {el.style.color = binding.value })

注意函數簡寫調用的時機有兩個：

指令與元素成功綁定時。

指令所在的模板被重新解析時。

對象字面量

如果你的指令需要多個值，你可以向它傳遞一個 JavaScript 對象字面量。別忘了，指令也可以接收任何合法的 JavaScript 表達式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div> Vue.directive('demo', function (el, binding) {console.log(binding.value.color) // => "white"console.log(binding.value.text) // => "hello!" })

在組件上使用

當在組件上使用自定義指令時，它會始終應用于組件的根節點，和透傳 attributes類似。

<MyComponent v-demo="test" /> <!-- MyComponent 的模板 --><div> <!-- v-demo 指令會被應用在此處 --><span>My component content</span> </div>

需要注意的是vue3的組件可能含有多個根節點。當應用到一個多根組件時，指令將會被忽略且拋出一個警告。和 attribute 不同，指令不能通過 v-bind="$attrs" 來傳遞給一個不同的元素。總的來說，不推薦在組件上使用自定義指令。

指令函數中的this

不管是使用配置對象，還是使用函數簡寫的形式注冊指令，指令的鉤子函數中的this都是指向window的。因為在自定義指令中已經是需要用戶操作DOM，Vue的數據都是通過指令傳入指令的函數。

實例

問題： 嘗試使用函數和配置對象的兩種方式注冊以下指令

• 注冊v-color指令，改變文字的顏色，默認為紅色

  Vue.directive('color', function (el, binding) {el.style.color = binding.value || '#f00'; }); <p v-color="'red'">你好</p>

• 注冊v-focus-value指令，給輸入框value傳值，并讓輸入框獲取焦點

  // v-focus-value 不適合使用函數簡寫的形式 // Vue.directive('focus-value', (el, binding) => { // el.focus(); // el.value = binding.value // });Vue.directive('focus-value', {bind (el, binding) {el.value = binding.value},inserted (el, binding) {el.focus();},update (el, binding) {el.value = binding.value} }); <button @click="n++">點擊n加1：{{n}} </button> <input type="text" v-focus-value="n">

渲染函數 render

Vue 推薦在絕大多數情況下使用模板來創建你的 HTML。然而在一些場景中，你真的需要 JavaScript 的完全編程的能力。這時你可以用渲染函數，它比模板更接近編譯器。

在學習render函數之前，先來了解一下虛擬 DOM的概念。

虛擬 DOM

你可能已經聽說過“虛擬 DOM”的概念了，Vue 的渲染系統正是基于這個概念構建的。

虛擬 DOM (Virtual DOM，簡稱 VDOM) 是一種編程概念，意為將目標所需的 UI 通過數據結構“虛擬”地表示出來，保存在內存中，然后將真實的 DOM 與之保持同步。這個概念是由 React 率先開拓，隨后在許多不同的框架中都有不同的實現，當然也包括 Vue。

與其說虛擬 DOM 是一種具體的技術，不如說是一種模式，所以并沒有一個標準的實現。我們可以用一個簡單的例子來說明：

const vnode = {type: 'div',props: {id: 'hello'},children: [/* 更多 vnode */] }

這里所說的 vnode 即一個純 JavaScript 的對象 (一個“虛擬節點”)，它代表著一個 <div> 元素。它包含我們創建實際元素所需的所有信息。它還包含更多的子節點，這使它成為虛擬 DOM 樹的根節點。

一個運行時渲染器將會遍歷整個虛擬 DOM 樹，并據此構建真實的 DOM 樹。這個過程被稱為掛載 (mount)。

如果我們有兩份虛擬 DOM 樹，渲染器將會有比較地遍歷它們，找出它們之間的區別，并應用這其中的變化到真實的 DOM 上。這個過程被稱為更新 (patch)，又被稱為“比對”(diffing) 或“協調”(reconciliation)。

虛擬 DOM 帶來的主要收益是它讓開發者能夠靈活、聲明式地創建、檢查和組合所需 UI 的結構，同時只需把具體的 DOM 操作留給渲染器去處理。

渲染管線

從高層面的視角看，Vue 組件掛載時會發生如下幾件事：

編譯：Vue 模板被編譯為渲染函數：即用來返回虛擬 DOM 樹的函數。這一步驟可以通過構建步驟提前完成，也可以通過使用運行時編譯器即時完成。

掛載：運行時渲染器調用渲染函數，遍歷返回的虛擬 DOM 樹，并基于它創建實際的 DOM 節點。這一步會作為響應式副作用執行，因此它會追蹤其中所用到的所有響應式依賴。

更新：當一個依賴發生變化后，副作用會重新運行，這時候會創建一個更新后的虛擬 DOM 樹。運行時渲染器遍歷這棵新樹，將它與舊樹進行比較，然后將必要的更新應用到真實 DOM 上去。

模板 vs. 渲染函數

Vue 模板會被預編譯成虛擬 DOM 渲染函數。Vue 也提供了 API 使我們可以不使用模板編譯，直接手寫渲染函數。在處理高度動態的邏輯時，渲染函數相比于模板更加靈活，因為你可以完全地使用 JavaScript 來構造你想要的 vnode。

那么為什么 Vue 默認推薦使用模板呢？有以下幾點原因：

模板更貼近實際的 HTML。這使得我們能夠更方便地重用一些已有的 HTML 代碼片段，能夠帶來更好的可訪問性體驗、能更方便地使用 CSS 應用樣式，并且更容易使設計師理解和修改。

由于其確定的語法，更容易對模板做靜態分析。這使得 Vue 的模板編譯器能夠應用許多編譯時優化來提升虛擬 DOM 的性能表現 (下面我們將展開討論)。

在實踐中，模板對大多數的應用場景都是夠用且高效的。渲染函數一般只會在需要處理高度動態渲染邏輯的可重用組件中使用。

創建虛擬DOM

Vue組件實例的選項中提供了render函數來創建虛擬DOM

render函數用法：render(createVnode){ return createVnode(); }

• createVnode：是一個方法，用來創建虛擬DOM，通常把createVnode簡寫為h
• h() 是 hyperscript 的簡稱——意思是“能生成 HTML (超文本標記語言) 的 JavaScript”。這個名字來源于許多虛擬 DOM 實現默認形成的約定。

Vue 選項中的 render 函數若存在，則 Vue 構造函數不會從 template 選項或通過 el 選項指定的掛載元素中提取出的 HTML 模板編譯渲染函數。

h() 函數返回值是虛擬DOM對象：

• h 到底會返回什么呢？其實不是一個實際的 DOM 元素。它更準確的名字可能是 createNodeDescription，**因為它所包含的信息會告訴 Vue 頁面上需要渲染什么樣的節點，包括及其子節點的描述信息。**我們把這樣的節點描述為“虛擬節點 (virtual node)”，也常簡寫它為“VNode”。“虛擬 DOM”是我們對由 Vue 組件樹建立起來的整個 VNode 樹的稱呼。

render函數使用方式

// h函數返回值為虛擬DOM對象 {VNode} h(// {String | Object | Function}// 一個 HTML 標簽名、組件選項對象，或者resolve 了上述任何一種的一個 async 函數。必填項。'div',// {Object}// 一個與模板中 attribute 對應的數據對象。可選。{// (詳情見下一節) 深入數據對象},// {String | Array}// 子級虛擬節點 (VNodes)，由 `createElement()` 構建而成，// 也可以使用字符串來生成“文本虛擬節點”。可選。['先寫一些文字',h('h1', '一則頭條'),h(MyComponent, {props: {someProp: 'foobar'}})] );

深入數據對象

有一點要注意：正如 v-bind:class 和 v-bind:style 在模板語法中會被特別對待一樣，它們在 VNode 數據對象中也有對應的頂層字段。該對象也允許你綁定普通的 HTML attribute，也允許綁定如 innerHTML 這樣的 DOM property (這會覆蓋 v-html 指令)。

{// 與 `v-bind:class` 的 API 相同，接受一個字符串、對象或字符串和對象組成的數組'class': {foo: true,bar: false},// 與 `v-bind:style` 的 API 相同，接受一個字符串、對象，或對象組成的數組style: {color: 'red',fontSize: '14px'},// 普通的 HTML attributeattrs: {id: 'foo'},// 組件 propprops: {myProp: 'bar'},// DOM propertydomProps: {innerHTML: 'baz'},// 事件監聽器在 `on` 內，// 但不再支持如 `v-on:keyup.enter` 這樣的修飾器。// 需要在處理函數中手動檢查 keyCode。on: {click: this.clickHandler},// 僅用于組件，用于監聽原生事件，而不是組件內部使用// `vm.$emit` 觸發的事件。nativeOn: {click: this.nativeClickHandler},// 自定義指令。注意，你無法對 `binding` 中的 `oldValue`// 賦值，因為 Vue 已經自動為你進行了同步。directives: [{name: 'my-custom-directive',value: '2',expression: '1 + 1',arg: 'foo',modifiers: {bar: true}}],// 作用域插槽的格式為// { name: props => VNode | Array<VNode> }scopedSlots: {default: props => h('span', props.text)},// 如果組件是其它組件的子組件，需為插槽指定名稱slot: 'name-of-slot',// 其它特殊頂層 propertykey: 'myKey',ref: 'myRef',// 如果你在渲染函數中給多個元素都應用了相同的 ref 名，// 那么 `$refs.myRef` 會變成一個數組。refInFor: true }

使用render函數創建組件

訪問this

• render() 函數可以訪問同一個 this 組件實例。

  Vue.component('m-c', {render(h) {return h('div', this.msg);},data() {return {msg: 'hello world!',};}, });

單個根標簽

• 虛擬DOM依然是只能有一個根標簽， 以下寫法會報錯：

  • [Vue warn]: Multiple root nodes returned from render function. Render function should return a single root node.

  Vue.component('m-c', {render(h) {return [h('div', 'div1'), h('div', 'div2')];}, });

VNode 必須唯一

組件樹中的所有 VNode 必須是唯一的。這意味著，下面的渲染函數是不合法的：

render: function (h) {var p = h('p', 'hi')return h('div', [// 錯誤 - 重復的 VNodep, p]) }

如果你真的非常想在頁面上渲染多個重復的元素或者組件，你可以使用一個工廠函數來做這件事。比如下面的這個渲染函數就可以完美渲染出 6 個相同的段落：

render: function (h) {return h('div',[1,2,3,4,5,6].map(function () {return h('p', 'hi')})) }

render函數的應用

• 標題組件

// <m-h :level="3">論文</m-h>Vue.component('m-h', {render (h) {return h('h' + this.level, this.$slots.default);},props: {level: {type: Number,require: true,}}, });

• 替代v-for 和 v-if

// <m-v :items="['選項1', '選項2', '選項3']"></m-v>Vue.component('m-v', {props: ['items'],render (h) {if (this.items.length) {return h('ul', this.items.map(function (item) {return h('li', item)}))} else {return h('p', 'No items found.')}} });

• 自定義v-model

// Vue.component('m-input', {props: ['value'],render (h) {var self = thisreturn h('input', {domProps: {// 綁定input標簽的value屬性value: self.value},on: {// 監聽input標簽的input事件input: function (event) {// 發射input事件self.$emit('input', event.target.value)}}})} });

MVVM

MVVM 模型

MVVM -Model View ViewModel

• M：模型(Model) ：對應 data 中的數據

• V：視圖(View) ：模板

• VM：視圖模型(ViewModel) ： Vue 實例對象

最核心的就是 ViewModel 。ViewModel 包含 DOM Listeners 和 Data Bindings。

Data Bindings 用于將數據綁定到 View 上顯示，DOM Listeners 用于監聽操作。

• 從 Model 到 View 的映射，也就是 Data Bindings 。這樣可以大量省略我們手動 update View 的代碼和時間。
• 從 View 到 Model 的事件監聽，也就是 DOM Listeners 。這樣我們的 Model 就會隨著 View 觸發事件而改變。

在Vue中的mvvm:

• data中所有的屬性、computed的計算屬性、methods中的方法，最后都出現在了vm身上。
• vm身上所有的屬性 及 Vue原型上所有屬性，在Vue模板{{}}中都可以直接使用。

<div id="app">{{num}} </div><script> let vm = new Vue({el:'#app',data:{num: 10,} }); </script>

MVVM思想有兩個方向

一是將模型轉換成視圖，即將后端傳遞的數據轉換成看到的頁面。實現方式是：數據綁定。

二是將視圖轉換成模型，即將看到的頁面轉換成后端的數據。實現的方式是：DOM 事件監聽。

這兩個方向都實現的，就稱為數據的雙向綁定。

MVC 和 MVVM 的區別(關系)

MVC - Model View Controller( controller: 控制器 )，M 和 V 和 MVVM 中的 M 和 V 意思一樣，C 指頁面業務邏輯。使用 MVC 的目的就是將 M 和 V 的代碼分離，但 MVC 是單向通信，也就是將 Model 渲染到 View 上，必須通過 Controller 來承上啟下。

MVC 和 MVVM 的區別(關系)并不是 ViewModel 完全取代了 Controller 。

ViewModel 目的在于抽離 Controller 中的數據渲染功能，而不是替代。其他操作業務等還是應該放在 Controller 中實現，這樣就實現了業務邏輯組件的復用。

常見關于Vue的面試題

什么是MVVM思想？

MVVM -Model View ViewModel，它包括 DOM Listenters 和 Data bindings，前者實現了頁面與數據的綁定，當頁面操作數據的時候 DOM 和 Model 也會發生相應的變化。后者實現了數據與頁面的綁定，當數據發生變化的時候會自動渲染頁面。

MVVM相對于MVC的優勢？

MVVM 實現了數據與頁面的雙向綁定，MVC 只實現了 Model 和 View 的單向綁定。

MVVM 實現了頁面業務邏輯和渲染之間的解耦，也實現了數據與視圖的解耦，并且可以組件化開發。

VUE是如何體現MVVM思想的？

胡子語法（Mustache 語法， {{}} 長的比較像胡子，命名為胡子語法），實現了數據與視圖的綁定。

v-on 事件綁定，通過事件操作數據時，v-model 會發生相應的變化。

響應式原理

數據代理

數據代理：通過一個對象代理對另一個對象中屬性的操作（讀/寫）

let o1 = {x: 100}; let o2 = {y: 200}; Object.defineProperty(o2, 'x', {get(){return o1.x;},set(value){o1.x = value;} });

o2對象代理了o1對象的屬性x，當修改o1.x會影響o2.x，修改o2.x也會影響o1.x

模擬響應式的實現

響應式原理：在改變數據的時候，視圖會跟著更新。

<div id="app"><button onclick="addClick('age', 1)">點擊改變age</button><button onclick="addClick('weight', 2)">點擊增加weight屬性</button><p id="name"></p><p id="age"></p><p id="weight"></p> </div><script>// 模擬 Vue 中的 datalet data = {name: '張三',age: 12}// 更新視圖function updateView (key, value) {document.getElementById(key).innerHTML = key + '=' + value}// 模擬Vue的響應式函數reactivefunction reactive (target, key, value) {Object.defineProperty(target, key, {get () {console.log(`訪問了${key}屬性`)return value},set (newValue) {console.log(`將${key}由->${value}->設置成->${newValue}`)if (value !== newValue) {value = newValue;updateView(key, newValue);}}})}// 模擬 Vue 實例，代理data中的每一個屬性，后增加的屬性，不具有響應式Object.keys(data).forEach(key => reactive(data, key, data[key]));updateView('name', data.name);updateView('age', data.age);// 模擬值的改變function addClick (key, value) {if (data[key]) {data[key] = data[key] + value;} else {data[key] = value;}}</script>

Vue給data里所有的屬性加上set，get這個過程就叫做響應式。

Vue中的數據代理

Vue中的數據代理：通過vue實例來代理data對象中屬性的操作（讀/寫）

Vue中數據代理的好處：更加方便的操作data中的數據

響應式原理

• vue在實例化時，將data中的所有屬性都通過Object.defineProperty添加到vue實例上

• 為每一個添加到vue實例上的屬性都指定setter和getter，在getter/setter內部去操作（讀/寫）data中對應的屬性

• 每個vue實例都對應一個 watcher 實例，它會在組件渲染的過程中把“接觸”過的數據記錄為依賴。之后當依賴屬性的 setter 觸發時，會通知 watcher，從而使頁面中綁定這個屬性的部分重新渲染。

總結

**第一步：**組件初始化的時候，先給每一個Data屬性都注冊getter，setter，也就是reactive化。然后再new 一個自己的Watcher對象，此時watcher會立即調用組件的render函數去生成虛擬DOM。在調用render的時候，就會需要用到data的屬性值，此時會觸發getter函數，將當前的Watcher函數注冊進sub里。

**第二步：**當data屬性發生改變之后，就會遍歷sub里所有的watcher對象，通知它們去重新渲染組件。

響應式屬性

vue的響應式屬性

當一個 Vue 實例被創建時，它將 data 對象中的所有的屬性加入到 Vue 的響應式系統中。當這些 屬性的值發生改變時，視圖將會產生“響應”，即匹配更新為新的值。

// 我們的數據對象 var data = { a: 1 }// 該對象被加入到一個 Vue 實例中 var vm = new Vue({data: data })// 獲得這個實例上的 property // 返回源數據中對應的字段 vm.a == data.a // => true// 設置 property 也會影響到原始數據 vm.a = 2 data.a // => 2// ……反之亦然 data.a = 3 vm.a // => 3

由于 Vue 會在初始化實例時對data中的屬性執行 getter/setter 轉化，所以屬性必須在 data 對象上存在才能讓 Vue 將它轉換為響應式的。

當這些數據改變時，視圖會進行重渲染。值得注意的是只有當實例被創建時就已經存在于 data 中的 屬性 才是響應式的。也就是說如果你添加一個新的 屬性，比如：

var vm = new Vue({data:{a:1,} })// `vm.a` 是響應式的vm.b = 2 // `vm.b` 是非響應式的

那么對 b 的改動將不會觸發任何視圖的更新。

對于已經創建的實例， Vue 不允許動態添加根級響應式 property。如果你知道你會在晚些時候需要一個 property，一開始你必須在初始化實例前在data中聲明所有根級響應式屬性，并為這些屬性設置初始值。比如：

var vm = new Vue({data:{// 聲明 message 為一個空值字符串message: '',// 聲明 items 為一個空數組items:[],// 聲明 zhagnsan 為一個空對象zhagnsan:{}} }) // 之后設置 message、tems、zhangsan 都是是響應式的 vm.message = 'Hello!'; vm.items = [1,2,3,4]; vm.zhangsan = {name:'張三', age:19};

檢測對象的屬性的變化

給data中的對象添加屬性，Vue檢測不到對象屬性的變化，比如：

var vm = new Vue({data:{user: {name: '張三'},} });vm.user.age = 12;// age不是是響應式的

使用上面的方式添加的age屬性不是響應式的。

如果想要Vue檢測到age屬性，可以使用下面的方法向嵌套對象添加響應式 屬性

• Vue.set(object, propertyName, value)
• vm.$set(object, propertyName, value)

Vue.set(vm.user, 'age', 12); // 或者 vm.$set(vm.user,'age',12);

如果需要給user對象添加多個屬性，可以使用 Object.assign

vm.user = Object.assign({}, vm.user, {weight:100, height:180});

檢測數組元素值的變化

檢測數組

Vue 不能檢測以下數組的變動：

當你利用索引直接設置一個數組項時，例如：vm.items[indexOfItem] = newValue

當你修改數組的長度時，例如：vm.items.length = newLength

var vm = new Vue({data:{hobby: ['游戲', '音樂', '運動'],} });vm.hobby[0] = '學習';// 不是是響應式的

檢測數組的變化有兩種方式：

• 使用被 Vue 包裹的數組變更方法，使用這些方法將會觸發視圖更新。這些被包裹過的方法包括push()、pop()、shift()、unshift()、splice()、sort()、reverse()

• 使用set函數改變數組元素：Vue.set(array, index, item) 或 vm.$set(array, index, item)

為了解決第一類問題，以上兩種方式都可以實現：

Vue.set(vm.hobby, 0, '學習'); vm.$set(vm.hobby, 0, '學習');vm.hobby.splice(0, 1, '學習');

為了解決第二類問題vm.items.length = newLength，你可以使用 splice：

vm.items = vm.items.splice(newLength);

替換數組

變更方法，顧名思義，會變更調用了這些方法的原始數組。相比之下，也有非變更方法，例如 filter()、concat() 和 slice()。它們不會變更原始數組，而總是返回一個新數組。當使用非變更方法時，可以用新數組替換舊數組：

this.hobby = this.hobby.filter( item => !item.includes('運動'));

總結

以上是生活随笔為你收集整理的vue2的动画,混入Mixin,插件,指令,渲染函数,响应式,MVVM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。