在很多Vue項目中，我們使用 Vue.component 來定義全局組件，緊接著用new Vue({ el: '#container '}) 在每個頁面內指定一個容器元素。
這種方案在只是使用 JavaScript 增強某個視圖的中小型項目中表現得很好。然而在更復雜的項目中，或者當你的前端完全采用 JavaScript 驅動的時候，以下弊端就顯現出來：
文件擴展名為 .vue 的 single-file components(單文件組件) 為以上所有問題提供了解決方法，并且還可以使用 Webpack 或 Browserify 等構建工具。
以 vue 作為開發技術棧的前端開發者，往往會配合前端構建工具，進行項目的工程化管理。比如，大家常用的 vue 全家桶 + webpack 的方案進行一些中大型前端項目的開發。配合 webpack 后，vue 的組件化優勢更加明顯，我們可以通過單文件的組件化開發方式，在工作實踐中搭建前端頁面，從而提高開發效率。 有這樣一個問題：“當我們在寫 vue 單文件時，我們在寫什么？” 很多人可能會這樣回答：template 負責模板，javascript 負責邏輯，style 負責樣式。當回答到這里時，一個 vue 開發者的世界觀基本上算是很明確了。我們要做的就是在一個單文件組件中寫 template、javascript、style。如果僅僅局限于此，顯然我們無法從更好的利用的單文件組件服務我們的整個開發流程。接下來我將和大家討論在 vue 單文件開發中的一些方法論的問題。
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 單文件基本的文件結構。其背后的理念就是一個單文件組件對應了一個功能性組件，該組件的模板，樣式，業務邏輯都采用就近維護的思想。從組件的復用性，后期可維護性的角度上來說，這樣的理念都大大的提高了組件化的開發效率。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 開始，所有涉及的被依賴單文件組件依次經歷這樣的處理過程。之后所有的組件的實例化將根據業務邏輯中的依賴關系進行，這個過程也是我們平時在開發中經常用到的一種方式。（這里可以單拉一篇文章詳細講述 vue-loader 的處理流程）
單文件的常用姿勢
模板中的組件引用
一、使用方式
組件的拆分和嵌套：
操作手法：父組件中引入子組件，components 中注冊，template 中添加相應的組件引用模板
這種方式也是我們在進行單文件的開發中常用的一種方式，所有組件的實例化，都被隱含在組件的嵌套關系和業務邏輯中。開發者只需要關心組件的引入，在父組件邏輯中注冊該組件，并在父組件的模板中以標簽的方式引入組件。這個過程中待引入的組件的實例化時機也可以通過 v-if 指令在業務邏輯中進行控制。
二、適用場景
大部分場景下我們都可以通過這樣的方式進行組件化的開發。這種模式的有一個特點： 組件的引入通過組件注冊和模板中寫入對應的組件的標簽來完成。模板中通過標簽來引入組件這一步必不可少，這個特點在某些業務場景下可能給開發者帶來了一定的重復工作量。
API 式的調用
API 式的調用指的是手動創建子組件的實例，業務邏輯中無需引入組件和模板標簽占位，在暴露的 API 中控制組件的實例化與顯示。
一、使用方式
操作手法：
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;};如上所示，給出的是一個確認彈框的場景實現。確認彈框在很多用戶交互中是一個必須的交互形式。很多組件庫也采用上面這種 API 式的組件調用。調用方僅僅通過 api 的調用，就能實現該功能模塊的引用。這樣就避免了在 template 中通過標簽占位的方式引用。實現原理就是手動接管單文件組件的實例化，通過 Vue.extend 獲得該組件對應的 Vue 的子類，在暴露給調用的 api 中去實例化這個組件。這個過程中我們可能還要完成一些組件數據的注入，邏輯相關以及手動將該組件插入到目的 dom 中。手動的注入 dom 是該種方式的一個很大特點，通過在 api 中動態的注入目的 dom，避免我們在各個業務組件中調用該功能模塊時重復性的在業務組件 template 中手寫組件標簽。
二、適用場景
區別和共性
共性：通過實例化對應組件完成組件的功能邏輯
區別：實例化的時機和方式不同。模板式的引入通過組件注冊和標簽引入的方式來使用單文件組件。標簽引入解決了子組件插入的 dom 位置問題，開發者無需關心。API 式的單文件組件使用，在 API 調用時手動實例化組件，需要手動控制插入到目的 dom。
總結
vue 的單文件組件提供了 vue 的組件化開發思路，其本質在導出 vue 的一些關鍵屬性，比如生命周期函數，methods，computed， watch，props等。我們可以通過上述兩種方式來使用單文件組件，目的在于工程內部盡量減少重復的模板代碼，組件解耦。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
