vue의 단일 파일에 대한 자세한 소개(코드 예시)

Vue를 개발 기술 스택으로 사용하는 프런트엔드 개발자는 프런트엔드 구성 도구와 협력하여 프로젝트의 엔지니어링 관리를 수행하는 경우가 많습니다. 예를 들어, 일반적으로 사용되는 vue 제품군 버킷 + 웹팩 솔루션은 일부 중대형 프런트엔드 프로젝트를 개발하는 데 사용됩니다. webpack을 사용하면 Vue의 컴포넌트화 장점이 더욱 분명해지며, 단일 파일 컴포넌트화 개발을 통해 실무에서 프런트엔드 페이지를 구축할 수 있어 개발 효율성이 향상됩니다. 다음과 같은 질문이 있습니다: "vue 단일 파일을 작성할 때 무엇을 작성하고 있습니까?" 많은 사람들이 이렇게 대답할 수 있습니다: 템플릿은 템플릿을 담당하고, javascript는 로직을 담당하고, 스타일은 스타일을 담당합니다. 대답이 이 지점에 도달하면 Vue 개발자의 세계관은 기본적으로 매우 명확합니다. 우리가 해야 할 일은 템플릿, 자바스크립트, 스타일을 단일 파일 구성 요소에 작성하는 것뿐입니다. 우리가 이것에만 국한한다면 단일 파일 구성 요소를 더 잘 활용하는 것만으로는 전체 개발 프로세스를 지원할 수 없다는 것이 분명합니다. 다음으로 vue 단일 파일 개발의 몇 가지 방법론적 문제에 대해 논의하겠습니다.

vue Single File Essence

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

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

로그인 후 복사

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

• 단일 파일의 일반적인 자세
  템플릿의 구성 요소 참조
• 1. 사용법
  구성 요소 분할 및 중첩:

템플릿의 태그를 통해 구성 요소를 도입하는 것은 필수적입니다
• 이 기능은 일부 비즈니스 시나리오에서 개발자에게 일정량의 반복 작업을 가져올 수 있습니다.
  API 스타일 호출
• API 스타일 호출은 하위 구성 요소의 인스턴스를 수동으로 생성하는 것을 의미하며 비즈니스 로직에 구성 요소 및 템플릿 태그 자리 표시자를 도입할 필요가 없으며 구성 요소의 인스턴스화 및 표시는 노출된 API에서 제어됩니다.
  1. 사용법

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!