快捷導(dǎo)航

Vue開發(fā)中常見的套路和技巧總結(jié)

更新時(shí)間：2020年11月24日 17:09:06 作者：steven_jxy

這篇文章主要給大家介紹了關(guān)于Vue開發(fā)中常見的套路和技巧的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

屬性排放

export default {
 name: '名稱',
 components: { // 組件掛載a},
 created(){} // 數(shù)據(jù)獲取
 beforeMount() {}, // 數(shù)據(jù)獲取
 data: () => ({}), //響應(yīng)式數(shù)據(jù)
 computed: {} // 計(jì)算屬性集合
 methods: {} // 方法集合
 ... // 銷毀頁面不要的資源
}

管理請求加載狀態(tài)

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": '' // 對拼接內(nèi)容進(jìn)行重寫
 }
 },
 ....
}

對developer和build的打包進(jìn)行不同配置

大部分開發(fā)者都喜歡將Vue的config寫在一個(gè)文件中，看起來是沒有問題，但是隨著環(huán)境的變化，項(xiàng)目優(yōu)化，WebPack插件，等等具有針對性的配置進(jìn)來后，就會(huì)顯得稍微雜亂了，這個(gè)時(shí)候就可以考慮做單獨(dú)的配置，通過process.dev分別對不同的環(huán)境進(jìn)行一個(gè)config的引入，下面貼出我的配置方式。我在項(xiàng)目根目錄下新建了一個(gè)config目錄，里面將公共的方法進(jìn)行拆包成一個(gè)public.js其他的根據(jù)生產(chǎn)環(huán)境和線下環(huán)境進(jìn)行一個(gè)區(qū)分的編譯。

-- 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

計(jì)算屬性實(shí)用

// 計(jì)算屬性
computed: {
 filterList: function () {
 return this.showData.filter(function (data) {
 // 返回需要顯示的數(shù)據(jù)
 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:
 // ...默認(rèn)獲取列表
 break;
 }
}

保持對Props的數(shù)據(jù)驗(yàn)證規(guī)范

props: {
 test: {
  type: String,
  default: ''
 },
 test2: {
  type: [Number, String],
  default: 1
 },
 test3: {
  required: false,
  type: Object
 }
}

組件名稱使用

大多時(shí)候，我們在組件中定義的name都是作為在template模板中使用的名稱，這里建議使用駝峰命名，因?yàn)樵趘ue中對駝峰命名做出了很好的解析。

// GanMessage.vue組件
export default {
 name: 'GanMessage'
 .....
}

// 引入后使用
components: {
 [GanMessage.name]: GanMessage
}

// 模板中使用
<template>
 <gan-message/>
</template>

模板引擎調(diào)試

大多數(shù)時(shí)候，在template上面寫一些邏輯非常難調(diào)試，都是直接看效果的，對于一些值來說，變得無法掌控，所以說在開發(fā)環(huán)境中，我都會(huì)在原型上掛一個(gè)全局的console.log方法進(jìn)行調(diào)試

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

// 使用
<template>
 {{$logs('1111')}}
</template>

獲取數(shù)據(jù)的生命周期

對于數(shù)據(jù)的獲取一直都是又存在爭議的，大部分同學(xué)都是在created中獲取的吧，我個(gè)人是在beforeMount中進(jìn)行后臺數(shù)據(jù)請求獲取的

async beforeMount(){
 const data = await getUserInfo();
}

使用async 和 await

大多數(shù)時(shí)候，在使用Promise的時(shí)候都是通過.then，.catch，.finally來進(jìn)行處理的。但其實(shí)我更加的推薦使用async異步函數(shù)的方式來進(jìn)行Pormise的處理，我們只需要進(jìn)行數(shù)據(jù)的獲取就好了，通過try異常捕獲可以快速的對錯(cuò)誤進(jìn)行一個(gè)好的排查和拋出。參考上面獲取數(shù)據(jù)的生命周期可以看到

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>

總結(jié)

到此這篇關(guān)于Vue開發(fā)中常見的套路和技巧總結(jié)的文章就介紹到這了,更多相關(guān)Vue開發(fā)常見套路和技巧內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: