动态组件：React vs Vue答案

【问题标题】：Dynamic Components: React vs Vue动态组件：React vs Vue
【发布时间】：2019-12-24 21:17:45
【问题描述】：

在 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 将是计算属性（通常）或只是数据中的属性

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

【问题讨论】：

我根本不了解 Vue，但由于那个 react 组件只是一个函数，所以你如何获得这个函数并不重要，它的渲染是一样的。并且访问对象的属性非常快。因此，至少在 React 中，性能成本几乎为零。
这两个选项对性能的影响可以忽略不计。更重要的是正在渲染/销毁哪些组件，而不是在它们之间切换的方法。

标签： javascript reactjs vue.js vuejs2 vue-component

【解决方案1】：

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

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

【讨论】：