Question

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

我知道有一个案例可能不那么有效，但是由于我以前的项目中的vue ，我有很多性能和解析问题，所以我需要从头开始记住性能

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

Answer 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组件也可能对您的情况有用。

阻止Vue.js呈现组件

1 个答案: