Vue開發中的一些常見套路和技巧

2021-10-12 06:27:06 字數 1659 閱讀 7698

屬性排放

export default ,

created(){} // 資料獲取

beforemount() {}, // 資料獲取

data: () => ({}), //響應式資料

computed: {} // 計算屬性集合

methods: {} // 方法集合

… // 銷毀頁面不要的資源

}管理請求載入狀態

async beforemount() catch (error) finally

}proxy跨域

proxy: },…

}– config

— dev.js

— build.js

— public.js

vue.config.js

const devconfig = require(』./config/dev』)

const buildconfig = require(』./config/build』)

module.exports = process.env.node_env === 『development』 ? devconfig : buildconfig

計算屬性實用

// 計算屬性

computed: )

}// dom

集合方法

tablefactory(action)

}保持對props的資料驗證規範

props: ,

test2: ,

test3:

}元件名稱使用

大多時候,我們在元件中定義的name都是作為在template模板中使用的名稱,這裡建議使用駝峰命名,因為在vue中對駝峰命名做出了很好的解析。

// ganmessage.vue元件

export default

// 引入後使用

components:

// 模板中使用

模板引擎除錯

大多數時候,在template上面寫一些邏輯非常難除錯,都是直接看效果的,對於一些值來說,變得無法掌控,所以說在開發環境中,我都會在原型上掛乙個全域性的console.log方法進行除錯

vue.prototype.$logs = window.console.log;

// 使用

}獲取資料的生命週期

對於資料的獲取一直都是又存在爭議的,大部分同學都是在created中獲取的吧,我個人是在beforemount中進行後台資料請求獲取的

async beforemount()

使用async 和 await

大多數時候,在使用promise的時候都是通過.then,.catch,.finally來進行處理的。但其實我更加的推薦使用async非同步函式的方式來進行pormise的處理,我們只需要進行資料的獲取就好了,通過try異常捕獲可以快速的對錯誤進行乙個好的排查和丟擲。參考上面獲取資料的生命週期可以看到

async beforemount() catch (error) finally {}

}watch

watch: ,

immediate: true,

deep:true

},『obj.a』: ,

immediate: true,

// deep: true

}在自定義事件中,該值是從其子元件中捕獲的值

vue 專案開發中的一些bug

1.property or method handleselectionchange is not defined.vue定義方法需要定義在key為methods字段裡面 2.hamburger元件從頭部移動選單欄 不能顯示 解決 選單檔案引入hamburger元件 3.元件無法顯示 解決 原來是c...

iOS開發的一些奇巧淫技3

ios開發的一些奇巧淫技1 2 cgfloat和float的區別?1 typedef cgfloat type cgfloat 這裡可以看到cgfloat是cgfloat type的巨集定義,那麼這個又是什麼?1 2 3 4 5 6 7 8 9 10 11 if defined lp64 lp64 ...

vue開發中的一些簡單騷操作

在開發過程中,我們可以定義很多引數,這時需要通過不同的操作來改變不同的引數,這就比較複雜了,雖然不難,但是 多了也不好看,這時我們就可以通過簡單的操作就行簡化 1 物件使用方括號 let obj var newname name console.log obj.name it大蟲 console.l...