What is the difference between componentization and modularization in vue

The difference between componentization and modularization: Modularization is divided from the perspective of code logic; it facilitates code layered development and ensures that the functions of each functional module are consistent. Componentization is planning from the perspective of UI interface; componentization of the front end facilitates the reuse of UI components.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

The origin of modularity

In the early days of web development, js was used as a scripting language to do some simple form verification or animation implementation, with a relatively small amount of code. , just write it in the script tag

With the emergence of ajax asynchronous requests, the front-end and back-end separation have gradually formed. The client needs to complete more and more things, and the amount of code is also increasing. . In order to cope with the sharp increase in the amount of code, we usually organize the code in multiple js files for maintenance

But there will be some problems: such as the problem of global variables with the same name

Use function closure Packages can solve the problem of variable conflicts, but variables defined in other files cannot be used.

Modularization has two cores: export and import

Learn about es6 modular development Bar

Keyword export (export) import (import)

For example, encapsulate a module that sends ajax

In some cases, a module contains a certain function. We do not want to name this function. Let the importer name it by himself.

You can use export default

export default address
//只能默认一个

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

//导入 import

Why use modularity? The benefits of using modularity

Of course, all functions of the page can be realized without using modular development, but it will increase the pressure on server requests and reduce the user experience. When the page needs When there is too much data, one request contains all the requested data. What if the user does not need it? Is such a request still effective? Of course it has no effect, so this kind of problem can be solved by using the idea of ​​modular development

Briefly talk about the benefits of using modular development

1. Clear organization and easy maintenance

2. All data will not be requested back at once, and the user experience is good

3. Modules are isolated from each other, but internal members can be exposed through specific interfaces, or they can rely on others Module

Comparison between componentization and modularization

Many people understand componentization and modularization as one, and of course they are similar in many places , let’s take a look at the similarities below!

1. Componentization is an independent and reusable code organization unit. The component system is one of the core features of Vue, which enables developers to build large applications using small, independent and often reusable components; [Related recommendations: vuejs introductory tutorial, web front-end 】

2. Component development can greatly improve application development efficiency, testability, reusability, etc.;

3. Component usage is classified into: page components, business components, and general components. ;

4. Vue components are based on configuration. The components we usually write are component configurations rather than components. The framework will subsequently generate its constructors. They are based on VueComponent and extend Vue;

5. Common componentization technologies in Vue include attribute prop, custom events, slots, etc., which are mainly used for component communication, expansion, etc.;

6. Reasonable division of components helps to improve application performance ;

7. Components should be highly cohesive and low coupling;

8. Follow the principle of one-way data flow.

The difference between componentization and modularization:

Modularization: It is divided from the perspective of code logic; it facilitates hierarchical development of code , ensuring that each functional module has a single function

Componentization: It is divided from the perspective of UI interface, and the componentization of the front end facilitates the reuse of UI components

Three ways to define global components

The first way

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

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

The second way

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

The third way Kind

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

Note: No matter which way the component is created, the template content pointed to by the component's template attribute must have and can only have one and only one root element.

The third method is best to use in work project development

[Related recommendations: vuejs video tutorial]

The above is the detailed content of What is the difference between componentization and modularization in vue. For more information, please follow other related articles on the PHP Chinese website!