结构化组件

在Vue中，结构化组件（Functional Component）是一种特殊的组件类型，它是一种无状态的、无实例的组件，用于提高渲染性能和减少内存占用。结构化组件不依赖于组件实例的状态和生命周期，只接收配置数据，随后返回渲染结果。

结构化组件有以下特点：

1、不需要标准的组件选项，例如data、methods、watch等。

2、函数式声明组件，只包含一个函数，接收一个参数props作为配置数据，返回一个虚拟节点（Vnode）作为渲染结果。

3、内部没有状态和实例，通过render函数直接生成Vnode节点进行渲染，节省了组件实例创建和销毁的开销。

结构化组件可以通过Vue.extend方法来创建:

1
2
3
4
5
6
7
8
9

const MyFunctionalComponent = Vue.extend({
  functional: true,
  render(h, context) {
    const { props } = context;
    // 使用 props 渲染组件
    return h('div', props.text);
  }
})

在上面的代码中，我们使用Vue.extend方法创建了一个结构化组件MyFunctionalComponent，并使用functional: true选项来声明它是一个结构化组件。

该组件的render函数接收了两个参数:

  • h函数: 用于创建Vnode节点.
  • context上下文对象: 包含了props和children等属性，可以作为配置数据和插槽内容传递给组件进行渲染。

结构化组件适用于一些只依赖于外部数据，不依赖于组件自身实例和状态管理的场景,例如:静态化组件、列表项组件等。

⚠️： 结构化组件也有一些限制和注意事项,例如:无法自定义指令、无法使用组件自定义事件等，需要结合具体场景进行选择和使用。

嵌套组件

在Vue中，嵌套组件（Nested Component）指的是将一个组件作为另一个组件的子组件，形成层次化的组件结构。通过嵌套组件，我们可以将复杂的界面拆分成多个独立的组件，提高组件复用性和可维护性。

嵌套组件的使用非常简单，只需要在父组件的模板中使用子组件即可。例如，我们可以定义一个child子组件，并在parent父组件中使用它：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 定义子组件 Child
Vue.component('child', {
  template: '<div>Child Component</div>'
})

// 定义父组件 Parent
Vue.component('parent', {
  template: `
    <div>
      <div>Parent Component</div>
      <child></child>
    </div>
  `
})

在上面的代码中，我们定义了一个名为child的子组件和一个名为parent的父组件，父组件中通过<child></child>标签嵌套子组件。

⚠️：在使用嵌套组件时，需要遵循以下原则：

1、组件名称采用短横线命名法，例如child-component。

2、父组件和子组件之间通过props和event进行数据和事件传递,减少组件之间的耦合性和依赖关系。

综上所述，Vue中的嵌套组件可以很好地帮助我们实现界面组件的拆分、复用和维护。

结构化组件 和嵌套组件的区别

结构化组件是可复用的UI组件，只用于展示和交互，没有太多的业务逻辑。结构化组件通常定义为无状态组件（Stateless Component），其主要作用是接收props属性，渲染出可复用的UI元素，从而支持在不同的业务场景中复用。

嵌套组件则是用于业务组合的组件，通常具有业务逻辑和数据状态，包含多个结构化组件以及其他业务代码。嵌套组件主要用于实现更复杂的业务场景。嵌套组件通常需要定义为有状态组件（Stateful Component），并在内部管理自己的状态（data）和行为（methods）。

区别:
1、结构化组件关注的是UI元素的展示和交互，通常只需要接收父组件传递的props属性，并根据props渲染出UI元素即可；
2、而嵌套组件关注的是业务逻辑，需要自己管理状态和行为，并根据状态相应地管理UI元素。

⚠️：结构化组件和嵌套组件并不是两种互相排斥的概念，使用者在实际开发中需要根据具体的业务场景，合理地使用结构化组件和嵌套组件来支持灵活且高效的开发。

结束语

总结：大功告成✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️