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

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

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

屬性排放

export default {
 name: '名稱',
 components: { // 組件掛載a},
 created(){} // 數(shù)據(jù)獲取
 beforeMount() {}, // 數(shù)據(jù)獲取
 data: () => ({}), //響應式數(shù)據(jù)
 computed: {} // 計算屬性集合
 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)容進行重寫
 }
 },
 ....
}

對developer和build的打包進行不同配置

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

計算屬性實用

// 計算屬性
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:
 // ...默認獲取列表
 break;
 }
}

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

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>

模板引擎調(diào)試

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

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

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

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

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

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

使用async 和 await

大多數(shù)時候，在使用Promise的時候都是通過.then，.catch，.finally來進行處理的。但其實我更加的推薦使用async異步函數(shù)的方式來進行Pormise的處理，我們只需要進行數(shù)據(jù)的獲取就好了，通過try異常捕獲可以快速的對錯誤進行一個好的排查和拋出。參考上面獲取數(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: