在上述代碼中，只需要在 model 選項(xiàng)中添加 prop 和 event，就可以實(shí)現(xiàn)了 v-model。而在 Vue + TS 項(xiàng)目中 vue-property-decorator 中提供了 Model 的裝飾器，需要這么寫：

@Model('change', { type: Boolean }) readonly checked!: boolean
handleClick() {
  this.$emit('change', !this.checked);
}

只需要通過 .sync 和 model 就可以實(shí)現(xiàn)數(shù)據(jù)的“雙向綁定”，這樣書寫代碼可以一定程度上減少我們的代碼，而且另代碼變得更優(yōu)雅且可維護(hù)。

3. 使用 Mixins

Mixins 可以用于兩種場景：

1. 利用它去抽取成組件內(nèi)的公共代碼加強(qiáng)代碼復(fù)用，不要在全局內(nèi)套來套去，最好在組件內(nèi)或者頁面中使用。

2. 利用它去分離功能點(diǎn)，有時候會遇到一種情況，就是業(yè)務(wù)功能很多導(dǎo)致寫起來的 Vue 文件行數(shù)很多，導(dǎo)致代碼很難以維護(hù)，功能點(diǎn)代碼不好追蹤。可以通過抽取功能代碼的方式，讓這個龐大的 Vue 文件更好維護(hù)。

首先寫一個公共的 mixin 文件， 把高復(fù)用的狀態(tài)和函數(shù)寫進(jìn)去。

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 的裝飾器，在業(yè)務(wù)頁面中引入 Mixin 只需要往里 Mixins 傳入 ， 可以傳多個，表示混入多個 Mixin。

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) {
}

如果只需要一個的話，也可以直接繼承

import { Component, Mixins } from 'vue-property-decorator';
import CommonMixins from "./common-mixin";
@Component({})
export default class Parent extends CommonMixins {
}

在遇到功能點(diǎn)多，代碼量大的頁面時，我們可以利用 Mixin 抽離一些功能點(diǎn)，通過文件去管理這些功能，這樣會比較方便去管理代碼。

4. 使用動態(tài)組件去懶加載組件

組件在加載都是同步的，但當(dāng)頁面內(nèi)容很多，有些組件并不需要一開始就加載出來的比如彈窗類的組件，這些就可以用動態(tài)組件，當(dāng)用戶執(zhí)行了某些操作后再加載出來，這樣可以提高主模塊加載的性能， 在 Vue 中可以使用 component 動態(tài)組件， 依 is 的值，來決定哪個組件被渲染。

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

示例代碼中，只有當(dāng)點(diǎn)擊的時候才會去加載組件。component 還可以配合 v-show 去控制顯示和隱藏，這樣這個component 只會 mounted 一次，優(yōu)化性能。

5. 在組件作用域內(nèi)的 CSS 中使用 ::v-deep  修改組件樣式

有很多場景想更改 UI 組件樣式，然后怕影響別人的使用，加上 scoped 后又不能生效，可以使用  ::v-deep 深度作用選擇器去修改組件作用域內(nèi)的 CSS 的樣式。在 CSS 中我們可以使用 >>> 操作符，但在預(yù)處理器中的寫法就要用 /deep/ 或 ::v-deep。

>>> .ivu-tabs-tabpane {
        background: #f1f1f1;
    }


/deep/ .ivu-tabs-tabpane {
        background: #f1f1f1;
    }


::v-deep .ivu-tabs-tabpane {
        background: #f1f1f1;
    }

::v-deep 和 /deep/ 作用是一樣的，但不推薦使用 /deep/， 在 Vue3.0 中將不支持 /deep/ 這種寫法。

6. 使用裝飾器優(yōu)化代碼

裝飾器增加了代碼的可讀性，清晰地表達(dá)了意圖，而且提供一種方便的手段，增加或修改類的功能，比如給類其中的方法提供防抖的功能。

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 去獲取項(xiàng)目目錄信息

關(guān)于 require.context，webpack 文檔是這么描述的：

可以給這個函數(shù)傳入三個參數(shù)：一個要搜索的目錄，一個標(biāo)記表示是否還搜索其子目錄， 以及一個匹配文件的正則表達(dá)式。
webpack 會在構(gòu)建中解析代碼中的 require.context() 。如果想引入一個文件夾下面的所有文件，或者引入能匹配一個正則表達(dá)式的所有文件，這個功能就會很有幫助

根據(jù)這個提示，我們可以引用到一個文件夾下面的所有文件，由此可以利用獲取的文件信息去做一些操作，比如在注冊組件的時候，原本我們注冊組件的時候需要一個個引入并且一個個注冊，而且后面想加新的，又要再寫上，現(xiàn)在可以通過 require.context 去優(yōu)化這一段代碼。

// 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 可以自動導(dǎo)入模塊，這樣的好處在于，當(dāng)我們新建一個組件，不用自己再去手寫注冊，而在一開始就幫我們自動完成。

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項(xiàng)目中常用的實(shí)用技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。