首頁 > 文章 > web前端 > vue中單一檔案的詳細介紹（程式碼範例）

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

不言原創: 2018-09-05 10:12:531420瀏覽

這篇文章帶給大家的內容是關於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等。我们可以通过上述两种方式来使用单文件组件，目的在于工程内部尽量减少重复的模板代码，组件解耦。