javascript - 阻止 Vue.js 渲染组件

Question

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

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

是否有可能以某种方式阻止在 beforeCreate() Hook 上呈现，但仍然能够在某些条件下使用它？

Answer 1

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

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

移动轮播.ts

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

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

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

export default MobileCarousel;

路由.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 组件仅当它是移动时才返回也对您的情况很有用。