vue实现断点渲染

实现断点渲染的基本思路

Vue中实现断点渲染通常指根据屏幕尺寸或设备特性动态渲染不同内容。核心是通过监听浏览器窗口变化，结合CSS媒体查询或JavaScript判断当前断点，控制组件的显示与隐藏。

使用CSS媒体查询控制渲染

通过CSS的display: none和Vue的v-show指令结合实现。定义不同断点的CSS类，动态切换类名控制元素显示。

/* 定义断点样式 */
@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }
  .desktop-only {
    display: none;
  }
}
@media (min-width: 769px) {
  .mobile-only {
    display: none;
  }
  .desktop-only {
    display: block;
  }
}

<template>
  <div>
    <div class="mobile-only">移动端内容</div>
    <div class="desktop-only">桌面端内容</div>
  </div>
</template>

使用Vue响应式数据动态判断

通过window.innerWidth监听窗口变化，在Vue的data或computed中定义断点状态。

export default {
  data() {
    return {
      windowWidth: window.innerWidth
    }
  },
  created() {
    window.addEventListener('resize', this.handleResize);
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth;
    }
  },
  computed: {
    isMobile() {
      return this.windowWidth <= 768;
    }
  }
}

<template>
  <div>
    <div v-if="isMobile">移动端内容</div>
    <div v-else>桌面端内容</div>
  </div>
</template>

使用第三方库简化实现

安装vue-responsive或vue-breakpoints等库可快速实现响应式渲染。

npm install vue-responsive

import Vue from 'vue';
import VueResponsive from 'vue-responsive';

Vue.use(VueResponsive);

<template>
  <responsive>
    <div slot-scope="{ width }">
      <div v-if="width <= 768">移动端内容</div>
      <div v-else>桌面端内容</div>
    </div>
  </responsive>
</template>

性能优化建议

避免在resize事件中频繁触发重渲染，可使用防抖函数优化。动态导入组件结合<component :is="">实现按需加载。

methods: {
  handleResize: _.debounce(function() {
    this.windowWidth = window.innerWidth;
  }, 100)
}

服务端渲染(SSR)兼容处理

在Nuxt.js等SSR框架中，需通过process.client判断客户端环境后再监听窗口事件。

if (process.client) {
  window.addEventListener('resize', this.handleResize);
}