Vue2.0實用筆記

一、vue中的過渡、動畫效果

單組件（<transition name="" mode=""><p v-if=""></p></transition>）
v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態。
(定義了過渡名稱，可用過渡名代替前綴v）
v-enter-active和v-leave-active體現可見的主要狀態，可在此添加主效果；
v-enter是過渡的最開始狀態，v-leave-to是結束的狀態，可在此添加開始和結束的狀態。
過渡模式
in-out(先進入，舊元素再消失),out-in(舊元素先消失，新元素再進入)

列表（<transition-group><p v-for=""><p></transition-group>）

二、功能插件

①vue-lazyload(圖片懶加載)

②mint-ui/vux(輪播圖，各類彈框、提示框）

③vue-matomo(前端統計，使用作記錄瀏覽量)詳細連接：https://www.cnblogs.com/heior...

④vue-infinite-scroll（無限加載）

⑤fastclick(移動端click事件延遲問題)
npm install fastclick --save
impor Fastclick from 'fastclick'
Factclick.attach(document.body);

三、數據和渲染

組件以templete形式來渲染，開始遍歷data中的數據，mounted時掛載虛擬DOM。

經過設置getter和setter追蹤更新，只有在data中定義的數據才能被跟蹤更新，數組元素髮生變化不能追蹤，對象的屬性能夠(watch-deep:true)。

computed中的數據在mounted後觸發計算，起始不進行watch監聽，只有監聽數據發生變化時才觸發監聽函數（監聽函數先於computed觸發）

DOM的異步更新。vue實例中，可追蹤數據發生變化時，vue會開啓一個隊列，把變化記錄其中，在下一次事件循環tick前，進行去重優化，而後從新渲染DOM。有時咱們須要在DOM渲染以後再執行如下操做，好比DOM操做（渲染前執行會出錯狀況下），須要特殊處理vue.nextTick(callback)，則能夠在本輪tick中操做，在下一輪tick時，DOM渲染完執行。

四、vue-router使用及路由原理解析

路由的分類：前端路由和後端路由。早起路由是後端負責，隨着前端複雜程度的上升以及先後端分離的普及，後端路由缺點逐漸明顯，依賴網速、用戶體驗差、先後端耦合，後端路由逐漸消失。

前端路由模式：hash模式和history模式。哈希模式是最先的路由模式，優勢是兼容低版本，缺點是url中帶#，不美觀，某些狀況下不會刷新。history模式是HTML5標準新增的API，出兼容低版本外可彌補hash缺點。

路由的基本原理：單頁面應用中（多頁面不涉及路由的問題），咱們但願公用一部分頁面（頭部和底部），達到經過改變中間內容完成應用的全部展現和功能，其中一個需求就是在路由跳轉時刷新頁面能夠保持當前狀態。最先經過hash實現了這一需求，經過hashchange事件可監聽hash的變化，實現不一樣頁面的操做。後來HTML5提出了history，並提供了history.pushState()和history.replaceState()方法實現頁面的不刷新跳轉，不足的是，我沒有方法監聽history的變化，由此咱們能夠分析url的變化來實現響應的操做①瀏覽器前進、後退按鈕②a標籤的跳轉③代碼中location.href跳轉，其中瀏覽器按鈕可經過onpopstate事件監聽，a標籤可禁止其默認行爲，由此，咱們能夠監聽history的變化。

vue-router：路由跳轉涉及功能鉤子函數，beforeEach(to, from, next)--全局守衛函數，可在路由發生變化時作處理；組件中使用的鉤子函數beforeRouterEnter(to, from, next)---組件還沒有被建立，在此this無用；beforeRouterUpdate(to, from, next)--組件被複用時，，觸發此函數，好比動態路由中的參數變化；beforeRouterLeave(to, from, next)--離開當前組件時調用。

五、過濾器的使用

filter.js:
const filters = {
    filter1: (value) => {
        doSomthing;
    },
    filter2: (value) => {
        doSomthing;
    },
}
export default filters;
import filters from './filters/filter'
//經過object.keys引入vue中
Object.keys(filters).forEach(k=>Vue.filter(k,filters[k]))