vue2的动画,混入Mixin,插件,指令,渲染函数,响应式,MVVM
文章目錄
- 過渡 & 動畫
- Transition 組件
- 基于 CSS 的過渡效果
- CSS 過渡類名 class
- 為過渡效果命名
- CSS 過渡 transition
- 實例1：
- 實例2：
- CSS 動畫
- 自定義過渡的類名
- 同時使用 transition 和 animation
- 深層級過渡與顯式過渡時長
- 性能考量
- JavaScript 動畫
- 可復(fù)用過渡效果
- 出現(xiàn)時過渡
- 元素間過渡
- 過渡模式
- 組件間過渡
- 動態(tài)過渡
- TransitionGroup 組件
- 和 `<Transition>` 的區(qū)別
- 列表的進入 / 離開動畫
- 移動動畫
- 動畫技巧
- 基于 CSS class 的動畫
- 狀態(tài)驅(qū)動的動畫
- 基于偵聽器的動畫
- 混入 mixin
- 概念
- Mixin和Vuex的區(qū)別？
- 注冊混入
- 選項合并
- mixin的優(yōu)缺點
- [組合式API 和 Mixin 的對比](https://cn.vuejs.org/guide/reusability/composables.html#comparisons-with-other-techniques)
- 插件
- 插件的功能
- 使用插件
- 開發(fā)插件
- 自定義指令
- 指令介紹
- 注冊指令
- 指令鉤子函數(shù)與參數(shù)
- 鉤子函數(shù)
- 鉤子函數(shù)參數(shù)
- 注冊指令的兩種方式
- 配置對象
- 函數(shù)簡寫
- 對象字面量
- 在組件上使用
- 指令函數(shù)中的this
- 實例
- 渲染函數(shù) render
- 虛擬 DOM
- 渲染管線
- 模板 vs. 渲染函數(shù)
- 創(chuàng)建虛擬DOM
- render函數(shù)使用方式
- 深入數(shù)據(jù)對象
- 使用render函數(shù)創(chuàng)建組件
- 訪問this
- 單個根標簽
- VNode 必須唯一
- render函數(shù)的應(yīng)用
- MVVM
- MVVM 模型
- MVVM思想有兩個方向
- MVC 和 MVVM 的區(qū)別(關(guān)系)
- 常見關(guān)于Vue的面試題
- 響應(yīng)式原理
- 數(shù)據(jù)代理
- 模擬響應(yīng)式的實現(xiàn)
- Vue中的數(shù)據(jù)代理
- 響應(yīng)式原理
- 總結(jié)
- 響應(yīng)式屬性
- vue的響應(yīng)式屬性
- 檢測對象的屬性的變化
- 檢測數(shù)組元素值的變化
- 檢測數(shù)組
- 替換數(shù)組
過渡 & 動畫
Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應(yīng)用過渡效果。包括以下工具：
- 在 CSS 過渡和動畫中自動應(yīng)用 class
- 可以配合使用第三方 CSS 動畫庫，如 Animate.css
- 在過渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 動畫庫，如 anime.js
Vue 提供了兩個內(nèi)置組件，可以幫助你制作基于狀態(tài)變化的過渡和動畫：
- <Transition> 會在一個元素或組件進入和離開 DOM 時應(yīng)用動畫。
- <TransitionGroup> 會在一個 v-for 列表中的元素或組件被插入，移動，或移除時應(yīng)用動畫。
除了這兩個組件，我們也可以通過其他技術(shù)手段來應(yīng)用動畫，比如切換 CSS class 或用狀態(tài)綁定樣式來驅(qū)動動畫。這些其他的方法會在動畫技巧章節(jié)中展開。
Transition 組件
<Transition> 是一個內(nèi)置組件，這意味著它在任意別的組件中都可以被使用，無需注冊。它可以將進入和離開動畫應(yīng)用到通過默認插槽傳遞給它的單個元素或組件上。進入或離開可以由以下的條件之一觸發(fā)：
-
由 v-if 所觸發(fā)的切換
-
由 v-show 所觸發(fā)的切換
-
由特殊元素 <component> 切換的動態(tài)組件
-
組件根節(jié)點
當一個 <Transition> 組件中的元素被插入或移除時，會發(fā)生下面這些事情：
基于 CSS 的過渡效果
CSS 過渡類名 class
在進入/離開的過渡中，一共有 6 個應(yīng)用于進入與離開過渡效果的 CSS class。
對于進入動畫：
| 定義過渡的開始狀態(tài) | 定義過渡的結(jié)束狀態(tài) | 定義過渡生效時的狀 |
| 插入之前生效 | 插入之后下—幀生效（同時v-enter被移除） | 動畫整個過程生效 |
| 下—幀被移除 | 動畫完成之后移除 | 動畫整個過程生效 |
對于離開動畫：
| 定義過渡的開始狀態(tài) | 定義過渡的結(jié)束狀態(tài) | 定義過渡生效時的狀態(tài) |
| 離開過渡被觸發(fā)時立即生效 | 觸發(fā)之后下一幀生效（與此同時v-leave被刪除） | 整個離開過渡的階段中應(yīng)用 |
| 下—幀被移除 | 動畫完成之后移除 | 整個離開過渡的階段中應(yīng)用 |
為過渡效果命名
我們可以給 <Transition> 組件傳一個 name prop 來聲明一個過渡效果名：
<Transition name="fade">... </Transition>對于這些在過渡中切換的類名來說，如果你使用一個沒有名字的 <transition>，則 v- 是這些類名的默認前綴。
如果你使用了一個有名字的過渡效果 <transition name="fade">，對它起作用的過渡 class 會以其名字而不是 v 作為前綴。比如，上方例子中被應(yīng)用的 class v-enter-active 會替換為 fade-enter-active 。
這個“fade”過渡的 class 應(yīng)該是這樣：
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s ease; }.fade-enter, .fade-leave-to {opacity: 0; }CSS 過渡 transition
<Transition> 一般都會搭配原生 CSS 過渡一起使用，配和 transition CSS 屬性是，使我們可以一次定義一個過渡的各個方面，包括需要執(zhí)行動畫的屬性、持續(xù)時間和速度曲線。
實例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、離開的開始狀態(tài) opacity為1是標簽的默認值，只要是默認值可以省略 */ .fade-leave{opacity: 1; } /* 2、離開的結(jié)束狀態(tài) opacity為0 */ .fade-leave-to{opacity: 0; } /* 3、離開的整個過程，添加過渡屬性 transition */ .fade-leave-active{transition: opacity 10s linear; } /* 進入的動畫 */ /* 1、進入的開始狀態(tài) opacity為0 */ .fade-enter{opacity: 0; } /* 2、進入的結(jié)束狀態(tài) 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：
下面是一個更高級的例子，它使用了不同的持續(xù)時間和速度曲線來過渡多個屬性：
<Transition name="slide-fade"><p v-if="show">hello</p> </Transition> /*進入和離開動畫可以使用不同持續(xù)時間和速度曲線。 */ .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 的應(yīng)用方式基本上是相同的，只有一點不同，那就是 *-enter 不是在元素插入后立即移除，而是在一個 animationend 事件觸發(fā)時被移除。
對于大多數(shù)的 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>設(shè)置關(guān)鍵幀動畫只需要設(shè)置leave-active和enter-active樣式，不需要設(shè)置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 （他們的優(yōu)先級高于普通的類名）會覆蓋相應(yīng)階段的默認 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 需要附加事件監(jiān)聽器，以便知道過渡何時結(jié)束。可以是 transitionend 或 animationend，這取決于你所應(yīng)用的 CSS 規(guī)則。如果你僅僅使用二者的其中之一，Vue 可以自動探測到正確的類型。
然而在某些場景中，你或許想要在同一個元素上同時使用它們兩個。舉例來說，Vue 觸發(fā)了一個 CSS 動畫，同時鼠標懸停觸發(fā)另一個 CSS 過渡。此時你需要顯式地傳入 type prop 來聲明，告訴 Vue 需要關(guān)心哪種類型，傳入的值是 animation 或 transition：
<Transition type="animation">...</Transition>深層級過渡與顯式過渡時長
盡管過渡 class 僅能應(yīng)用在 <Transition> 的直接子元素上，我們還是可以使用深層級的 CSS 選擇器，在深層級的元素上觸發(fā)過渡效果。
<Transition name="nested"><div v-if="show" class="outer"><div class="inner">Hello</div></div> </Transition> /* 應(yīng)用于嵌套元素的規(guī)則 */ .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 */我們甚至可以在深層元素上添加一個過渡延遲，從而創(chuàng)建一個帶漸進延遲的動畫序列：
/* 延遲嵌套元素的進入以獲得交錯效果 */ .nested-enter-active .inner {transition-delay: 0.25s; }然而，這會帶來一個小問題。默認情況下，<Transition> 組件會通過監(jiān)聽過渡根元素上的第一個 transitionend 或者 animationend 事件來嘗試自動判斷過渡何時結(jié)束。而在嵌套的過渡中，期望的行為應(yīng)該是等待所有內(nèi)部元素的過渡完成。
在這種情況下，你可以通過向 <Transition> 組件傳入 duration prop 來顯式指定過渡的持續(xù)時間 (以毫秒為單位)。總持續(xù)時間應(yīng)該匹配延遲加上內(nèi)部元素的過渡持續(xù)時間：
<Transition :duration="550">...</Transition>如果有必要的話，你也可以用對象的形式傳入，分開指定進入和離開所需的時間：
<Transition :duration="{ enter: 500, leave: 800 }">...</Transition>性能考量
你可能注意到我們上面例子中展示的動畫所用到的 CSS 屬性大多是 transform 和 opacity 之類的。用這些屬性制作動畫非常高效，因為：
相比之下，像 height 或者 margin 這樣的屬性會觸發(fā) CSS 布局變動，因此執(zhí)行它們的動畫效果更昂貴，需要謹慎使用。我們可以在 CSS-Triggers 這類的網(wǎng)站查詢哪些屬性會在執(zhí)行動畫時觸發(fā) CSS 布局變動。
JavaScript 動畫
你可以通過監(jiān)聽 <Transition> 組件事件的方式在過渡過程中掛上鉤子函數(shù)：
<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 之前被調(diào)用// 用這個來設(shè)置元素的 "enter-from" 狀態(tài)onBeforeEnter(el) {},// 在元素被插入到 DOM 之后的下一幀被調(diào)用// 用這個來開始進入動畫// el：是要做動畫的元素對象，// done：是一個函數(shù)，是動畫結(jié)束時的回調(diào)函數(shù)onEnter(el, done) {// 調(diào)用回調(diào)函數(shù) done 表示過渡結(jié)束// 如果與 CSS 結(jié)合使用，則這個回調(diào)是可選參數(shù)done()},// 當進入過渡完成時調(diào)用。onAfterEnter(el) {},onEnterCancelled(el) {},// 在 leave 鉤子之前調(diào)用// 大多數(shù)時候，你應(yīng)該只會用到 leave 鉤子onBeforeLeave(el) {},// 在離開過渡開始時調(diào)用// 用這個來開始離開動畫onLeave(el, done) {// 調(diào)用回調(diào)函數(shù) done 表示過渡結(jié)束// 如果與 CSS 結(jié)合使用，則這個回調(diào)是可選參數(shù)done()},// 在離開過渡完成、// 且元素已從 DOM 中移除時調(diào)用onAfterLeave(el) {},// 僅在 v-show 過渡中可用onLeaveCancelled(el) {}}這些鉤子可以與 CSS 過渡或動畫結(jié)合使用，也可以單獨使用。
在使用僅由 JavaScript 執(zhí)行的動畫時，最好是添加一個 :css="false" prop。這顯式地向 Vue 表明可以跳過對 CSS 過渡的自動探測。除了性能稍好一些之外，還可以防止 CSS 規(guī)則意外地干擾過渡效果。
<Transition...:css="false" >... </Transition>在有了 :css="false" 后，我們就自己全權(quán)負責控制什么時候過渡結(jié)束了。**這種情況下對于 @enter 和 @leave 鉤子來說，必須使用 done進行回調(diào)。**否則，鉤子將被同步調(diào)用，過渡將立即完成。
動畫實例：
<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>可復(fù)用過渡效果
得益于 Vue 的組件系統(tǒng)，過渡效果是可以被封裝復(fù)用的。要創(chuàng)建一個可被復(fù)用的過渡，我們需要為 <Transition> 組件創(chuàng)建一個包裝組件，并向內(nèi)傳入插槽內(nèi)容：
<!-- MyTransition.vue --> <script> // JavaScript 鉤子邏輯... </script><template><!-- 包裝內(nèi)置的 Transition 組件 --><Transitionname="my-transition"@enter="onEnter"@leave="onLeave"><slot></slot> <!-- 向內(nèi)傳遞插槽內(nèi)容 --></Transition> </template><style> /*必要的 CSS...注意：避免在這里使用 <style scoped>因為那不會應(yīng)用到插槽內(nèi)容上 */ </style>現(xiàn)在 MyTransition 可以在導(dǎo)入后像內(nèi)置組件那樣使用了：
<MyTransition><div v-if="show">Hello</div> </MyTransition>出現(xiàn)時過渡
如果你想在某個節(jié)點初次渲染時應(yīng)用一個過渡效果，你可以添加 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 設(shè)置唯一的值來標記以讓 Vue 區(qū)分它們，否則 Vue 為了效率只會替換相同標簽內(nèi)部的內(nèi)容。即使在技術(shù)上沒有必要，給在 <transition> 組件中的多個元素設(shè)置 key 是一個更好的實踐。
.btn-container {margin-top: 30px;position: relative; }/* 在“Save”按鈕和“Edit”按鈕的過渡中，兩個按鈕都被重繪了，一個離開過渡的時候另一個開始進入過渡。 這是 <transition> 的默認行為 - 進入和離開同時發(fā)生。 需要給button添加定位，否則二者同時存在時出現(xiàn)的布局問題。 */ 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); }過渡模式
在上前的例子中，進入和離開的元素都是在同時開始動畫的，因此我們不得不將它們設(shè)為 position: absolute 以避免二者同時存在時出現(xiàn)的布局問題。
然而，很多情況下同時生效的進入和離開的過渡可能并不符合需求。我們可能想要先執(zhí)行離開動畫，然后在其完成之后再執(zhí)行元素的進入動畫。手動編排這樣的動畫是非常復(fù)雜的，好在Vue 提供了過渡模式，可以通過向 <Transition> 傳入一個 mode prop 來實現(xiàn)這個行為：
- in-out：新元素先進行過渡，完成之后當前元素過渡離開。
- out-in：當前元素先進行過渡，完成之后新元素過渡進入。
將之前的例子改為 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 模式不是經(jīng)常用到，但對于一些稍微不同的過渡效果還是有用的：
<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> 也可以作用于動態(tài)組件之間的切換，多個組件的過渡簡單很多 - 我們不需要使用 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>動態(tài)過渡
<Transition> 的 props (比如 name) 也可以是動態(tài)的！這讓我們可以根據(jù)狀態(tài)變化動態(tài)地應(yīng)用不同類型的過渡：
<Transition :name="transitionName"><!-- ... --> </Transition>這個特性的用處是可以提前定義好多組 CSS 過渡或動畫的 class，然后在它們之間動態(tài)切換。
你也可以根據(jù)你的組件的當前狀態(tài)在 JavaScript 過渡鉤子中應(yīng)用不同的行為。最后，創(chuàng)建動態(tài)過渡的終極方式還是創(chuàng)建可復(fù)用的過渡組件，并讓這些組件根據(jù)動態(tài)的 props 來改變過渡的效果。掌握了這些技巧后，就真的只有你想不到，沒有做不到的了。
TransitionGroup 組件
<TransitionGroup> 是一個內(nèi)置組件，用于對 v-for 列表中的元素或組件的插入、移除和順序改變添加動畫效果。
和 <Transition> 的區(qū)別
<Transition>可以實現(xiàn)的過渡效果：
- 單個節(jié)點
- 同一時間渲染多個節(jié)點中的一個
那么怎么同時渲染整個列表，比如使用 v-for？在這種場景中，使用 <transition-group> 組件。
<TransitionGroup> 支持和 <Transition> 基本相同的 props、CSS 過渡 class 和 JavaScript 鉤子監(jiān)聽器，但有以下幾點區(qū)別：
- 不同于 <transition>，它會以一個真實元素呈現(xiàn)：默認為一個 <span>。但你可以通過傳入 tag prop 來更換為其他元素作為容器元素來渲染。
- 過渡模式在這里不可用，因為我們不再是在互斥的元素之間進行切換。
- 列表中的每個元素都必須有一個獨一無二的 key attribute。
- CSS 過渡 class 會被應(yīng)用在列表內(nèi)的元素上，而不是容器元素上。
列表的進入 / 離開動畫
這里是 <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); }這個例子有個問題，當添加和移除元素的時候，周圍的元素會瞬間移動到他們的新布局的位置，而不是平滑的過渡，我們下面會解決這個問題。
移動動畫
上面的示例有一些明顯的缺陷：當某一項被插入或移除時，它周圍的元素會立即發(fā)生“跳躍”而不是平穩(wěn)地移動。我們可以通過添加一些額外的 CSS 規(guī)則來解決這個問題，這需要用到 v-move class。
<transition-group> 組件還有一個特殊之處。不僅可以進入和離開動畫，還可以改變定位。要使用這個新功能只需了解新增的 v-move class，它會在元素的改變定位的過程中應(yīng)用。像之前的類名一樣，可以通過 name attribute 來自定義前綴，也可以通過 move-class prop手動設(shè)置。
v-move 對于設(shè)置過渡的切換時機和過渡曲線非常有用，你會看到如下的例子：
.list-enter-active, .list-leave-active {transition: all .5s ease; } .list-enter, .list-leave-to {opacity: 0;transform: translateX(30px); } /* 對移動中的元素應(yīng)用的過渡 */ .list-move {transition: all 0.5s ease; } /* 確保將離開的元素從布局流中刪除，以便能夠正確地計算移動的動畫。 */ .list-leave-active {position: absolute; }現(xiàn)在它看起來好多了，甚至對整個列表執(zhí)行洗牌的動畫也都非常流暢。
這個看起來很神奇，內(nèi)部的實現(xiàn)，Vue 使用了一個叫 FLIP 簡單的動畫隊列使用 transforms 將元素從之前的位置平滑過渡新的位置。
需要注意的是使用 FLIP 過渡的元素不能設(shè)置為 display: inline 。作為替代方案，可以設(shè)置為 display: inline-block 或者放置于 flex 中。
動畫技巧
Vue 提供了 Transition 和 TransitionGroup 組件來處理元素進入、離開和列表順序變化的過渡效果。但除此之外，還有許多其他制作網(wǎng)頁動畫的方式在 Vue 應(yīng)用中也適用。這里我們會探討一些額外的技巧。
基于 CSS class 的動畫
對于那些不是正在進入或離開 DOM 的元素，我們可以通過給它們動態(tài)添加 CSS class 來觸發(fā)動畫：
<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>狀態(tài)驅(qū)動的動畫
有些過渡效果可以通過動態(tài)插值來實現(xiàn)，比如在交互時動態(tài)地給元素綁定樣式。看下面這個例子：
<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 的數(shù)據(jù)綁定：
SVG動畫
基于偵聽器的動畫
通過發(fā)揮一些創(chuàng)意，我們可以基于一些數(shù)字狀態(tài)，配合偵聽器給任何東西加上動畫。例如，我們可以將數(shù)字本身變成動畫：
<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) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。
可以把混入理解為：將組件的公共邏輯或者配置提取出來，哪個組件需要用到時，直接將提取的這部分混入到組件內(nèi)部即可。這樣既可以減少代碼冗余度，也可以讓后期維護起來更加容易。
這里需要注意的是：提取的是邏輯或配置，而不是HTML代碼和CSS代碼。mixin就是組件中的組件（組件配置的一部分），Vue組件化讓我們的代碼復(fù)用性更高，那么組件與組件之間還有重復(fù)部分，我們使用Mixin在抽離一遍。
Mixin和Vuex的區(qū)別？
上面一點說Mixin就是一個抽離公共部分的作用。在Vue中，Vuex狀態(tài)管理似乎也是做的這一件事，它也是將組件之間可能共享的數(shù)據(jù)抽離出來。兩者看似一樣，實則還是有細微的區(qū)別，區(qū)別如下：
- Vuex公共狀態(tài)管理，如果在一個組件中更改了Vuex中的某個數(shù)據(jù)，那么其它所有引用了Vuex中該數(shù)據(jù)的組件也會跟著變化。
- Mixin中的數(shù)據(jù)和方法都是獨立的，組件之間使用后是互相不影響的。
注冊混入
混入分為全局混入和局部混入：
-
注冊全局混入：Vue.directive(混入對象)
-
注冊局部混入：new Vue{ mixins:[混入對象1, 混入對象2, ...], }
混入對象：
- 混入對象和Vue的實例一樣包含實例選項：data、methods、computed、聲明周期鉤子等，這些選項將會被合并到最終的選項中。也就是說，如果你的混入包含一個 created 鉤子，而創(chuàng)建組件本身也有一個，那么兩個函數(shù)都會被調(diào)用。
全局混入的注意點：
- 請謹慎使用全局混入，一旦使用全局混入，它將影響每一個之后創(chuàng)建的 Vue 實例(包括第三方組件)。大多數(shù)情況下，只應(yīng)當應(yīng)用于自定義選項，就像下面示例一樣。推薦將其作為插件發(fā)布，以避免重復(fù)應(yīng)用混入。
選項合并
當把混入對象添加到組件中，根據(jù)混入規(guī)則添加混入的數(shù)據(jù)：當組件和混入對象含有同名選項時，這些選項將以恰當?shù)姆绞竭M行“合并”：
-
data：數(shù)據(jù)對象在內(nèi)部會進行遞歸合并，發(fā)生鍵名沖突時，組件數(shù)據(jù)覆蓋混入對象的數(shù)據(jù)。
-
生命周期鉤子：同名鉤子函數(shù)將合并為一個數(shù)組，因此都將被調(diào)用。先執(zhí)行混入對象的鉤子函數(shù)，再執(zhí)行組件自身鉤子函數(shù)。
-
值為對象的選項：例如 methods、components 和 directives，將被合并為同一個對象。兩個對象鍵名沖突時，組件的鍵值覆蓋混入對象的鍵值，最后使用的是組件的方法等。
混入的規(guī)則可以總結(jié)為兩點：
組件的選項是對象類型（data、computed、methods、watch、components），如果混入對象中的屬性或者方法名與組件內(nèi)部的重名，組件的數(shù)據(jù)覆蓋混入對象的數(shù)據(jù)。
組件實例的選項是函數(shù)類型（生命周期函數(shù)），同名鉤子函數(shù)將合并為一個數(shù)組，因此都將被調(diào)用。另外，先執(zhí)行混入對象的鉤子函數(shù)，再執(zhí)行組件自身鉤子函數(shù)。
mixin的優(yōu)缺點
從上面的例子看來，使用mixin的好處多多，但是凡是都有兩面性：
-
優(yōu)點：
-
提高代碼復(fù)用性
-
無需傳遞狀態(tài)
-
維護方便，只需要修改一個地方即可
-
-
缺點：
-
命名沖突
-
濫用的話后期很難維護
-
不好追溯源，排查問題稍顯麻煩
-
不能輕易的重復(fù)代碼
-
組合式API 和 Mixin 的對比
在 Vue 2 中，mixins 是創(chuàng)建可重用組件邏輯的主要方式。盡管在 Vue 3 中保留了 mixins 支持，但對于組件間的邏輯復(fù)用，Composition API 是現(xiàn)在更推薦的方式。
讓我們能夠把組件邏輯提取到可復(fù)用的單元里。然而 mixins 有三個主要的短板：
基于上述理由，我們不再推薦在 Vue 3 中繼續(xù)使用 mixin。保留該功能只是為了項目遷移的需求和照顧熟悉它的用戶。
插件
插件的功能
插件通常用來為 Vue 添加全局功能。插件的功能范圍沒有嚴格的限制——一般有下面幾種：
使用插件
通過全局方法 Vue.use() 使用插件。需要在 new Vue() 啟動應(yīng)用之前完成Vue.use()的調(diào)用：
// 創(chuàng)建插件 const MyPlugin = {install (Vue, options) {console.log('install');} }// 使用插件，插件的install函數(shù)會自動調(diào)用： `MyPlugin.install(Vue)` Vue.use(MyPlugin)new Vue({// ...組件選項 })也可以傳入一個可選的選項對象：
Vue.use(MyPlugin, { someOption: true })Vue.use 會自動阻止多次注冊相同插件，屆時即使多次調(diào)用也只會注冊一次該插件。
比如路由插件在vue腳手架中的使用：
import Vue from 'vue'; import VueRouter from 'vue-router';Vue.use(VueRouter);// 使用路由插件開發(fā)插件
Vue.js 的插件應(yīng)該暴露一個 install 方法。這個方法的第一個參數(shù)是 Vue 構(gòu)造器，第二個參數(shù)是一個可選的選項對象：
const MyPlugin = {install (Vue, options) {// 1. 添加全局過濾器Vue.filter(...)// 2. 添加全局指令Vue.directive(...)// 3. 添加全局混入Vue.mixin(...)// 4. 添加實例方法或?qū)傩?/span>Vue.prototype.$myMethod = function (methodOptions) {...}Vue.prototype.$myProperty = xxxx// 5.添加全局方法或?qū)傩? Vue.myGlobalMethod = function () {}} }export default MyPlugin;自定義指令
指令介紹
除了 Vue 內(nèi)置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 還允許你注冊自定義的指令 (Custom Directives)。
一個自定義指令由一個包含類似組件生命周期鉤子的對象來定義。鉤子函數(shù)會接收到指令所綁定元素作為其參數(shù)。
下面是一個自定義指令的例子，當一個 input 元素被 Vue 插入到 DOM 中后，它會被自動聚焦：
Vue.directive('focus', {inserted (el) {el.focus();} }); <input v-focus>假設(shè)你還未點擊頁面中的其他地方，那么上面這個 input 元素應(yīng)該會被自動聚焦。該指令比 autofocus attribute 更有用，因為它不僅僅可以在頁面加載完成后生效，還可以在 Vue 動態(tài)插入元素后生效。
和組件類似，自定義指令在模板中使用前必須先注冊。
注冊指令
注冊自定義指令分為全局指令和局部指令：
-
注冊全局指令：Vue.directive(指令名, 回調(diào)函數(shù)或者配置對象)
Vue.directive('color', {inserted (el, binding) {el.style.color = binding.value} }); -
注冊局部指令：new Vue{directives:{指令名: 回調(diào)函數(shù)或者配置對象 }}
new Vue({directives: {focus: {inserted: function (el) {el.focus()}}} }); -
指令名
-
指令注冊時不加v-，但使用時要加v-
-
指令名如果是多個單詞，要使用kebab-case命名方式，不要用camelCase命名。
-
指令鉤子函數(shù)與參數(shù)
鉤子函數(shù)
一個指令的定義對象可以提供幾種鉤子函數(shù) (都是可選的)：
Vue.directive('directive-name', {// 只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進行一次性的初始化設(shè)置。bind(el, binding, vnode, prevVnode) {},// 被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。inserted(el, binding, vnode, prevVnode) {},// 所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。// 但是你可以通過比較更新前后的值來忽略不必要的模板更新。update(el, binding, vnode, prevVnode) {},// 指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。componentUpdated(el, binding, vnode, prevVnode) {},// 只調(diào)用一次，指令與元素解綁時調(diào)用。unbind(el, binding, vnode, prevVnode) {}, })鉤子函數(shù)參數(shù)
指令鉤子函數(shù)會被傳入以下參數(shù)：
- 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：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。
- modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
- vnode：Vue 編譯生成的虛擬節(jié)點。
- prevVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用。
除了 el 之外，其它參數(shù)都應(yīng)該是只讀的，切勿進行修改。如果需要在鉤子之間共享數(shù)據(jù)，建議通過元素的 dataset 來進行。
舉例來說，像下面這樣使用指令：
<div v-example:foo.bar="baz">binding 參數(shù)會是一個這樣的對象：
{arg: 'foo',modifiers: { bar: true },value: /* `baz` 的值 */,oldValue: /* 上一次更新時 `baz` 的值 */ }和內(nèi)置指令類似，自定義指令的參數(shù)也可以是動態(tài)的。舉例來說：
<div v-example:[arg]="value"></div>這里指令的參數(shù)會基于組件的 arg 數(shù)據(jù)屬性響應(yīng)式地更新。
注冊指令的兩種方式
配置對象
Vue.directive('directive-name', {bind(el, binding, vnode, prevVnode) {}, })函數(shù)簡寫
在很多時候，你可能想在 bind 和 update 時觸發(fā)相同行為，除此之外并不需要其他鉤子。這種情況下我們可以直接用一個函數(shù)來定義指令，如下所示：
Vue.directive('color', function (el, binding) {el.style.color = binding.value })注意函數(shù)簡寫調(diào)用的時機有兩個：
指令與元素成功綁定時。
指令所在的模板被重新解析時。
對象字面量
如果你的指令需要多個值，你可以向它傳遞一個 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!" })在組件上使用
當在組件上使用自定義指令時，它會始終應(yīng)用于組件的根節(jié)點，和透傳 attributes類似。
<MyComponent v-demo="test" /> <!-- MyComponent 的模板 --><div> <!-- v-demo 指令會被應(yīng)用在此處 --><span>My component content</span> </div>需要注意的是vue3的組件可能含有多個根節(jié)點。當應(yīng)用到一個多根組件時，指令將會被忽略且拋出一個警告。和 attribute 不同，指令不能通過 v-bind="$attrs" 來傳遞給一個不同的元素。總的來說，不推薦在組件上使用自定義指令。
指令函數(shù)中的this
不管是使用配置對象，還是使用函數(shù)簡寫的形式注冊指令，指令的鉤子函數(shù)中的this都是指向window的。因為在自定義指令中已經(jīng)是需要用戶操作DOM，Vue的數(shù)據(jù)都是通過指令傳入指令的函數(shù)。
實例
問題： 嘗試使用函數(shù)和配置對象的兩種方式注冊以下指令
-
注冊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 不適合使用函數(shù)簡寫的形式 // 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">
渲染函數(shù) render
Vue 推薦在絕大多數(shù)情況下使用模板來創(chuàng)建你的 HTML。然而在一些場景中，你真的需要 JavaScript 的完全編程的能力。這時你可以用渲染函數(shù)，它比模板更接近編譯器。
在學(xué)習(xí)render函數(shù)之前，先來了解一下虛擬 DOM的概念。
虛擬 DOM
你可能已經(jīng)聽說過“虛擬 DOM”的概念了，Vue 的渲染系統(tǒng)正是基于這個概念構(gòu)建的。
虛擬 DOM (Virtual DOM，簡稱 VDOM) 是一種編程概念，意為將目標所需的 UI 通過數(shù)據(jù)結(jié)構(gòu)“虛擬”地表示出來，保存在內(nèi)存中，然后將真實的 DOM 與之保持同步。這個概念是由 React 率先開拓，隨后在許多不同的框架中都有不同的實現(xiàn)，當然也包括 Vue。
與其說虛擬 DOM 是一種具體的技術(shù)，不如說是一種模式，所以并沒有一個標準的實現(xiàn)。我們可以用一個簡單的例子來說明：
const vnode = {type: 'div',props: {id: 'hello'},children: [/* 更多 vnode */] }這里所說的 vnode 即一個純 JavaScript 的對象 (一個“虛擬節(jié)點”)，它代表著一個 <div> 元素。它包含我們創(chuàng)建實際元素所需的所有信息。它還包含更多的子節(jié)點，這使它成為虛擬 DOM 樹的根節(jié)點。
一個運行時渲染器將會遍歷整個虛擬 DOM 樹，并據(jù)此構(gòu)建真實的 DOM 樹。這個過程被稱為掛載 (mount)。
如果我們有兩份虛擬 DOM 樹，渲染器將會有比較地遍歷它們，找出它們之間的區(qū)別，并應(yīng)用這其中的變化到真實的 DOM 上。這個過程被稱為更新 (patch)，又被稱為“比對”(diffing) 或“協(xié)調(diào)”(reconciliation)。
虛擬 DOM 帶來的主要收益是它讓開發(fā)者能夠靈活、聲明式地創(chuàng)建、檢查和組合所需 UI 的結(jié)構(gòu)，同時只需把具體的 DOM 操作留給渲染器去處理。
渲染管線
從高層面的視角看，Vue 組件掛載時會發(fā)生如下幾件事：
模板 vs. 渲染函數(shù)
Vue 模板會被預(yù)編譯成虛擬 DOM 渲染函數(shù)。Vue 也提供了 API 使我們可以不使用模板編譯，直接手寫渲染函數(shù)。在處理高度動態(tài)的邏輯時，渲染函數(shù)相比于模板更加靈活，因為你可以完全地使用 JavaScript 來構(gòu)造你想要的 vnode。
那么為什么 Vue 默認推薦使用模板呢？有以下幾點原因：
在實踐中，模板對大多數(shù)的應(yīng)用場景都是夠用且高效的。渲染函數(shù)一般只會在需要處理高度動態(tài)渲染邏輯的可重用組件中使用。
創(chuàng)建虛擬DOM
Vue組件實例的選項中提供了render函數(shù)來創(chuàng)建虛擬DOM
render函數(shù)用法：render(createVnode){ return createVnode(); }
- createVnode：是一個方法，用來創(chuàng)建虛擬DOM，通常把createVnode簡寫為h
- h() 是 hyperscript 的簡稱——意思是“能生成 HTML (超文本標記語言) 的 JavaScript”。這個名字來源于許多虛擬 DOM 實現(xiàn)默認形成的約定。
Vue 選項中的 render 函數(shù)若存在，則 Vue 構(gòu)造函數(shù)不會從 template 選項或通過 el 選項指定的掛載元素中提取出的 HTML 模板編譯渲染函數(shù)。
h() 函數(shù)返回值是虛擬DOM對象：
- h 到底會返回什么呢？其實不是一個實際的 DOM 元素。它更準確的名字可能是 createNodeDescription，**因為它所包含的信息會告訴 Vue 頁面上需要渲染什么樣的節(jié)點，包括及其子節(jié)點的描述信息。**我們把這樣的節(jié)點描述為“虛擬節(jié)點 (virtual node)”，也常簡寫它為“VNode”。“虛擬 DOM”是我們對由 Vue 組件樹建立起來的整個 VNode 樹的稱呼。
render函數(shù)使用方式
// h函數(shù)返回值為虛擬DOM對象 {VNode} h(// {String | Object | Function}// 一個 HTML 標簽名、組件選項對象，或者resolve 了上述任何一種的一個 async 函數(shù)。必填項。'div',// {Object}// 一個與模板中 attribute 對應(yīng)的數(shù)據(jù)對象。可選。{// (詳情見下一節(jié)) 深入數(shù)據(jù)對象},// {String | Array}// 子級虛擬節(jié)點 (VNodes)，由 `createElement()` 構(gòu)建而成，// 也可以使用字符串來生成“文本虛擬節(jié)點”。可選。['先寫一些文字',h('h1', '一則頭條'),h(MyComponent, {props: {someProp: 'foobar'}})] );深入數(shù)據(jù)對象
有一點要注意：正如 v-bind:class 和 v-bind:style 在模板語法中會被特別對待一樣，它們在 VNode 數(shù)據(jù)對象中也有對應(yīng)的頂層字段。該對象也允許你綁定普通的 HTML attribute，也允許綁定如 innerHTML 這樣的 DOM property (這會覆蓋 v-html 指令)。
{// 與 `v-bind:class` 的 API 相同，接受一個字符串、對象或字符串和對象組成的數(shù)組'class': {foo: true,bar: false},// 與 `v-bind:style` 的 API 相同，接受一個字符串、對象，或?qū)ο蠼M成的數(shù)組style: {color: 'red',fontSize: '14px'},// 普通的 HTML attributeattrs: {id: 'foo'},// 組件 propprops: {myProp: 'bar'},// DOM propertydomProps: {innerHTML: 'baz'},// 事件監(jiān)聽器在 `on` 內(nèi)，// 但不再支持如 `v-on:keyup.enter` 這樣的修飾器。// 需要在處理函數(shù)中手動檢查 keyCode。on: {click: this.clickHandler},// 僅用于組件，用于監(jiān)聽原生事件，而不是組件內(nèi)部使用// `vm.$emit` 觸發(fā)的事件。nativeOn: {click: this.nativeClickHandler},// 自定義指令。注意，你無法對 `binding` 中的 `oldValue`// 賦值，因為 Vue 已經(jīng)自動為你進行了同步。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',// 如果你在渲染函數(shù)中給多個元素都應(yīng)用了相同的 ref 名，// 那么 `$refs.myRef` 會變成一個數(shù)組。refInFor: true }使用render函數(shù)創(chuàng)建組件
訪問this
-
render() 函數(shù)可以訪問同一個 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.
-
VNode 必須唯一
組件樹中的所有 VNode 必須是唯一的。這意味著，下面的渲染函數(shù)是不合法的：
render: function (h) {var p = h('p', 'hi')return h('div', [// 錯誤 - 重復(fù)的 VNodep, p]) }如果你真的非常想在頁面上渲染多個重復(fù)的元素或者組件，你可以使用一個工廠函數(shù)來做這件事。比如下面的這個渲染函數(shù)就可以完美渲染出 6 個相同的段落：
render: function (h) {return h('div',[1,2,3,4,5,6].map(function () {return h('p', 'hi')})) }render函數(shù)的應(yīng)用
- 標題組件
- 替代v-for 和 v-if
- 自定義v-model
MVVM
MVVM 模型
MVVM -Model View ViewModel
-
M：模型(Model) ：對應(yīng) data 中的數(shù)據(jù)
-
V：視圖(View) ：模板
-
VM：視圖模型(ViewModel) ： Vue 實例對象
最核心的就是 ViewModel 。ViewModel 包含 DOM Listeners 和 Data Bindings。
Data Bindings 用于將數(shù)據(jù)綁定到 View 上顯示，DOM Listeners 用于監(jiān)聽操作。
- 從 Model 到 View 的映射，也就是 Data Bindings 。這樣可以大量省略我們手動 update View 的代碼和時間。
- 從 View 到 Model 的事件監(jiān)聽，也就是 DOM Listeners 。這樣我們的 Model 就會隨著 View 觸發(fā)事件而改變。
在Vue中的mvvm:
- data中所有的屬性、computed的計算屬性、methods中的方法，最后都出現(xiàn)在了vm身上。
- vm身上所有的屬性 及 Vue原型上所有屬性，在Vue模板{{}}中都可以直接使用。
MVVM思想有兩個方向
一是將模型轉(zhuǎn)換成視圖，即將后端傳遞的數(shù)據(jù)轉(zhuǎn)換成看到的頁面。實現(xiàn)方式是：數(shù)據(jù)綁定。
二是將視圖轉(zhuǎn)換成模型，即將看到的頁面轉(zhuǎn)換成后端的數(shù)據(jù)。實現(xiàn)的方式是：DOM 事件監(jiān)聽。
這兩個方向都實現(xiàn)的，就稱為數(shù)據(jù)的雙向綁定。
MVC 和 MVVM 的區(qū)別(關(guān)系)
MVC - Model View Controller( controller: 控制器 )，M 和 V 和 MVVM 中的 M 和 V 意思一樣，C 指頁面業(yè)務(wù)邏輯。使用 MVC 的目的就是將 M 和 V 的代碼分離，但 MVC 是單向通信，也就是將 Model 渲染到 View 上，必須通過 Controller 來承上啟下。
MVC 和 MVVM 的區(qū)別(關(guān)系)并不是 ViewModel 完全取代了 Controller 。
ViewModel 目的在于抽離 Controller 中的數(shù)據(jù)渲染功能，而不是替代。其他操作業(yè)務(wù)等還是應(yīng)該放在 Controller 中實現(xiàn)，這樣就實現(xiàn)了業(yè)務(wù)邏輯組件的復(fù)用。
常見關(guān)于Vue的面試題
什么是MVVM思想？
MVVM -Model View ViewModel，它包括 DOM Listenters 和 Data bindings，前者實現(xiàn)了頁面與數(shù)據(jù)的綁定，當頁面操作數(shù)據(jù)的時候 DOM 和 Model 也會發(fā)生相應(yīng)的變化。后者實現(xiàn)了數(shù)據(jù)與頁面的綁定，當數(shù)據(jù)發(fā)生變化的時候會自動渲染頁面。
MVVM相對于MVC的優(yōu)勢？
VUE是如何體現(xiàn)MVVM思想的？
響應(yīng)式原理
數(shù)據(jù)代理
數(shù)據(jù)代理：通過一個對象代理對另一個對象中屬性的操作（讀/寫）
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
模擬響應(yīng)式的實現(xiàn)
響應(yīng)式原理：在改變數(shù)據(jù)的時候，視圖會跟著更新。
<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的響應(yīng)式函數(shù)reactivefunction reactive (target, key, value) {Object.defineProperty(target, key, {get () {console.log(`訪問了${key}屬性`)return value},set (newValue) {console.log(`將${key}由->${value}->設(shè)置成->${newValue}`)if (value !== newValue) {value = newValue;updateView(key, newValue);}}})}// 模擬 Vue 實例，代理data中的每一個屬性，后增加的屬性，不具有響應(yīng)式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這個過程就叫做響應(yīng)式。
Vue中的數(shù)據(jù)代理
Vue中的數(shù)據(jù)代理：通過vue實例來代理data對象中屬性的操作（讀/寫）
Vue中數(shù)據(jù)代理的好處：更加方便的操作data中的數(shù)據(jù)
響應(yīng)式原理
-
vue在實例化時，將data中的所有屬性都通過Object.defineProperty添加到vue實例上
-
為每一個添加到vue實例上的屬性都指定setter和getter，在getter/setter內(nèi)部去操作（讀/寫）data中對應(yīng)的屬性
-
每個vue實例都對應(yīng)一個 watcher 實例，它會在組件渲染的過程中把“接觸”過的數(shù)據(jù)記錄為依賴。之后當依賴屬性的 setter 觸發(fā)時，會通知 watcher，從而使頁面中綁定這個屬性的部分重新渲染。
總結(jié)
**第一步：**組件初始化的時候，先給每一個Data屬性都注冊getter，setter，也就是reactive化。然后再new 一個自己的Watcher對象，此時watcher會立即調(diào)用組件的render函數(shù)去生成虛擬DOM。在調(diào)用render的時候，就會需要用到data的屬性值，此時會觸發(fā)getter函數(shù)，將當前的Watcher函數(shù)注冊進sub里。
**第二步：**當data屬性發(fā)生改變之后，就會遍歷sub里所有的watcher對象，通知它們?nèi)ブ匦落秩窘M件。
響應(yīng)式屬性
vue的響應(yīng)式屬性
當一個 Vue 實例被創(chuàng)建時，它將 data 對象中的所有的屬性加入到 Vue 的響應(yīng)式系統(tǒng)中。當這些 屬性的值發(fā)生改變時，視圖將會產(chǎn)生“響應(yīng)”，即匹配更新為新的值。
// 我們的數(shù)據(jù)對象 var data = { a: 1 }// 該對象被加入到一個 Vue 實例中 var vm = new Vue({data: data })// 獲得這個實例上的 property // 返回源數(shù)據(jù)中對應(yīng)的字段 vm.a == data.a // => true// 設(shè)置 property 也會影響到原始數(shù)據(jù) vm.a = 2 data.a // => 2// ……反之亦然 data.a = 3 vm.a // => 3由于 Vue 會在初始化實例時對data中的屬性執(zhí)行 getter/setter 轉(zhuǎn)化，所以屬性必須在 data 對象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。
當這些數(shù)據(jù)改變時，視圖會進行重渲染。值得注意的是只有當實例被創(chuàng)建時就已經(jīng)存在于 data 中的 屬性 才是響應(yīng)式的。也就是說如果你添加一個新的 屬性，比如：
var vm = new Vue({data:{a:1,} })// `vm.a` 是響應(yīng)式的vm.b = 2 // `vm.b` 是非響應(yīng)式的那么對 b 的改動將不會觸發(fā)任何視圖的更新。
對于已經(jīng)創(chuàng)建的實例， Vue 不允許動態(tài)添加根級響應(yīng)式 property。如果你知道你會在晚些時候需要一個 property，一開始你必須在初始化實例前在data中聲明所有根級響應(yīng)式屬性，并為這些屬性設(shè)置初始值。比如：
var vm = new Vue({data:{// 聲明 message 為一個空值字符串message: '',// 聲明 items 為一個空數(shù)組items:[],// 聲明 zhagnsan 為一個空對象zhagnsan:{}} }) // 之后設(shè)置 message、tems、zhangsan 都是是響應(yīng)式的 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不是是響應(yīng)式的使用上面的方式添加的age屬性不是響應(yīng)式的。
如果想要Vue檢測到age屬性，可以使用下面的方法向嵌套對象添加響應(yīng)式 屬性
- Vue.set(object, propertyName, value)
- vm.$set(object, propertyName, value)
如果需要給user對象添加多個屬性，可以使用 Object.assign
vm.user = Object.assign({}, vm.user, {weight:100, height:180});檢測數(shù)組元素值的變化
檢測數(shù)組
Vue 不能檢測以下數(shù)組的變動：
檢測數(shù)組的變化有兩種方式：
-
使用被 Vue 包裹的數(shù)組變更方法，使用這些方法將會觸發(fā)視圖更新。這些被包裹過的方法包括push()、pop()、shift()、unshift()、splice()、sort()、reverse()
-
使用set函數(shù)改變數(shù)組元素：Vue.set(array, index, item) 或 vm.$set(array, index, item)
為了解決第一類問題，以上兩種方式都可以實現(xiàn)：
Vue.set(vm.hobby, 0, '學(xué)習(xí)'); vm.$set(vm.hobby, 0, '學(xué)習(xí)');vm.hobby.splice(0, 1, '學(xué)習(xí)');為了解決第二類問題vm.items.length = newLength，你可以使用 splice：
vm.items = vm.items.splice(newLength);替換數(shù)組
變更方法，顧名思義，會變更調(diào)用了這些方法的原始數(shù)組。相比之下，也有非變更方法，例如 filter()、concat() 和 slice()。它們不會變更原始數(shù)組，而總是返回一個新數(shù)組。當使用非變更方法時，可以用新數(shù)組替換舊數(shù)組：
this.hobby = this.hobby.filter( item => !item.includes('運動'));總結(jié)
以上是生活随笔為你收集整理的vue2的动画,混入Mixin,插件,指令,渲染函数,响应式,MVVM的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【晓松奇谈】历史是什么，人生是什么，世界
- 下一篇： vue中实现 楼层效果