這裏給大家分享一下vue中的一些技巧,希望對大家有用處。(話不多說上代碼)
1,vue路由攔截瀏覽器後退實現表單保存類似需求(爲了防止用戶突然離開,沒有保存已輸入的信息。)
//在路由組件中:
mounted(){
},
beforeRouteLeave (to, from, next) {
if(用戶已經輸入信息){
//出現彈窗提醒保存表單,或者自動後臺爲其保存
}else{
next(true);//用戶離開
}
請參考vue文檔全局鉤子和組件鉤子
2,路由懶加載寫法:
// 我所採用的方法,個人感覺比較簡潔一些,少了一步引入賦值。
const router = new VueRouter({
routes: [
path: '/app',
component: () => import('./app'), // 引入組件
]
})
// Vue路由文檔的寫法:
const app = () => import('./app.vue') // 引入組件
const router = new VueRouter({
routes: [
{ path: '/app', component: app }
]
})
//前端全棧學習交流圈:866109386
//面向1-3經驗年前端開發人員
//幫助突破技術瓶頸,提升思維能力
3,路由的項目啓動頁和404頁面
一般項目都會設置這個,如果默認進入地址會跳到login頁面,如果你輸入的是一個沒有用的路由或者是空路由會跳轉到notFind頁面(你自己設置的404頁面)
export default new Router({
routes: [
{
path: '/', // 項目啓動頁
redirect:'/login' // 重定向到下方聲明的路由
},
{
path: '*', // 404 頁面
component: () => import('./notFind') // 或者使用component也可以的
},
]
})
前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力
羣內有大量PDF可供自取,更有乾貨實戰項目視頻進羣免費領取。
4,setInterval路由跳轉繼續運行並沒有銷燬問題
beforeDestroy(){
//我通常是把setInterval()定時器賦值給this實例,然後就可以像下面這麼暫停。
clearInterval(this.intervalid);
},
beforeDestroy方法是生命週期裏組件銷燬前執行的鉤子函數,在離開的時候會觸發這個方法,這個方法在其他的地方也會有妙用,希望大家可以去了解一下。
5,setTimeout/setInterval this指向改變,無法用this訪問VUe實例
這個地方大家的默認方法肯定是:
//使用變量訪問this實例
let self=this;
setTimeout(function () {
console.log(self);//使用self變量訪問this實例
},1000);
其實這個地方我們可以用箭頭函數,因爲箭頭函數會改變this的指向,而指向的剛好是自己的父級this,所以我們可以這樣用:
//箭頭函數訪問this實例 因爲箭頭函數本身沒有綁定this
setTimeout(() => {
console.log(this);
}, 500);
這樣我們的this就是指向我們的vue實例了。
6,Vue 數組/對象更新 視圖不更新
方法一:直接使用最簡單也是最有效的方法,深拷貝對象或者數組,視圖會進行更新,不過會有一個缺點,深拷貝後的數組或者對象不是原來的那個數組或者對象,是你現在改變了之後的值。
上代碼:
你的對象或者數組=JSON.parse(JSON.stringify(你的對象或者數組))
先進行轉字符串,再轉回對象,這個就進行了一個拷貝的過程,會觸發視圖的改變,同時也進行了一個數組的替換,有利有弊。
方法二:this.$set(你要改變的數組/對象,你要改變的位置/key,你要改成什麼value)
this.$set(this.arr, 0, "OBKoro1"); // 改變數組
this.$set(this.obj, "c", "OBKoro1"); // 改變對象
前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力
羣內有大量PDF可供自取,更有乾貨實戰項目視頻進羣免費領取。
這個是vue專門爲改變不了數組設定的一個方法,使用也很簡單(如果還是不懂請參考vue文檔)
7,深度watch與watch立即觸發回調
watch很多人都在用,但是這watch中的這兩個選項deep、immediate,或許不是很多人都知道,我猜。
選項:deep
在選項參數中指定 deep: true,可以監聽對象中屬性的變化。
選項:immediate
在選項參數中指定 immediate: true, 將立即以表達式的當前值觸發回調,也就是默認觸發一次。
watch: {
obj: {
handler(val, oldVal) {
console.log('屬性發生變化觸發這個回調',val, oldVal);
},
deep: true // 監聽這個對象中的每一個屬性變化
},
step: { // 屬性
//watch
handler(val, oldVal) {
console.log("默認觸發一次", val, oldVal);
},
immediate: true // 默認觸發一次
},
},