vue の単一ファイルの詳細な紹介 (コード例)

この記事では、Vue の単一ファイルに関する詳細な紹介 (コード例) を紹介します。必要な方は参考にしていただければ幸いです。

vue を開発テクノロジー スタックとして使用するフロントエンド開発者は、多くの場合、フロントエンド構築ツールと連携してプロジェクトのエンジニアリング管理を実行します。たとえば、vue ファミリー バケット + Webpack という一般的に使用されるソリューションは、いくつかの中規模および大規模なフロントエンド プロジェクトの開発に使用されます。 webpack を使用すると、Vue のコンポーネント化の利点がより明白になり、単一ファイルのコンポーネント化開発を通じて実務でフロントエンド ページを構築できるため、開発効率が向上します。こんな質問があります: 「vue 単一ファイルを書くとき、何を書くのですか?」 多くの人は次のように答えるかもしれません: template はテンプレートを担当し、javascript はロジックを担当し、style はスタイル。答えがこの時点に到達すると、Vue 開発者の世界観は基本的に非常に明確になります。必要なのは、テンプレート、JavaScript、スタイルを 1 つのファイル コンポーネントに記述することだけです。これに限定すると、単一ファイル コンポーネントをより有効に活用して開発プロセス全体を実現できないことは明らかです。次に、vue の単一ファイル開発における方法論的な問題について説明します。

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

ListDemo.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>

このコードには、テンプレート、スクリプト、スタイルが含まれています。 3 つの機能については、ここでは詳しく説明しません。上記の構造は、vue 単一ファイルの基本的なファイル構造を示しています。その背後にある考え方は、単一のファイル コンポーネントが機能コンポーネントに対応し、コンポーネントのテンプレート、スタイル、ビジネス ロジックがすべて近くに維持されるというものです。コンポーネントの再利用性とその後のメンテナンス性の観点から、この概念によりコンポーネント開発の効率が大幅に向上しました。 vue の単一ファイルは js、html、css ファイルではありません。このようなファイルがページにどのように適用されるかについては、後で説明します。

vue単体ファイルの処理処理

vue単体ファイルはwebpackビルドツールと連携し、webpack内のvue-loaderで処理されます。以下に示すように:

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;
};

import または require によってプロジェクトに導入された Vue 単一ファイルは vue-loader によって処理され、vue-loader はテンプレート、スクリプト、スタイルに従ってテンプレートを解析し、処理結果を返します。 3 つの異なるタイプのファイルは、処理のために次のローダーに渡されます。単一ファイル コンポーネントが親コンポーネントのコンポーネント内で宣言されている場合、コンポーネント内の対応する項目が解析されたスクリプト コードに挿入されます。このプロセスはエントリ ファイル main.js から開始され、これに依存する関連するすべての単一ファイル コンポーネントがこのプロセスを順番に実行します。その後、ビジネス ロジックの依存関係に従ってすべてのコンポーネントがインスタンス化されます。このプロセスも開発でよく使用される方法です。 (vue-loader の処理プロセスの詳細については、ここで別の記事を参照してください)

• 単一ファイルの一般的な姿勢
  テンプレート内のコンポーネント参照
• 1. 使用法
  コンポーネントの分割とネスト:

特定の業務を機能や再利用性を考慮して小さなコンポーネントに分割する

コンテナコンポーネント（親コンポーネント）を介して小さな機能コンポーネント（サブコンポーネント）を統合する

運用テクニック：親コンポーネントにサブコンポーネントを導入し、登録するコンポーネントに追加し、対応するコンポーネント参照テンプレートをテンプレートに追加します

この方法は、単一ファイルの開発で使用される一般的な方法でもあり、コンポーネントのネストされた関係とビジネス ロジックで暗黙的に行われます。開発者は、コンポーネントの導入を考慮し、親コンポーネント ロジックにコンポーネントを登録し、親コンポーネントのテンプレートにコンポーネントをタグとして導入するだけで済みます。このプロセスで導入されるコンポーネントのインスタンス化のタイミングも、v-if ディレクティブを通じてビジネス ロジックで制御できます。

2. 適用可能なシナリオ

ほとんどのシナリオでは、この方法でコンポーネント開発を実行できます。このモデルの特徴は、コンポーネントを登録し、対応するコンポーネントタグをテンプレートに記述することでコンポーネントの導入が完了することです。

テンプレート内のタグを介してコンポーネントを導入することは不可欠です
• この機能は、一部のビジネス シナリオにおいて、開発者にある程度の反復作業をもたらす可能性があります。
  API スタイルの呼び出し
• API スタイルの呼び出しは、サブコンポーネントのインスタンスを手動で作成することを指します。ビジネス ロジックにコンポーネントやテンプレート タグのプレースホルダーを導入する必要はなく、コンポーネントのインスタンス化と表示は公開された API で制御されます。
  1. 使用法

汎用モジュールは、汎用モジュールのオーダーファイルインスタンスのすべての関数ロジックを制御するための入口jsを提供します

この汎用モジュールを他のコンポーネントで使用する場合は、関数の下でjsを呼び出しますmodule と pass いくつかのパラメータを入力します🎜🎜🎜🎜操作方法: 🎜🎜confirm.vue🎜rrreee🎜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等。我们可以通过上述两种方式来使用单文件组件，目的在于工程内部尽量减少重复的模板代码，组件解耦。

相关推荐：

webpack入坑之旅（五）加载vue单文件组件_html/css_WEB-ITnose

jquery加载单文件vue组件方法分享

以上がvue の単一ファイルの詳細な紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。