Vue項目中常用的實用技巧匯總
前言
在 Vue 項目開發中,很容易產生一些問題,比如代碼重復、繁雜等,其實 Vue 項目開發中有很多技巧可以使用,本文將列出一些簡單且很好用的幾個技巧,幫助我們寫出漂亮的代碼。用到的技術棧是 Vue2.0 + TypeScript + vue-property-decorator + ElementUI。將用到以下幾個技巧:
- 使用 $attrs 和 $listeners 進行多層級的數據和事件傳遞
- 實現數據的雙向綁定,方便維護數據
- 使用 Mixins
- 使用動態組件去懶加載組件
- 在組件作用域內的 CSS 中使用 ::v-deep 修改組件樣式
- 使用裝飾器優化代碼
- 利用 require.context 去獲取項目目錄信息
1. 使用 $attrs 和 $listeners 進行多層級的數據和事件傳遞
先聊聊如何傳遞 Prop,可以分為靜態和動態的 Prop:
<!-- 靜態的prop --> <blog-post title="My journey with Vue"></blog-post> <!-- 動態的prop --> <blog-post v-bind:title="post.title"></blog-post> <!-- 動態的prop傳遞可以簡寫成 --> <blog-post :title="post.title"></blog-post> <!-- 需要傳遞多個prop的時候,可以一起寫在v-bind上 --> <blog-post v-bind="{ editable, title: post.title}"></blog-post>
瞭解瞭 Props 的傳遞方式,在看看官方文檔是怎麼定義 $attrs 的, 在尤大大的文檔中這樣介紹瞭 $attrs:
$attrs: 包含瞭父作用域中不作為 prop 被識別 (且獲取) 的 attribute 綁定 class 和 style 除外)。當一個組件沒有聲明任何 prop 時,這裡會包含所有父作用域的綁定 (class 和 style 除外),並且可以通過 v-bind=”$attrs” 傳入內部組件
$attrs 包含瞭傳入到父作用域中沒有在 props 聲明的其他 props,因此我們可以用 $attrs 去代替那些父組件中不需要的而子組件需要的 props, 通過 v-bind=”$attrs” 統一傳遞給後代。這樣就避免瞭一個個聲明然後再一個個傳遞。
<blog-post v-bind="$attrs"></blog-post>
上面這一行代碼就通過 v-bind=”$attrs” 的方式將本作用域中不作為 prop 的其他屬性傳遞給瞭 blog-post 組件。
父組件通過 $attrs 傳遞給後代組件後,後代組件如果想通過觸發事件來更新父組件狀態該如何處理?如果一級一級地往上 emit 事件,會不會弄得代碼太繁瑣復雜瞭?在 Vue 中可以通過 $listeners 解決這個問題,先看看官方文檔關於 $listeners 的說明:
包含瞭父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on=”$listeners” 傳入內部組件——在創建更高層次的組件時非常有用。
文檔中說瞭 $listeners 包含瞭父作用域中的事件監聽器。意思就是 $listeners 表示瞭父組件中的事件監聽器集合,隻要是觸發父組件的事件,而不是自己的,就可以用一個 v-on=”$listeners”表示。
<!-- 父組件(第一層組件) --> <componentA @on-change="handleChange" v-bind="{ editable, title: post.title}" /> <!-- 中間層的組件 --> <Child v-bind="$attrs" v-on="$listeners"/> <!-- 數據傳遞的目標組件,事件觸發的組件 --> <div @click="handleClick">{{ title }} </div> <script> export default { props: { title: String } handleClick() { this.$emit('on-change', 'New Title'); } } </script>
上面的代碼示例中,中間層的組件內通過 v-bind=”$attrs” 將其餘的 Prop 傳遞給瞭 Child 組件,再通過 v-on=”$listeners” 綁定父作用域中的事件監聽器,一旦 emit 就會傳給瞭父組件。
2. 實現數據的雙向綁定,方便維護數據
有很多這樣的場景,父組件需要傳遞數據給子組件,且在子組件觸發數據更新的時候,馬上反饋給父組件,父組件數據更新,單向數據流向子組件,最後子組件更新。通常情況用 props + $emit 的方式去更新狀態,但是這種處理方式有點笨拙,且不易維護,所以可以通過實現數據的“雙向綁定”來提高代碼的可維護性。可以通過這以下方式去實現:
使用 .sync 實現 Prop 的“雙向綁定”
在 v-bind prop的時候添加 .sync 修飾符,賦新值的時候用 this.$emit(‘update:propName’, newValue)
<!-- .sync是 v-on:update這種模式的一種縮寫 --> <Child v-on:update:title="title" /> <!-- 相當於 --> <Child :title.sync="title" />
如果要更新上述代碼中的 title 值,隻需要 this.$emit(‘update:title’, ‘新標題’),完成數據更新。
使用 model 選項
model 是2.2.0+ 新增的選項,一個組件上的 v-model 默認會利用名為 value 的 Prop 和名為 input 的事件, 而 model 選項可以規定 Prop 名稱和事件名稱來實現 v-model,好處是在實現 v-model 的同時也避免瞭 Prop 和事件名的沖突。
<!-- 父組件 --> <Model v-model="checked"/> <!-- Model組件 --> <div @click="handleClick"> <p>自定義組件的 v-model</p> checked {{checked}} </div> <script lang="ts"> export default { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, methods: { handleClick() { this.$emit('change', !this.checked); } }
在上述代碼中,隻需要在 model 選項中添加 prop 和 event,就可以實現瞭 v-model。而在 Vue + TS 項目中 vue-property-decorator 中提供瞭 Model 的裝飾器,需要這麼寫:
@Model('change', { type: Boolean }) readonly checked!: boolean handleClick() { this.$emit('change', !this.checked); }
隻需要通過 .sync 和 model 就可以實現數據的“雙向綁定”,這樣書寫代碼可以一定程度上減少我們的代碼,而且另代碼變得更優雅且可維護。
3. 使用 Mixins
Mixins 可以用於兩種場景:
- 利用它去抽取成組件內的公共代碼加強代碼復用,不要在全局內套來套去,最好在組件內或者頁面中使用。
- 利用它去分離功能點,有時候會遇到一種情況,就是業務功能很多導致寫起來的 Vue 文件行數很多,導致代碼很難以維護,功能點代碼不好追蹤。可以通過抽取功能代碼的方式,讓這個龐大的 Vue 文件更好維護。
首先寫一個公共的 mixin 文件, 把高復用的狀態和函數寫進去。
export default class CommonMixins extends Vue{ public paginations = { pageSize: 20, total: 0, currentPage: 1, } handleChangePageSize (pageSize: number, cb: Function) { this.paginations.pageSize = pageSize; cb(); } handleChangePageNum (currentPage: number, cb: Function) { this.paginations.currentPage = currentPage; cb(); } }
vue-property-decorator 提供瞭 Mixins 的裝飾器,在業務頁面中引入 Mixin 隻需要往裡 Mixins 傳入 , 可以傳多個,表示混入多個 Mixin。
<script lang="ts"> import { Component, Mixins } from 'vue-property-decorator'; import CommonMixins from "./common-mixin"; import PermissionMixins from "./permission-mixin"; @Component({}) export default class Parent extends Mixins(CommonMixins, PermissionMixins) { } </script>
如果隻需要一個的話,也可以直接繼承
<script lang="ts"> import { Component, Mixins } from 'vue-property-decorator'; import CommonMixins from "./common-mixin"; @Component({}) export default class Parent extends CommonMixins { } </script>
在遇到功能點多,代碼量大的頁面時,我們可以利用 Mixin 抽離一些功能點,通過文件去管理這些功能,這樣會比較方便去管理代碼。
4. 使用動態組件去懶加載組件
組件在加載都是同步的,但當頁面內容很多,有些組件並不需要一開始就加載出來的比如彈窗類的組件,這些就可以用動態組件,當用戶執行瞭某些操作後再加載出來,這樣可以提高主模塊加載的性能, 在 Vue 中可以使用 component 動態組件, 依 is 的值,來決定哪個組件被渲染。
<template> <div> 主頁面 <br/> <button @click="handleClick1">點擊記載組件1</button><br/> <button @click="handleClick2">點擊記載組件2</button><br/> <component :is="child1"></component> <component :is="child2"></component> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; @Component({}) export default class AsyncComponent extends Vue { public child1:Component = null; public child2:Component = null; handleClick1() { this.child1 = require('./child1').default; } handleClick2() { this.child2 = require('./child2').default; } } </script>
示例代碼中,隻有當點擊的時候才會去加載組件。component 還可以配合 v-show 去控制顯示和隱藏,這樣這個component 隻會 mounted 一次,優化性能。
5. 在組件作用域內的 CSS 中使用 ::v-deep 修改組件樣式
有很多場景想更改 UI 組件樣式,然後怕影響別人的使用,加上 scoped 後又不能生效,可以使用 ::v-deep 深度作用選擇器去修改組件作用域內的 CSS 的樣式。在 CSS 中我們可以使用 >>> 操作符,但在預處理器中的寫法就要用 /deep/ 或 ::v-deep。
<style scoped> >>> .ivu-tabs-tabpane { background: #f1f1f1; } </style> <style lang="scss" scoped> /deep/ .ivu-tabs-tabpane { background: #f1f1f1; } </style> <style lang="scss" scoped> ::v-deep .ivu-tabs-tabpane { background: #f1f1f1; } </style>
::v-deep 和 /deep/ 作用是一樣的,但不推薦使用 /deep/, 在 Vue3.0 中將不支持 /deep/ 這種寫法。
6. 使用裝飾器優化代碼
裝飾器增加瞭代碼的可讀性,清晰地表達瞭意圖,而且提供一種方便的手段,增加或修改類的功能,比如給類其中的方法提供防抖的功能。
import debounce from 'lodash.debounce'; export function Debounce(delay: number, config: object = {}) { return (target: any, prop: string) => { return { value: debounce(target[prop], delay, config), }; }; }
這樣的好處是使用起來非常方便,另外增加瞭代碼的可讀性。
@Debounce(300) onIdChange(val: string) { this.$emit('idchange', val); }
7. 利用 require.context 去獲取項目目錄信息
關於 require.context,webpack 文檔是這麼描述的:
可以給這個函數傳入三個參數:一個要搜索的目錄,一個標記表示是否還搜索其子目錄, 以及一個匹配文件的正則表達式。
webpack 會在構建中解析代碼中的 require.context() 。如果想引入一個文件夾下面的所有文件,或者引入能匹配一個正則表達式的所有文件,這個功能就會很有幫助
根據這個提示,我們可以引用到一個文件夾下面的所有文件,由此可以利用獲取的文件信息去做一些操作,比如在註冊組件的時候,原本我們註冊組件的時候需要一個個引入並且一個個註冊,而且後面想加新的,又要再寫上,現在可以通過 require.context 去優化這一段代碼。
// import WmsTable from './wms-table/table/index'; import Table from './table/index.vue'; import CustomHooks from './custom-hooks/custom-hooks-actions/index'; import SFilter from './s-filter/filter-form'; import WButton from './button/index'; import CreateForm from './createForm/create-form/CreateForm.vue'; import Action from './table/action-table-column.vue'; import DetailItem from './detail-item.vue'; Vue.component('w-filter', SFilter); Vue.component('w-button', WButton); Vue.component('custom-hooks', CustomHooks); Vue.component('create-form', CreateForm); Vue.component('w-table', Table); Vue.component('w-table-action', Action); Vue.component('zonetime-date-picker', ZonetimeDatePicker); Vue.component('detail', DetailItem);
註冊全局組件的時候,不需要一個一個 import,和一個個去註冊,使用 require.context 可以自動導入模塊,這樣的好處在於,當我們新建一個組件,不用自己再去手寫註冊,而在一開始就幫我們自動完成。
const contexts = require.context('./', true, /\.(vue|ts)$/); export default { install (vm) { contexts.keys().forEach(component => { const componentEntity = contexts(component).default; if (componentEntity.name) { vm.component(componentEntity.name, componentEntity); } }); } };
總結
本文介紹瞭在 Vue 實戰中經常用到的一些技巧,這些技巧的目的都是為瞭提升開發效率,比如簡單地實現雙向數據綁定和數據跨級傳遞等,另外也可以提高代碼的可維護性、可讀性,比如很實用的裝飾器和利用 Mixin 拆分代碼和管理功能點。
到此這篇關於Vue項目中常用的實用技巧匯總的文章就介紹到這瞭,更多相關Vue項目常用技巧內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
引用
- require.context
- Vue 官方文檔
推薦閱讀:
- vue實戰中的一些實用小魔法匯總
- 簡單聊聊vue2.x的$attrs和$listeners
- Vue祖孫組件如何實現傳值
- vue $attrs和$listeners的使用與區別
- vue2.x中$attrs的使用方法教程