溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關利用Vue開發的技巧有哪些，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
屬性排放
export default {
name: '名稱',
components: { // 組件掛載a},
created(){} // 數據獲取
beforeMount() {}, // 數據獲取
data: () => ({}), //響應式數據
computed: {} // 計算屬性集合
methods: {} // 方法集合
... // 銷毀頁面不要的資源
}管理請求加載狀態
async beforeMount(){
// 開始加載
this.loading = true
try {
const data = await getUserInfo()
} catch (error) {
console.log(error)
} finally {
// 停止加載
this.loading = false
}
}Proxy跨域
proxy: {
"/api": {
target: 'http://.......',
changeOrigin: true, // 是否改變域名
ws: true, // socket
pathRewrite: {
// 路徑重寫
"/api": '' // 對拼接內容進行重寫
}
},
....
}對developer和build的打包進行不同配置
大部分開發者都喜歡將Vue的config寫在一個文件中，看起來是沒有問題，但是隨著環境的變化，項目優化，WebPack插件，等等具有針對性的配置進來后，就會顯得稍微雜亂了，這個時候就可以考慮做單獨的配置，通過process.dev分別對不同的環境進行一個config的引入，下面貼出我的配置方式。我在項目根目錄下新建了一個config目錄，里面將公共的方法進行拆包成一個public.js其他的根據生產環境和線下環境進行一個區分的編譯。
-- config
--- dev.js
--- build.js
--- public.js
vue.config.js
# 代碼 vue.config.js
const devConfig = require('./config/dev')
const buildConfig = require('./config/build')
module.exports = process.env.NODE_ENV === 'development' ? devConfig : buildConfig計算屬性實用
// 計算屬性
computed: {
filterList: function () {
return this.showData.filter(function (data) {
// 返回需要顯示的數據
return data.isShow
})
}
// DOM
<ul>
<li v-for="item in filterList" :key="item.id">
{{ item.name }}
</li>
</ul>集合方法
tableFactory(action) {
switch (action) {
case 'update':
...
break;
case 'create':
...
break;
case 'delete':
...
break;
default:
// ...默認獲取列表
break;
}
}保持對Props的數據驗證規范
props: {
test: {
type: String,
default: ''
},
test2: {
type: [Number, String],
default: 1
},
test3: {
required: false,
type: Object
}
}組件名稱使用
大多時候，我們在組件中定義的name都是作為在template模板中使用的名稱，這里建議使用駝峰命名，因為在vue中對駝峰命名做出了很好的解析。
// GanMessage.vue組件
export default {
name: 'GanMessage'
.....
}
// 引入后使用
components: {
[GanMessage.name]: GanMessage
}
// 模板中使用
<template>
<gan-message/>
</template>模板引擎調試
大多數時候，在template上面寫一些邏輯非常難調試，都是直接看效果的，對于一些值來說，變得無法掌控，所以說在開發環境中，我都會在原型上掛一個全局的console.log方法進行調試
vue.prototype.$logs = window.console.log;
// 使用
<template>
{{$logs('1111')}}
</template>獲取數據的生命周期
對于數據的獲取一直都是又存在爭議的，大部分同學都是在created中獲取的吧，我個人是在beforeMount中進行后臺數據請求獲取的
async beforeMount(){
const data = await getUserInfo();
}使用async 和 await
大多數時候，在使用Promise的時候都是通過.then，.catch，.finally來進行處理的。但其實我更加的推薦使用async異步函數的方式來進行Pormise的處理，我們只需要進行數據的獲取就好了，通過try異常捕獲可以快速的對錯誤進行一個好的排查和拋出。參考上面獲取數據的生命周期可以看到
async beforeMount(){
try {
const data = await getUserInfo()
} catch (error) {
console.log(error)
} finally {}
}watch
watch: {
obj: {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true,
deep:true
},
'obj.a': {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true,
// deep: true
}
}
在自定義事件中，該值是從其子組件中捕獲的值
<!-- Child -->
<template>
<input type="text" @input="$emit('custom-event', 'hello')" />
</template>
<!-- Parent -->
<template>
<Child @custom-event="handleCustomevent" />
</template>
<script>
export default {
methods: {
handleCustomevent (value) {
console.log(value) // hello
}
}
}
</script>以上就是利用Vue開發的技巧有哪些，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
