时间戳

首页 > 解决方案 > 动态组件：React vs Vue

javascript - 动态组件：React vs Vue

问题描述

在 React 中，我们可以通过这种方式添加动态组件（我是从 react 文档https://reactjs.org/docs/jsx-in-depth.html中获取的）：

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

它只是一个返回具有正确组件的模板的函数（取决于道具）

在 Vue 中，我们可以使用以下方法执行相同的逻辑：

<template>    
  <component :is="currentComponent"></component>
</template>

currentComponent将是一个计算属性（通常）或只是数据中的一个属性

我的问题是：性能和渲染哪个选项更便宜？

标签： javascriptreactjsvue.jsvuejs2vue-component

解决方案

如果您想动态加载组件，那么您将使用计算属性，因为属性值是动态的并且应该处于状态，我猜您正在使用 vuex 来使用 ...mapGetters 在计算属性上检索数据。

使用数据属性主要用于固定值或声明

推荐阅读