vue中單檔案的詳細介紹（程式碼範例）

這篇文章給大家帶來的內容是關於vue中單檔案的詳細介紹（程式碼範例） ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

以 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 中控制組件的執行個體化與顯示。

一、使用方式

• 功能模組提供一個入口 js 來控制該功能模組下單檔案執行個體的所有功能邏輯

• 其他組件中使用該功能模組時，調用功能模組下的 js，傳入部分參數

操作手法：

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 中手寫組件標籤。

二、適用情境

• 功能彙總度高，組件內邏輯簡單，輸入輸出較為單一，比如一些功能較為獨立的彈框

• 一些特殊的自訂指令開發，比如在一些特殊情境的指令，可以複用一些單檔案組件，通過在指令的鉤子中執行個體化組件對應的 vue 子類，按照特定的邏輯插入到目的 dom 中（例如：element-ui的v-loading）

區別和共性

共性：通過執行個體化對應組件完成組件的功能邏輯

區別：執行個體化的時機和方式不同。模板式的引入通過組件註冊和標籤引入的方式來使用單檔案組件。標籤引入解決了子組件插入的 dom 位置問題，開發人員無需關心。API 式的單檔案組件使用，在 API 呼叫時手動執行個體化組件，需要手動控制插入到目的 dom。

總結

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