vue에서 구성 요소화와 모듈화의 차이점은 무엇입니까

컴포넌트화와 모듈화의 차이점: 모듈화는 코드 로직의 관점에서 구분되어 코드 계층 개발을 용이하게 하고 각 기능 모듈의 기능이 일관되게 유지되도록 합니다. 컴포넌트화는 UI 인터페이스 관점에서 계획하는 것으로 프런트엔드의 컴포넌트화는 UI 컴포넌트의 재사용을 용이하게 합니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

모듈화의 기원

웹 개발 초기에는 간단한 폼 검증이나 애니메이션 구현을 위한 스크립트 언어로 js를 사용했는데, 코드의 양이 상대적으로 적어 작성만 하면 되었습니다. 스크립트 태그에

Ajax 비동기 요청이 등장하면서 클라이언트가 완료해야 하는 작업이 점점 더 많아지고, 코드의 양도 늘어나면서 프런트엔드와 백엔드 분리가 점차 형성되었습니다. 급격한 코드 양의 증가에 대처하기 위해 일반적으로 유지 관리를 위해 코드를 여러 js 파일로 구성합니다

그러나 몇 가지 문제가 있습니다: 동일한 이름을 가진 전역 변수의 문제

함수 클로저 사용 변수 충돌 문제는 해결할 수 있지만 다른 파일에 정의된 변수는 사용할 수 없습니다

모듈화에는 내보내기와 가져오기라는 두 개의 코어가 있습니다

es6 모듈러 개발에 대해 알아봅시다

키워드 내보내기(내보내기) 가져오기(가져오기)

예를 들어, ajax를 보내는 모듈을 캡슐화합니다.

어떤 경우에는 모듈에 특정 기능이 포함되어 있습니다. 가져오는 사람이 직접 이름을 지정하고 싶지 않습니다.

내보내기를 사용할 수 있습니다. default

export default address
//只能默认一个

import jjj from "./aaa.js"
//可以自己命名，不要加{}

//导入 import

왜 모듈화를 사용하나요? 모듈화 사용의 이점

물론 모듈식 개발을 사용하지 않고도 페이지의 모든 기능을 구현할 수 있지만, 서버 요청에 대한 부담이 커지고 페이지에 너무 많은 데이터가 필요한 경우 요청 한 번이면 충분합니다. 요청한 모든 데이터가 포함됩니다. 사용자에게 필요하지 않으면 어떻게 되나요? 그러한 요청이 여전히 유효합니까? 물론 별 효과가 없으니 이런 문제는 ​모듈식 개발 아이디어를 이용하면 해결될 수 있습니다

모듈식 개발을 활용하면 어떤 장점이 있는지 간단히 이야기해 보세요

1. 명확한 정리와 손쉬운 유지 관리

2. 한꺼번에 하지 마세요 모든 데이터 요청이 반환되고 사용자 경험이 좋습니다

3. 모듈은 서로 격리되어 있지만 내부 구성원은 특정 인터페이스를 통해 노출되거나 다른 모듈에 의존할 수 있습니다

컴포넌트화와 모듈화의 비교

많은 사람들이 컴포넌트화와 모듈화를 하나로 이해하고 있습니다. 물론, 비슷한 점이 많은데, 아래에서 살펴보겠습니다.

1. 컴포넌트화는 독립적이고 재사용 가능한 코드 구성 단위입니다. 구성 요소 시스템은 개발자가 작고 독립적이며 재사용이 가능한 구성 요소를 사용하여 대규모 애플리케이션을 구축할 수 있도록 하는 Vue의 핵심 기능 중 하나입니다. [관련 권장 사항: vuejs 소개 튜토리얼, 웹 프론트 엔드]

2. 기반 개발 애플리케이션 개발 효율성, 테스트 가능성, 재사용성 등을 크게 향상시킬 수 있습니다.

3. 구성 요소 사용은 페이지 구성 요소, 비즈니스 구성 요소, 일반 구성 요소로 분류됩니다.

4. write 구성요소는 구성요소가 아닌 구성요소 구성입니다. 프레임워크는 VueComponent를 기반으로 하며

5를 확장합니다. 주로 구성요소 통신, 확장 등에 사용됩니다.

7. 구성요소는 응집력이 높고 결합도가 낮아야 합니다.

8. 흐름.

컴포넌트화와 모듈화의 차이점: 모듈화: 코드 로직의 관점에서 나누어지며, 코드의 계층적 개발을 촉진하고 각 기능 모듈이 단일 기능을 갖도록 보장합니다.

컴포넌트화: 예 분할 UI 인터페이스 관점에서 프론트엔드를 컴포넌트화하여 UI 컴포넌트 재사용을 용이하게 합니다

전역 컴포넌트를 정의하는 세 가지 방법첫 번째 방법

 <div>
        <!-- 如果要使用组件，直接把组件的名称，以HTML标签形式，引入到页面中即可 -->
    <mycom1></mycom1>
    </div>

<script>
        var com1 = Vue.extend({
        template:&#39;<h3>使用Vue.extend 来创建全局的Vue组件&#39;
        })
        //1,使用Vue.component(&#39;组件名&#39;，创建出来的组件模板对象)
        Vue.component(&#39;mycom1&#39;,com1)
 </script>

두 번째 방법

<script>
Vue.component(&#39;mycom2&#39;,{template:&#39;<div><h3 id="使用Vue-component-nbsp-创建出来的组件">使用Vue.component 创建出来的组件</h3>s<span>template</span></div>&#39;
        })
</script>

세 번째 way 종류

<templat id="temp">
 <div>
   <h1 id="通过templat元素-在外部定义的组件结构-这个方式-有代码的智能提示和高亮">通过templat元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
   <h4 id="好用-不错">好用，不错</h4>
  </div>
</templat>

<script>
 Vue.component(&#39;mycom2&#39;,{
            template:&#39;temp&#39;
        })
</script>

참고: 구성 요소가 생성되는 방식에 관계없이 구성 요소의 템플릿 속성이 가리키는 템플릿 콘텐츠는 루트 요소를 하나만 가져야 하며 하나만 가질 수 있습니다.

세 번째 방법은 작업 프로젝트 개발에 가장 적합합니다

[관련 권장 사항:

vuejs 비디오 튜토리얼

]

위 내용은 vue에서 구성 요소화와 모듈화의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!