資訊專欄INFORMATION COLUMN
摘要：實例中，可追蹤數(shù)據(jù)發(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是結(jié)束的狀態(tài)，可在此添加開始和結(jié)束的狀態(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、數(shù)據(jù)和渲染
組件以templete形式來渲染，開始遍歷data中的數(shù)據(jù)，mounted時掛載虛擬DOM。
通過設(shè)置getter和setter追蹤更新，只有在data中定義的數(shù)據(jù)才能被跟蹤更新，數(shù)組元素發(fā)生變化不能追蹤，對象的屬性可以(watch-deep:true)。
computed中的數(shù)據(jù)在mounted后觸發(fā)計算，起始不進行watch監(jiān)聽，只有監(jiān)聽數(shù)據(jù)發(fā)生變化時才觸發(fā)監(jiān)聽函數(shù)（監(jiān)聽函數(shù)先于computed觸發(fā)）
DOM的異步更新。vue實例中，可追蹤數(shù)據(jù)發(fā)生變化時，vue會開啟一個隊列，把變化記錄其中，在下一次事件循環(huán)tick前，進行去重優(yōu)化，然后重新渲染DOM。有時我們需要在DOM渲染之后再執(zhí)行以下操作，比如DOM操作（渲染前執(zhí)行會出錯情況下），需要特殊處理vue.nextTick(callback)，則可以在本輪tick中操作，在下一輪tick時，DOM渲染完執(zhí)行。
4、vue-router使用及路由原理解析
路由的分類：前端路由和后端路由。早起路由是后端負責(zé)，隨著前端復(fù)雜程度的上升以及前后端分離的普及，后端路由缺點逐漸明顯，依賴網(wǎng)速、用戶體驗差、前后端耦合，后端路由逐漸消失。
前端路由模式：hash模式和history模式。哈希模式是最早的路由模式，優(yōu)點是兼容低版本，缺點是url中帶#，不美觀，某些情況下不會刷新。history模式是HTML5標準新增的API，出兼容低版本外可彌補hash缺點。
路由的基本原理：單頁面應(yīng)用中（多頁面不涉及路由的問題），我們希望公用一部分頁面（頭部和底部），達到通過改變中間內(nèi)容完成應(yīng)用的所有展示和功能，其中一個需求就是在路由跳轉(zhuǎn)時刷新頁面可以保持當前狀態(tài)。最早通過hash實現(xiàn)了這一需求，通過hashchange事件可監(jiān)聽hash的變化，實現(xiàn)不同頁面的操作。后來HTML5提出了history，并提供了history.pushState()和history.replaceState()方法實現(xiàn)頁面的不刷新跳轉(zhuǎn)，不足的是，我沒有方法監(jiān)聽history的變化，由此我們可以分析url的變化來實現(xiàn)響應(yīng)的操作①瀏覽器前進、后退按鈕②a標簽的跳轉(zhuǎn)③代碼中l(wèi)ocation.href跳轉(zhuǎn)，其中瀏覽器按鈕可通過onpopstate事件監(jiān)聽，a標簽可禁止其默認行為，由此，我們可以監(jiān)聽history的變化。
vue-router：路由跳轉(zhuǎn)涉及功能鉤子函數(shù)，beforeEach(to, from, next)--全局守衛(wèi)函數(shù)，可在路由發(fā)生變化時做處理；組件中使用的鉤子函數(shù)beforeRouterEnter(to, from, next)---組件尚未被創(chuàng)建，在此this無用；beforeRouterUpdate(to, from, next)--組件被復(fù)用時，，觸發(fā)此函數(shù)，比如動態(tài)路由中的參數(shù)變化；beforeRouterLeave(to, from, next)--離開當前組件時調(diào)用。
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]))
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102742.html
摘要：實例中，可追蹤數(shù)據(jù)發(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)。(定...
摘要：實例中，可追蹤數(shù)據(jù)發(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)。(定...
平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個網(wǎng)址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...
平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個網(wǎng)址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...
閱讀 820·2023-04-25 20:18
閱讀 2104·2021-11-22 13:54
閱讀 2547·2021-09-26 09:55
閱讀 3912·2021-09-22 15:28
閱讀 2982·2021-09-03 10:34
閱讀 1719·2021-07-28 00:15
閱讀 1645·2019-08-30 14:25
閱讀 1289·2019-08-29 17:16
