认识组件化开发

大约 11 分钟

认识组件化开发

人面对复杂问题的处理方式：
- 任何一个人处理信息的逻辑能力都是有限的
- 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。
- 但是，我们人有一种天生的能力，就是将问题进行拆解。
- 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。
组件化也是类似的思想：
- 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展；
- 但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了；
- 如果我们将一个个功能块拆分后，就可以像搭建积木一下来搭建我们的项目；
现在可以说整个的大前端开发都是组件化的天下，无论从三大框架（Vue、React、Angular），还是跨平台方案的Flutter，甚至是移动端都在转向组件化开发，包括小程序的开发也是采用组件化开发的思想
所以，学习组件化最重要的是它的思想，每个框架或者平台可能实现方法不同，但是思想都是一样的。
我们需要通过组件化的思想来思考整个应用程序：
- 我们将一个完整的页面分成很多个组件；
- 每个组件都用于实现页面的一个功能块；
- 而每一个组件又可以进行细分；
- 而组件本身又可以在多个地方进行复用；

Vue的组件化

vue 项目起始文件 createApp 函数传入了一个对象App，这个对象其实本质上就是一个组件，也是我们应用程序的根组件；
组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用；
任何的应用都会被抽象成一颗组件树；

组件名称

在通过 app.componen t注册一个组件的时候，第一个参数是组件的名称，定义组件名的方式有两种：
方式一：使用 kebab-case（短横线分割符）
- 当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>;
方式二：使用 PascalCase（驼峰标识符）
- 当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name>和 MyComponentName 都是可接受的；
在单文件组件和内联字符串模板中，我们都推荐这样做。但是，PascalCase 的标签名在 DOM 模板中是不可用的，详情参见 DOM 内模板解析注意事项open in new window。
为了方便，Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这意味着一个以 MyComponent 为名注册的组件，在模板中可以通过 <MyComponent> 或 <my-component> 引用。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。

注册组件的方式

https://cn.vuejs.org/guide/components/registration.html#component-registration

如果我们现在有一部分内容（模板、逻辑等），我们希望将这部分内容抽取到一个独立的组件中去维护，这个时候如何注册一个组件呢？
我们先从简单的开始谈起，比如下面的模板希望抽离到一个单独的组件：

<h2>{{title}}</h2>
<h2>{{message}}</h2>

注册组件分成两种：
- 全局组件：在任何其他的组件中都可以使用的组件；
- 局部组件：只有在注册的组件中才能使用的组件；

注册全局组件

全局组件需要使用我们全局创建的app来注册组件；
通过component方法传入组件名称、组件对象即可注册一个全局组件了；
之后，我们可以在App组件的template中直接使用这个全局组件：

<body>
  <div id="app"></div>

  <template id="my-app">
    <component-a></component-a>
  </template>
  
  <script src="../js/vue.js"></script>
  <script>
    const App = {
      template: '#my-app',
    }

    // 使用 app.component() 注册一个全局组件, app.component() 是 Vue.createApp() 的一个方法
    const app = Vue.createApp(App);

    // app.component() 的第一个参数是组件的名称, 第二个参数是组件的配置对象
    app.component('component-a', {
      template: '<h2>{{ title }}</h2>',
      data() {
        return {
          title: '我是标题',
          desc: '我是内容, 哈哈哈哈哈'
        }
      },
      methods: {
        btnClick() {
          console.log('按钮的点击');
        }
      }
    });

    app.mount('#app');
  </script>
</body>

也可以

<template id="component-a">
    <h2>{{ title }}</h2>
    <p>{{ desc }}</p>
</template>

app.component('component-a', {
	template: '#component-a',
	...
}

注册局部组件

全局注册虽然很方便，但有以下几个问题：

全局注册，但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。
全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。

相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。

局部注册需要使用 components 选项：

<script>
import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
}
</script>

<template>
  <ComponentA />
</template>

对于每个 components 对象里的属性，它们的 key 名就是注册的组件名，而值就是相应组件的实现。上面的例子中使用的是 ES2015 的缩写语法，等价于：

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

请注意：局部注册的组件在后代组件中并不可用。在这个例子中，ComponentA 注册后仅在当前组件可用，而在任何的子组件或更深层的子组件中都不可用。

全局组件往往是在应用程序一开始就会全局组件完成，那么就意味着如果某些组件我们并没有用到，也会一起被注册：
- 比如我们注册了三个全局组件：ComponentA、ComponentB、ComponentC；
- 在开发中我们只使用了ComponentA、ComponentB，如果ComponentC没有用到但是我们依然在全局进行了注册，那么就意味着类似于webpack这种打包工具在打包我们的项目时，我们依然会对其进行打包；
- 这样最终打包出的JavaScript包就会有关于ComponentC的内容，用户在下载对应的JavaScript时也会增加包的大小；
所以在开发中我们通常使用组件的时候采用的都是局部注册：
- 局部注册是在我们需要使用到的组件中，通过components属性选项来进行注册；
- 比如之前的App组件中，我们有data、computed、methods等选项了，事实上还可以有一个components选项；
- 该components选项对应的是一个对象，对象中的键值对是组件的名称: 组件对象；

Vue的开发模式

目前我们使用vue的过程都是在html文件中，通过template编写自己的模板、脚本逻辑、样式等。
但是随着项目越来越复杂，我们会采用组件化的方式来进行开发：
- 这就意味着每个组件都会有自己的模板、脚本逻辑、样式等；
- 当然我们依然可以把它们抽离到单独的js、css文件中，但是它们还是会分离开来；
- 也包括我们的script是在一个全局的作用域下，很容易出现命名冲突的问题；
- 并且我们的代码为了适配一些浏览器，必须使用ES5的语法；
- 在我们编写代码完成之后，依然需要通过工具对代码进行构建、代码；
所以在真实开发中，我们可以通过一个后缀名为 .vue 的single-file components (单文件组件) 来解决，并且可以使用 webpack 或者 vite 或者 rollup 等构建工具来对其进行处理。

比如: 我们可以单独抽离组件 componentA

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ desc }}</p>
    <button @click="btnClick">按钮点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "我是标题",
      desc: "我是内容, 哈哈哈哈哈",
    };
  },
  methods: {
    btnClick() {
      console.log("按钮的点击");
    },
  },
};
</script>

<style scoped></style>

在这个组件中我们可以获得非常多的特性：
代码的高亮；
ES6、CommonJS的模块化能力；
组件作用域的CSS；
可以使用预处理器来构建更加丰富的组件，比如TypeScript、Babel、Less、Sass等；

如何支持SFC

如果我们想要使用这一 componentA.vue 文件，比较常见的是两种方式：
- 方式一：使用Vue CLI来创建项目，项目会默认帮助我们配置好所有的配置选项，可以在其中直接使用.vue文件；
- 方式二：自己使用webpack或rollup或 vite 这类打包工具，对其进行打包处理；

组件实例

`$refs`

https://cn.vuejs.org/api/component-instance.html#refs

某些情况下，我们在组件中想要直接获取到元素对象或者子组件实例：
- 在Vue开发中我们是不推荐进行DOM操作的；
- 这个时候，我们可以给元素或者组件绑定一个ref的attribute属性；
- 在Vue 3中，$refs属性用于访问父组件中的子组件或DOM元素。它允许您以编程方式直接引用和操作这些组件或元素。

<template>
  <div>
    <child-component ref="childRef"></child-component>
    <button @click="logChildRef">Log Child Ref</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    logChildRef() {
      console.log(this.$refs.childRef);
    }
  }
}
</script>

在上面的示例中，我们通过使用ref属性给子组件命名为childRef，然后可以通过this.$refs.childRef来访问和操作子组件。在点击"Log Child Ref"按钮时，会将子组件实例打印到控制台。

### $parent, $root

https://cn.vuejs.org/api/component-instance.html#parent

在Vue中，$parent和$root都是用于访问组件层级关系的特殊属性。

$parent属性用于访问当前组件的父组件实例。通过this.$parent可以访问父组件的属性和方法。
$root属性用于访问根组件实例。根组件是Vue应用的最顶层组件，通过this.$root可以访问根组件的属性和方法。

这些属性在处理组件之间的通信或访问全局状态时非常有用。

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
    console.log(this.$parent); // 访问父组件实例
    console.log(this.$root); // 访问根组件实例
  }
}
</script>

在上面的示例中，父组件中通过使用$parent属性访问了父组件实例，使用$root属性访问了根组件实例，并将它们打印到控制台。

组件的 v-model

https://cn.vuejs.org/guide/components/v-model.html#component-v-model

v-model 可以在组件上使用以实现双向绑定。

首先让我们回忆一下 v-model 在原生元素上的用法：

<input v-model="searchText" />

在代码背后，模板编译器会对 v-model 进行更冗长的等价展开。因此上面的代码其实等价于下面这段：

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

而当使用在一个组件上时，v-model 会被展开为如下的形式：

<CustomInput
  :model-value="searchText"
  @update:model-value="newValue => searchText = newValue"
/>

要让这个例子实际工作起来，<CustomInput> 组件内部需要做两件事：

将内部原生 <input> 元素的 value attribute 绑定到 modelValue prop
当原生的 input 事件触发时，触发一个携带了新值的 update:modelValue 自定义事件

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

现在 v-model 可以在这个组件上正常工作了：

<CustomInput v-model="searchText" />

另一种在组件内实现 v-model 的方式是使用一个可写的，同时具有 getter 和 setter 的 computed 属性。get 方法需返回 modelValue prop，而 set 方法需触发相应的事件：

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<template>
  <input v-model="value" />
</template>

多个 `v-model` 绑定

利用刚才在 v-model 参数open in new window小节中学到的指定参数与事件名的技巧，我们可以在单个组件实例上创建多个 v-model 双向绑定。

组件上的每一个 v-model 都会同步不同的 prop，而无需额外的选项：

<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>

<script>
export default {
  props: {
    firstName: String,
    lastName: String
  },
  emits: ['update:firstName', 'update:lastName']
}
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

<script>
  export default {
    props: {
      modelValue: String,
      title: String 
    },
    emits: ["update:modelValue", "update:title"],
    computed: {
      value: {
        set(value) {
          this.$emit("update:modelValue", value);
        },
        get() {
          return this.modelValue;
        }
      },
      why: {
        set(why) {
          this.$emit("update:title", why);
        },
        get() {
          return this.title;
        }
      }
    }
  }
</script>

认识组件化开发

# 认识组件化开发

# Vue的组件化

# 组件名称

# 注册组件的方式

# 注册全局组件

# 注册局部组件

# Vue的开发模式

# 如何支持SFC

# 组件实例

# $refs

# 组件的 v-model

# 多个 v-model 绑定

认识组件化开发

Vue的组件化

组件名称

注册组件的方式

注册全局组件

注册局部组件

Vue的开发模式

如何支持SFC

组件实例

`$refs`

组件的 v-model

多个 `v-model` 绑定