在很多Vue項(xiàng)目中，我們使用 Vue.component 來定義全局組件，緊接著用new Vue({ el: '#container '}) 在每個(gè)頁面內(nèi)指定一個(gè)容器元素。

這種方案在只是使用 JavaScript 增強(qiáng)某個(gè)視圖的中小型項(xiàng)目中表現(xiàn)得很好。然而在更復(fù)雜的項(xiàng)目中，或者當(dāng)你的前端完全采用 JavaScript 驅(qū)動(dòng)的時(shí)候，以下弊端就顯現(xiàn)出來：

• 全局定義(Global definitions) 強(qiáng)制要求每個(gè) component 中的命名不得重復(fù)
• 字符串模板(String templates) 缺乏語法高亮，在 HTML 有多行的時(shí)候，需要用到丑陋的\
• 不支持CSS(No CSS support) 意味著當(dāng) HTML 和 JavaScript 組件化時(shí)，CSS 明顯被遺漏
• 沒有構(gòu)建步驟(No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用預(yù)處理器，如 Pug (formerly Jade) 和 Babel

文件擴(kuò)展名為 .vue 的 single-file components(單文件組件) 為以上所有問題提供了解決方法，并且還可以使用 Webpack 或 Browserify 等構(gòu)建工具。

以 vue 作為開發(fā)技術(shù)棧的前端開發(fā)者，往往會(huì)配合前端構(gòu)建工具，進(jìn)行項(xiàng)目的工程化管理。比如，大家常用的 vue 全家桶 + webpack 的方案進(jìn)行一些中大型前端項(xiàng)目的開發(fā)。配合 webpack 后，vue 的組件化優(yōu)勢更加明顯，我們可以通過單文件的組件化開發(fā)方式，在工作實(shí)踐中搭建前端頁面，從而提高開發(fā)效率。 有這樣一個(gè)問題：“當(dāng)我們?cè)趯?vue 單文件時(shí)，我們?cè)趯懯裁?？?很多人可能會(huì)這樣回答：template 負(fù)責(zé)模板，javascript 負(fù)責(zé)邏輯，style 負(fù)責(zé)樣式。當(dāng)回答到這里時(shí)，一個(gè) vue 開發(fā)者的世界觀基本上算是很明確了。我們要做的就是在一個(gè)單文件組件中寫 template、javascript、style。如果僅僅局限于此，顯然我們無法從更好的利用的單文件組件服務(wù)我們的整個(gè)開發(fā)流程。接下來我將和大家討論在 vue 單文件開發(fā)中的一些方法論的問題。

vue 單文件本質(zhì)

vue單文件是以特定文件擴(kuò)展名 .vue 命名的文件。如下所示的代碼：

ListDemo.vue

<template>
  <div class="list-demo">
    <ul>
      <li v-for="item in list" :key="item.key">{{item.value}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'ListNav',
  data() {
    return {
      list: [
        { key: 'home', value: '首頁' },
        { key: 'category', value: '文章分類' },
        { key: 'tags', value: '標(biāo)簽' },
        { key: 'about', value: '關(guān)于我' },
        { key: 'links', value: '友情鏈接'},
      ],
    };
  },
};
</script>
<style>
.list-demo {
  font-size: 14px;
}
</style>

代碼中含有 template，script，style。三者的作用此處就不在贅述，如上的結(jié)構(gòu)展示了一個(gè) vue 單文件基本的文件結(jié)構(gòu)。其背后的理念就是一個(gè)單文件組件對(duì)應(yīng)了一個(gè)功能性組件，該組件的模板，樣式，業(yè)務(wù)邏輯都采用就近維護(hù)的思想。從組件的復(fù)用性，后期可維護(hù)性的角度上來說，這樣的理念都大大的提高了組件化的開發(fā)效率。vue 的單文件，既不是 js，也不是 html，也不是 css 文件，這樣的文件如何被應(yīng)用到頁面上，這也就是下面將會(huì)說到的一個(gè)問題，vue 單文件是如何被處理成頁面中可用的資源。

vue 單文件被處理的流程

vue 單文件配合 webpack 構(gòu)建工具，在 webpack 中會(huì)交由 vue-loader 來處理。如下所示：

{
  test: /\.vue$/,
  loader: 'vue-loader',
}

項(xiàng)目中通過 import 或者 require 引入的 vue 單文件，都會(huì)經(jīng)過 vue-loader 處理，vue-loader 在這個(gè)過程中會(huì)將模板按照 template、script、style 解析并將處理結(jié)果返回，三種不同類型的文件交由接下來的loader 進(jìn)行處理。如果該單文件組件在父組件中的 components 聲明，則 components 中對(duì)應(yīng)的該項(xiàng)會(huì)被插入解析后 script 代碼。這個(gè)過程從入口文件 main.js 開始，所有涉及的被依賴單文件組件依次經(jīng)歷這樣的處理過程。之后所有的組件的實(shí)例化將根據(jù)業(yè)務(wù)邏輯中的依賴關(guān)系進(jìn)行，這個(gè)過程也是我們平時(shí)在開發(fā)中經(jīng)常用到的一種方式。（這里可以單拉一篇文章詳細(xì)講述 vue-loader 的處理流程）

單文件的常用姿勢

模板中的組件引用

一、使用方式

組件的拆分和嵌套：

• 將具體的業(yè)務(wù)按照功能以及后期復(fù)用性方面的考慮劃分成更小的組件
• 通過一個(gè)容器組件（父組件）將小的功能組件（子組件）進(jìn)行整合

操作手法：父組件中引入子組件，components 中注冊(cè)，template 中添加相應(yīng)的組件引用模板

這種方式也是我們?cè)谶M(jìn)行單文件的開發(fā)中常用的一種方式，所有組件的實(shí)例化，都被隱含在組件的嵌套關(guān)系和業(yè)務(wù)邏輯中。開發(fā)者只需要關(guān)心組件的引入，在父組件邏輯中注冊(cè)該組件，并在父組件的模板中以標(biāo)簽的方式引入組件。這個(gè)過程中待引入的組件的實(shí)例化時(shí)機(jī)也可以通過 v-if 指令在業(yè)務(wù)邏輯中進(jìn)行控制。

二、適用場景

大部分場景下我們都可以通過這樣的方式進(jìn)行組件化的開發(fā)。這種模式的有一個(gè)特點(diǎn)： 組件的引入通過組件注冊(cè)和模板中寫入對(duì)應(yīng)的組件的標(biāo)簽來完成。模板中通過標(biāo)簽來引入組件這一步必不可少，這個(gè)特點(diǎn)在某些業(yè)務(wù)場景下可能給開發(fā)者帶來了一定的重復(fù)工作量。

API 式的調(diào)用

API 式的調(diào)用指的是手動(dòng)創(chuàng)建子組件的實(shí)例，業(yè)務(wù)邏輯中無需引入組件和模板標(biāo)簽占位，在暴露的 API 中控制組件的實(shí)例化與顯示。

一、使用方式

• 功能模塊提供一個(gè)入口 js 來控制該功能模塊下單文件實(shí)例的所有功能邏輯
• 其他組件中使用該功能模塊時(shí)，調(diào)用功能模塊下的 js，傳入部分參數(shù)

操作手法：

Confirm.vue

<template>
  <el-dialg
    title="test"
    :visible.sync="visible">
    {{content}}
    <el-button @click="handleCancelClick">cancel</el-button>
    <el-button @click="handleOkClick">ok</el-button>
  </el-dialg>
</template>
<script>
export default {
  name: 'Confirm',
  data() {
    return {
      visible: false,
      content: '這是一個(gè)confirm dialog',
      callback: null,
    };
  },
  methods: {
    handleCancelClick() {
      this.callback('cancel');
    },
    handleOkClick() {
      this.callback('confirm');
    },
  },
};
</script>

confirm.js

import Vue from 'vue';
import Confirm from './confirm';
const ConfirmConstructor = Vue.extend(Confirm);
const confirm = (content) => {
  let confirmInstance = new ConfirmConstructor({
    data: {
      content,
    },
  });
  confirmInstance.vm = confirmInstance.$mount();
  confirmInstance.vm.visible = true;
  // 手動(dòng)插入目的 dom
  document.body.appendChild(confirmInstance.vm.$el);
  confirmInstance.vm.callback = action => {
    return new Promise((resolve, reject) => {
     resolve(action);
    });
  };
  return confirmInstance.vm;
};

如上所示，給出的是一個(gè)確認(rèn)彈框的場景實(shí)現(xiàn)。確認(rèn)彈框在很多用戶交互中是一個(gè)必須的交互形式。很多組件庫也采用上面這種 API 式的組件調(diào)用。調(diào)用方僅僅通過 api 的調(diào)用，就能實(shí)現(xiàn)該功能模塊的引用。這樣就避免了在 template 中通過標(biāo)簽占位的方式引用。實(shí)現(xiàn)原理就是手動(dòng)接管單文件組件的實(shí)例化，通過 Vue.extend 獲得該組件對(duì)應(yīng)的 Vue 的子類，在暴露給調(diào)用的 api 中去實(shí)例化這個(gè)組件。這個(gè)過程中我們可能還要完成一些組件數(shù)據(jù)的注入，邏輯相關(guān)以及手動(dòng)將該組件插入到目的 dom 中。手動(dòng)的注入 dom 是該種方式的一個(gè)很大特點(diǎn)，通過在 api 中動(dòng)態(tài)的注入目的 dom，避免我們?cè)诟鱾€(gè)業(yè)務(wù)組件中調(diào)用該功能模塊時(shí)重復(fù)性的在業(yè)務(wù)組件 template 中手寫組件標(biāo)簽。

二、適用場景

• 功能聚合度高，組件內(nèi)邏輯簡單，輸入輸出較為單一，比如一些功能較為獨(dú)立的彈框
• 一些特殊的自定義指令開發(fā)，比如在一些特殊場景的指令，可以復(fù)用一些單文件組件，通過在指令的鉤子中實(shí)例化組件對(duì)應(yīng)的 vue 子類，按照特定的邏輯插入到目的 dom 中（例如：element-ui的v-loading）

區(qū)別和共性

共性：通過實(shí)例化對(duì)應(yīng)組件完成組件的功能邏輯

區(qū)別：實(shí)例化的時(shí)機(jī)和方式不同。模板式的引入通過組件注冊(cè)和標(biāo)簽引入的方式來使用單文件組件。標(biāo)簽引入解決了子組件插入的 dom 位置問題，開發(fā)者無需關(guān)心。API 式的單文件組件使用，在 API 調(diào)用時(shí)手動(dòng)實(shí)例化組件，需要手動(dòng)控制插入到目的 dom。

總結(jié)

vue 的單文件組件提供了 vue 的組件化開發(fā)思路，其本質(zhì)在導(dǎo)出 vue 的一些關(guān)鍵屬性，比如生命周期函數(shù)，methods，computed， watch，props等。我們可以通過上述兩種方式來使用單文件組件，目的在于工程內(nèi)部盡量減少重復(fù)的模板代碼，組件解耦。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論