Vue 中常用的组件设计模式有哪些？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

1. 单文件组件 (SFC)

单文件组件是 Vue 中最常见的组件设计模式。它将模板、脚本和样式封装在一个 .vue 文件中，便于维护和复用。SFC 的结构清晰，适合开发大型应用。

// www.javascriptcn.com code example
<template>
  <div class="example">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

<style scoped>
.example {
  color: red;
}
</style>

2. 容器组件与展示组件

容器组件负责处理业务逻辑和数据，展示组件负责 UI 渲染。这种模式有助于分离关注点，使代码更易于维护。

// www.javascriptcn.com code example
<!-- ContainerComponent.vue -->
<template>
  <div>
    <PresentationComponent :data="data" />
  </div>
</template>

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

export default {
  components: {
    PresentationComponent
  },
  data() {
    return {
      data: [/* some data */]
    }
  }
}
</script>

<!-- PresentationComponent.vue -->
<template>
  <ul>
    <li v-for="item in data" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  props: ['data']
}
</script>

3. 高阶组件 (HOC)

高阶组件是通过函数包装组件，增强组件的功能。它类似于 React 中的高阶组件模式。

// www.javascriptcn.com code example
function withLoading(WrappedComponent) {
  return {
    data() {
      return {
        isLoading: true
      }
    },
    mounted() {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
    render(h) {
      return h(WrappedComponent, {
        props: {
          isLoading: this.isLoading
        }
      });
    }
  }
}

4. 插槽 (Slots)

插槽机制允许父组件向子组件传递内容，增强组件的灵活性。

// www.javascriptcn.com code example
<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <p>This is a slot content.</p>
  </ChildComponent>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

5. 作用域插槽 (Scoped Slots)

作用域插槽允许父组件访问子组件的数据，实现更复杂的组件交互。

// www.javascriptcn.com code example
<!-- ParentComponent.vue -->
<template>
  <ChildComponent v-slot="{ user }">
    <p>{{ user.name }}</p>
  </ChildComponent>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John Doe'
      }
    }
  }
}
</script>

6. Render 函数

Render 函数通过 JavaScript 编写渲染逻辑，提供更高的灵活性。

export default {
  render(h) {
    return h('div', {
      class: 'example'
    }, 'Hello, Vue!');
  }
}

7. 函数式组件

函数式组件是无状态、无实例的组件，适用于纯展示的场景。

export default {
  functional: true,
  props: ['message'],
  render(h, context) {
    return h('div', context.props.message);
  }
}

Vue 中常用的组件设计模式有哪些？

推荐答案