vue中單文件探索的示例分析

這篇文章給大家分享的是有關vue中單文件探索的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

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

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

• 全局定義(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 作為開發技術棧的前端開發者，往往會配合前端構建工具，進行項目的工程化管理。比如，大家常用的 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中單文件探索的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！