Vue2.0實用筆記

maochunguang 發(fā)布于2019-08-02 16:08 / 2831人閱讀

摘要：實例中，可追蹤數據發(fā)生變化時，會開啟一個隊列，把變化記錄其中，在下一次事件循環(huán)前，進行去重優(yōu)化，然后重新渲染。最早通過實現(xiàn)了這一需求，通過事件可監(jiān)聽的變化，實現(xiàn)不同頁面的操作。過濾器的使用通過引入中

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

單組件（

）
v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態(tài)。
(定義了過渡名稱，可用過渡名代替前綴v）
v-enter-active和v-leave-active體現(xiàn)可見的主要狀態(tài)，可在此添加主效果；
v-enter是過渡的最開始狀態(tài)，v-leave-to是結束的狀態(tài)，可在此添加開始和結束的狀態(tài)。
過渡模式
in-out(先進入，舊元素再消失),out-in(舊元素先消失，新元素再進入)

列表（

）

2、功能插件

①vue-lazyload(圖片懶加載)

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

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

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

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

3、數據和渲染

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

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

computed中的數據在mounted后觸發(fā)計算，起始不進行watch監(jiān)聽，只有監(jiān)聽數據發(fā)生變化時才觸發(fā)監(jiān)聽函數（監(jiān)聽函數先于computed觸發(fā)）

DOM的異步更新。vue實例中，可追蹤數據發(fā)生變化時，vue會開啟一個隊列，把變化記錄其中，在下一次事件循環(huán)tick前，進行去重優(yōu)化，然后重新渲染DOM。有時我們需要在DOM渲染之后再執(zhí)行以下操作，比如DOM操作（渲染前執(zhí)行會出錯情況下），需要特殊處理vue.nextTick(callback)，則可以在本輪tick中操作，在下一輪tick時，DOM渲染完執(zhí)行。

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

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

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

路由的基本原理：單頁面應用中（多頁面不涉及路由的問題），我們希望公用一部分頁面（頭部和底部），達到通過改變中間內容完成應用的所有展示和功能，其中一個需求就是在路由跳轉時刷新頁面可以保持當前狀態(tài)。最早通過hash實現(xiàn)了這一需求，通過hashchange事件可監(jiān)聽hash的變化，實現(xiàn)不同頁面的操作。后來HTML5提出了history，并提供了history.pushState()和history.replaceState()方法實現(xiàn)頁面的不刷新跳轉，不足的是，我沒有方法監(jiān)聽history的變化，由此我們可以分析url的變化來實現(xiàn)響應的操作①瀏覽器前進、后退按鈕②a標簽的跳轉③代碼中l(wèi)ocation.href跳轉，其中瀏覽器按鈕可通過onpopstate事件監(jiān)聽，a標簽可禁止其默認行為，由此，我們可以監(jiān)聽history的變化。

vue-router：路由跳轉涉及功能鉤子函數，beforeEach(to, from, next)--全局守衛(wèi)函數，可在路由發(fā)生變化時做處理；組件中使用的鉤子函數beforeRouterEnter(to, from, next)---組件尚未被創(chuàng)建，在此this無用；beforeRouterUpdate(to, from, next)--組件被復用時，，觸發(fā)此函數，比如動態(tài)路由中的參數變化；beforeRouterLeave(to, from, next)--離開當前組件時調用。

5、過濾器的使用

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]))

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54721.html

Vue2.0實用筆記

摘要：實例中，可追蹤數據發(fā)生變化時，會開啟一個隊列，把變化記錄其中，在下一次事件循環(huán)前，進行去重優(yōu)化，然后重新渲染。最早通過實現(xiàn)了這一需求，通過事件可監(jiān)聽的變化，實現(xiàn)不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動畫效果單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態(tài)。(定...

draveness 2019-08-23 16:09 評論0 收藏0
Vue2.0實用筆記

摘要：實例中，可追蹤數據發(fā)生變化時，會開啟一個隊列，把變化記錄其中，在下一次事件循環(huán)前，進行去重優(yōu)化，然后重新渲染。最早通過實現(xiàn)了這一需求，通過事件可監(jiān)聽的變化，實現(xiàn)不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動畫效果單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態(tài)。(定...

JowayYoung 2019-08-30 15:56 評論0 收藏0
2017年3月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發(fā)布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...

ermaoL 2019-06-27 16:30 評論0 收藏0
2017年3月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發(fā)布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...

kamushin233 2019-08-29 12:34 評論0 收藏0