vue:组件化思想的理解

阳光穿透心脏的1/2处 2023-07-17 15:46 80阅读 0赞

通过一道面试题理解组件化思想

组件化是Vue的精髓,Vue应用就是由一个个组件构成的。Vue的组件化涉及到的内容非常多,当面试时被问到:

谈一下你对Vue组件化的理解。

这时候有可能无从下手,可以从以下几点进行阐述:

定义

组件是可复用的 Vue 实例,准确讲它们是VueComponent的实例,继承自Vue。

优点

组件化可以增加代码的复用性、可维护性和可测试性。

使用场景

什么时候使用组件?以下分类可作为参考:

  • 通用组件:实现最基本的功能,具有通用性、复用性,例如按钮组件、输入框组件、布局组件等。
  • 业务组件:它们完成具体业务,具有一定的复用性,例如登录组件、轮播图组件。
  • 页面组件:组织应用各部分独立内容,需要时在不同页面组件间切换,例如列表页、详情页组件

如何使用组件

  • 定义:Vue.component(),components选项,sfc
  • 分类:有状态组件,functional,abstract
  • 通信:props, e m i t ( ) / emit()/ emit()/on(),provide/inject, c h i l d r e n / children/ children/parent/ r o o t / root/ root/attrs/$listeners
  • 内容分发:<slot><template>,v-slot
  • 使用及优化:is,keep-alive,异步组件

组件的本质

vue中的组件经历如下过程
组件配置 => VueComponent实例 => render() => Virtual DOM=> DOM
所以组件的本质是产生虚拟DOM

官方对组件化的定义和理解:

vue组件系统提供了一种抽象,让我们可以使用独立可复用的组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率,方便重复使用(复用),简化调试步骤,提升项目可维护性,便于多人协同开发
在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,80人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Vue 开发

    Vue 组件化开发 什么叫做组件化 实例 什么叫做组件化 所谓组件化,就是把页面拆分成多个组件然后可重复利用,每个组件依赖的 CSS、JS、模板、图片

    相关 Vue应用构建

    组件化应用构建   组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽

    相关 Vue.js 开发

    三、组件化开发 1.1 组件化的实现和使用步骤 组件注册步骤解析 1.2 全局组件和局部组件 1.3 父组件和子组件 1.4 注册组件