当前位置：首页 > VUE

vue实现响应式页面

2026-02-20 21:15:02VUE

使用 Vue 实现响应式页面

Vue 提供了多种方式实现响应式页面，主要依赖其核心功能（如响应式数据绑定）和生态工具（如 Vue Router、Vuex 或 Pinia）。以下是几种常见方法：

响应式数据绑定

Vue 的响应式系统会自动跟踪数据变化并更新 DOM。通过 data 或 ref/reactive（Composition API）声明响应式数据：

// Options API
export default {
  data() {
    return {
      windowWidth: window.innerWidth
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth
    }
  }
}

// Composition API
import { ref, onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const windowWidth = ref(window.innerWidth)

    const handleResize = () => {
      windowWidth.value = window.innerWidth
    }

    onMounted(() => {
      window.addEventListener('resize', handleResize)
    })

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize)
    })

    return { windowWidth }
  }
}

条件渲染与动态样式

根据屏幕尺寸或设备类型动态调整布局或样式：

vue实现响应式页面

<template>
  <div :class="{ 'mobile-layout': windowWidth < 768 }">
    <component :is="windowWidth >= 1024 ? 'DesktopNav' : 'MobileNav'" />
  </div>
</template>

CSS 媒体查询与 Vue 结合

在 Vue 单文件组件中直接使用 CSS 媒体查询：

<style scoped>
.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    max-width: 750px;
  }
}
</style>

使用第三方库

VueUse 的 useBreakpoints 提供响应式屏幕尺寸检测：
```
import { useBreakpoints } from '@vueuse/core'
```

const breakpoints = useBreakpoints({ mobile: 640, tablet: 768, desktop: 1024 })

vue实现响应式页面

const isMobile = breakpoints.smaller('tablet')


2. Vuetify 或 Element Plus 等 UI 框架内置响应式布局系统：
```html
<template>
  <el-row :gutter="20">
    <el-col :xs="24" :sm="12" :md="8">Column 1</el-col>
    <el-col :xs="24" :sm="12" :md="8">Column 2</el-col>
  </el-row>
</template>

响应式图片加载

通过 picture 标签或计算属性切换不同分辨率的图片：

<template>
  <img :src="imageSrc" alt="Responsive Image">
</template>

<script>
export default {
  computed: {
    imageSrc() {
      return this.windowWidth > 768 
        ? '/images/desktop.jpg' 
        : '/images/mobile.jpg'
    }
  }
}
</script>

路由级响应式

使用 Vue Router 根据设备类型重定向或加载不同组件：

const routes = [
  {
    path: '/',
    component: () => import(
      window.innerWidth > 768 
        ? './DesktopHome.vue' 
        : './MobileHome.vue'
    )
  }
]