屬性排放

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');
 },// 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開發中常見的套路和技巧總結的文章就介紹到這了,更多相關Vue開發常見套路和技巧內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！