vue 單文件探索

時間 2019-11-07

標籤 vue 文件探索简体版

原文原文鏈接

原文地址： vue 單文件探索

以 vue 做爲開發技術棧的前端開發者，每每會配合前端構建工具，進行項目的工程化管理。好比，你們經常使用的 vue 全家桶 + webpack 的方案進行一些中大型前端項目的開發。配合 webpack 後，vue 的組件化優點更加明顯，咱們能夠經過單文件的組件化開發方式，在工做實踐中搭建前端頁面，從而提升開發效率。有這樣一個問題：「當咱們在寫 vue 單文件時，咱們在寫什麼？」 不少人可能會這樣回答：template 負責模板，javascript 負責邏輯，style 負責樣式。當回答到這裏時，一個 vue 開發者的世界觀基本上算是很明確了。咱們要作的就是在一個單文件組件中寫 template、javascript、style。若是僅僅侷限於此，顯然咱們沒法從更好的利用的單文件組件服務咱們的整個開發流程。接下來我將和你們討論在 vue 單文件開發中的一些方法論的問題。javascript

vue 單文件本質

vue單文件是以特定文件擴展名 .vue 命名的文件。以下所示的代碼：css

ListDemo.vuehtml

<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 來處理。以下所示：vue

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

項目中經過 import 或者 require 引入的 vue 單文件，都會通過 vue-loader 處理，vue-loader 在這個過程當中會將模板按照 template、script、style 解析並將處理結果返回，三種不一樣類型的文件交由接下來的loader 進行處理。若是該單文件組件在父組件中的 components 聲明，則 components 中對應的該項會被插入解析後 script 代碼。這個過程從入口文件 main.js 開始，全部涉及的被依賴單文件組件依次經歷這樣的處理過程。以後全部的組件的實例化將根據業務邏輯中的依賴關係進行，這個過程也是咱們平時在開發中常常用到的一種方式。（這裏能夠單拉一篇文章詳細講述 vue-loader 的處理流程）java

單文件的經常使用姿式

模板中的組件引用

1、使用方式webpack

組件的拆分和嵌套：web

將具體的業務按照功能以及後期複用性方面的考慮劃分紅更小的組件
經過一個容器組件（父組件）將小的功能組件（子組件）進行整合

操做手法：父組件中引入子組件，components 中註冊，template 中添加相應的組件引用模板element-ui

這種方式也是咱們在進行單文件的開發中經常使用的一種方式，全部組件的實例化，都被隱含在組件的嵌套關係和業務邏輯中。開發者只須要關心組件的引入，在父組件邏輯中註冊該組件，並在父組件的模板中以標籤的方式引入組件。這個過程當中待引入的組件的實例化時機也能夠經過 v-if 指令在業務邏輯中進行控制。api

2、適用場景

大部分場景下咱們均可以經過這樣的方式進行組件化的開發。這種模式的有一個特色：組件的引入經過組件註冊和模板中寫入對應的組件的標籤來完成。模板中經過標籤來引入組件這一步必不可少，這個特色在某些業務場景下可能給開發者帶來了必定的重複工做量。

API 式的調用

API 式的調用指的是手動建立子組件的實例，業務邏輯中無需引入組件和模板標籤佔位，在暴露的 API 中控制組件的實例化與顯示。

1、使用方式

功能模塊提供一個入口 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 中手寫組件標籤。

2、適用場景