防止 Vue.js 渲染组件答案

【问题标题】：Prevent Vue.js from rendering component防止 Vue.js 渲染组件
【发布时间】：2017-08-30 01:06:41
【问题描述】：

我的情况是我在桌面上有一个静态组件，它必须在移动设备上变成轮播。该组件由于 seo 而呈现在服务器端，我使用is="my-component" 在其上触发 vue。通常，当我复制标记并签入created() 断点时，我可以触发一些轮播构造函数。但是，如果断点设置为桌面，vue 仍然会重新渲染多余的组件。

我知道一个case可能效果不是那么好，但是我之前的项目因为vue有很多性能和解析问题，所以我需要从一开始就牢记性能.

是否有可能以某种方式阻止在 beforeCreate() 钩子上渲染，但仍然可以在某些条件下使用它？

【问题讨论】：

为什么不使用v-if？不清楚你在问什么
我现在使用v-if，但它仍然是在之后 vue 解析模板触发的。我的观点是在一些 beforeCreate 钩子上防止整个 vue 逻辑。
你能显示那个代码吗？我还是不清楚你的意思
我真的很想看到答案。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

我已经阅读了您的评论，并且您想使用不是v-if 的其他东西，我只能通过两种方式来考虑。

1)如果您使用的是vue-router，则可以运行Lazy Loading Routes，它基本上是一个可以返回import('component')（这是一个承诺）的函数。

MobileCarousel.ts

import { isMobile } from '@/utils/mediaQuery';

const MobileCarousel = (): Promise<Vue> | void => {
  if (!isMobile()) {
    return;
  }

  return import('@/components/MobileCarousel/MobileCarousel.vue');
};

export default MobileCarousel;

Routes.ts

import MobileCarousel from '@/components/MobileCarousel/MobileCarousel.ts';

...
{
  path: 'route-that-has-a-mobile-only-carousel',
  name: 'mobile-only-carousel',
  component: MobileCarousel,
},
enter code here

我对这种方法的唯一关注与服务器端渲染有关。由于我从未使用 Vue 玩过服务器端渲染，因此我无法向您保证它会按您的预期工作，您可以尝试一下。希望对你有帮助。

2) 除了使用延迟加载路由之外，我相信带有 render function 且仅在移动时返回的 Vue 组件对您的情况也很有用。

【讨论】：