如何让Vue.js单页组件的初始data值适配视口宽度且保持响应性？

算力阿峰

2026-10-6

问题原因

你修改后的代码在onresize方法中判断的是仅初始化时赋值一次的windowWidth，后续窗口尺寸变化时该值不会同步更新，导致resize逻辑永远按初始窗口宽度执行
移除resize事件监听时额外传入了true捕获参数，和添加事件时的参数不一致，会导致监听移除失败
部分版本的v-rellax指令默认不支持响应式更新参数，修改r_speed后不会自动刷新视差效果

修复后完整代码

<template>
  <section id="home">
    <h1>Some heading.</h1>
    <h2>Some other heading</h2>
    <!-- 若修改r_speed后视差未生效，可打开下方注释加key强制重新渲染指令 -->
    <!-- <div id="image" v-rellax="{ speed: r_speed }" :key="`rellax-${r_speed}`"></div> -->
    <div id="image" v-rellax="{ speed: r_speed }"></div>
  </section>
</template>

<script>
// 若需要节流优化resize触发频率，可引入lodash的throttle
// import { throttle } from 'lodash'
export default {
  name: "home",
  data() {
    return {
      r_speed: -5
    }
  },
  methods: {
    // 若用节流可替换为 onresize: throttle(function(event) { ... }, 100)
    onresize(event) {
      const currentWidth = event ? event.target.innerWidth : window.innerWidth
      this.r_speed = currentWidth >= 576 ? -3 : -5
    }
  },
  created() {
    window.addEventListener("resize", this.onresize)
  },
  mounted() {
    // 初始化时执行一次，自动匹配当前窗口宽度设置速度
    this.onresize()
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onresize)
  }
}
</script>

优化建议