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

이 글은 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

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>

코드에는 템플릿, 스크립트 및 스타일이 포함되어 있습니다. 위의 구조는 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는 템플릿, 스크립트, 스타일에 따라 템플릿을 구문 분석하고 처리 결과를 반환합니다. 서로 다른 유형의 세 가지 파일이 다음 로더에 의해 처리됩니다. 단일 파일 구성 요소가 상위 구성 요소의 구성 요소에 선언된 경우 구성 요소의 해당 항목이 구문 분석된 스크립트 코드에 삽입됩니다. 이 프로세스는 항목 파일 main.js에서 시작되며 이에 종속된 모든 관련 단일 파일 구성 요소가 차례로 이 프로세스를 거칩니다. 그 후, 모든 구성요소는 비즈니스 로직의 종속성에 따라 인스턴스화됩니다. 이 프로세스는 개발 시 자주 사용하는 방법이기도 합니다. (vue-loader의 처리 프로세스를 자세히 설명하려면 여기에서 별도의 기사를 볼 수 있습니다.)

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

기능에 따라 특정 비즈니스를 더 작은 컴포넌트로 나누고 나중에 재사용성을 고려함

작은 기능 컴포넌트(하위 컴포넌트)를 컨테이너 컴포넌트(상위 컴포넌트)를 통해 통합

운영 기법 : 하위 컴포넌트를 상위 컴포넌트에 도입하고 등록 구성 요소에 해당 구성 요소 참조 템플릿을 추가합니다

이 방법은 단일 파일 개발에서 사용하는 일반적인 방법이기도 합니다. 모든 구성 요소의 인스턴스화는 구성 요소의 중첩 관계 및 비즈니스 논리에 암시되어 있습니다. 개발자는 컴포넌트 도입에만 신경쓰고, 상위 컴포넌트 로직에 컴포넌트를 등록하고, 상위 컴포넌트의 템플릿에 태그로 컴포넌트를 도입하면 됩니다. 이 프로세스에 도입될 구성 요소의 인스턴스화 시점은 v-if 지시문을 통해 비즈니스 로직에서 제어할 수도 있습니다.

2. 적용 가능한 시나리오

대부분의 시나리오에서는 이러한 방식으로 구성 요소 개발을 수행할 수 있습니다. 이 모델에는 특징이 있습니다. 컴포넌트 등록과 템플릿에 해당 컴포넌트 태그 작성을 통해 컴포넌트 도입이 완료됩니다.

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

함수 모듈은 함수 모듈의 주문 파일 인스턴스의 모든 기능적 논리를 제어하기 위해 입구 js를 제공합니다.

이 함수 모듈을 다른 구성 요소에서 사용할 때는 함수 아래의 js를 호출하세요. 모듈 및 전달 일부 매개변수 입력 🎜🎜🎜🎜작업 방법: 🎜🎜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 중국어 웹사이트의 기타 관련 기사를 참조하세요!