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

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

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

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

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

vue 單文件本質

vue單文件是以特定文件擴展名 .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: '標簽' },
        { key: 'about', value: '關于我' },
        { key: 'links', value: '友情鏈接'},
      ],
    };
  },
};
</script>
<style>
.list-demo {
  font-size: 14px;
}
</style>

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

vue 單文件被處理的流程

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

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

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

單文件的常用姿勢

模板中的組件引用

一、使用方式

組件的拆分和嵌套：

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

操作手法：父組件中引入子組件，components 中注冊，template 中添加相應的組件引用模板

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

二、適用場景

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

API 式的調用

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

一、使用方式

• 功能模塊提供一個入口 js 來控制該功能模塊下單文件實例的所有功能邏輯
• 其他組件中使用該功能模塊時，調用功能模塊下的 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: '這是一個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;
  // 手動插入目的 dom
  document.body.appendChild(confirmInstance.vm.$el);
  confirmInstance.vm.callback = action => {
    return new Promise((resolve, reject) => {
     resolve(action);
    });
  };
  return confirmInstance.vm;
};

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

二、適用場景

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

區(qū)別和共性

共性：通過實例化對應組件完成組件的功能邏輯

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

總結

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論