vue使用技巧及vue項目中遇到的問題

來源：懂視網責編：小采時間：2020-11-27 22:13:41

vue使用技巧及vue項目中遇到的問題

vue使用技巧及vue項目中遇到的問題:這里給大家分享一下vue中的一些技巧，希望對大家有用處。（話不多說上代碼） 1，vue路由攔截瀏覽器后退實現表單保存類似需求（為了防止用戶突然離開，沒有保存已輸入的信息。） //在路由組件中： mounted(){ }, beforeRouteLeave (to, fro

推薦度：

點擊下載本文 文檔為doc格式

導讀vue使用技巧及vue項目中遇到的問題:這里給大家分享一下vue中的一些技巧，希望對大家有用處。（話不多說上代碼） 1，vue路由攔截瀏覽器后退實現表單保存類似需求（為了防止用戶突然離開，沒有保存已輸入的信息。） //在路由組件中： mounted(){ }, beforeRouteLeave (to, fro

這里給大家分享一下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 }
 ]
 })

3，路由的項目啟動頁和404頁面

一般項目都會設置這個，如果默認進入地址會跳到login頁面，如果你輸入的是一個沒有用的路由或者是空路由會跳轉到notFind頁面（你自己設置的404頁面）

 export default new Router({
 routes: [
 {
 path: '/', // 項目啟動頁
 redirect:'/login' // 重定向到下方聲明的路由 
 },
 {
 path: '*', // 404 頁面 
 component: () => import('./notFind') // 或者使用component也可以的
 },
 ]
 })

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"); // 改變對象

這個是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 // 默認觸發一次
 },
 },

總結

以上所述是小編給大家介紹的vue使用技巧及vue項目中遇到的問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com