Vue3动态样式控制：ref、reactive、watch与computed的应用场景与区别是什么？

kknone
151 阅读4分钟

一、响应式数据：动态样式的“开关”

在Vue3中，响应式数据是动态样式的核心驱动力——当数据变化时，Vue会自动追踪并更新关联的样式。我们常用ref（用于基本类型）和reactive（用于对象/数组）来定义响应式数据，再通过v-bind:style或v-bind:class绑定到模板。

1.1 用ref绑定简单样式

ref适合管理单一或少量样式属性（如颜色、字体大小）。比如一个可切换主题的按钮：

<template>
  <!-- 用:style绑定ref变量 -->
  <button 
    class="dynamic-btn"
    :style="{ 
      backgroundColor: btnColor, 
      fontSize: `${fontSize}px` 
    }"
    @click="toggleStyle"
  >
    点击切换样式
  </button>
</template>

<script setup>
import { ref } from 'vue'

// 用ref定义响应式样式数据
const btnColor = ref('#42b983') // 初始绿色
const fontSize = ref(16)        // 初始字体大小16px

// 点击事件：修改响应式数据
const toggleStyle = () => {
  btnColor.value = btnColor.value === '#42b983' ? '#2196f3' : '#42b983'
  fontSize.value += 2 // 每次点击字体增大2px
}
</script>

<style scoped>
.dynamic-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease; /* 过渡动画，让变化更平滑 */
}
</style>

关键解释：

  • btnColor.value和fontSize.value是响应式的，修改它们会触发Vue的重新渲染。
  • :style绑定的是一个对象，键是CSS属性（驼峰式或短横线式都可以，Vue会自动转换），值是响应式变量。

1.2 用reactive管理复杂样式对象

当样式属性较多时，reactive更适合——它能将多个样式属性封装成一个响应式对象，便于维护。比如一个可切换风格的卡片：

<template>
  <div class="card" :style="cardStyle">
    <h3>响应式卡片</h3>
    <p>这是一张用reactive管理样式的卡片</p>
  </div>
  <button @click="toggleCardStyle">切换卡片风格</button>
</template>

<script setup>
import { reactive } from 'vue'

// 用reactive定义复杂样式对象
const cardStyle = reactive({
  backgroundColor: '#fff',
  borderRadius: '8px',
  padding: '20px',
  boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
  transition: 'all 0.3s ease'
})

// 切换卡片样式：修改reactive对象的属性
const toggleCardStyle = () => {
  cardStyle.backgroundColor = cardStyle.backgroundColor === '#fff' ? '#f5f5f5' : '#fff'
  cardStyle.boxShadow = cardStyle.boxShadow === '0 2px 4px rgba(0,0,0,0.1)' ? '0 4px 8px rgba(0,0,0,0.2)' : '0 2px 4px rgba(0,0,0,0.1)'
}
</script>

优势：

  • 样式属性集中管理，避免ref变量泛滥；
  • 修改reactive对象的属性时，Vue会自动追踪变化（深层响应式）。

二、watch：监听变化的“样式控制器”

watch能监听响应式数据的变化，根据数据变化动态调整样式。常见场景如：监听滚动位置、用户输入、窗口大小等。

2.1 案例：监听滚动，实现导航栏固定

很多网页的导航栏会在滚动超过一定距离后“固定”在顶部，这个效果可以用watch结合滚动事件实现：

<template>
  <nav :style="navStyle">
    <a href="#home">首页</a>
    <a href="#about">关于我们</a>
    <a href="#contact">联系我们</a>
  </nav>
  <!-- 模拟长内容 -->
  <div class="content" :style="{ height: '2000px' }"></div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted, reactive } from 'vue'

// 1. 定义响应式数据：记录滚动距离
const scrollTop = ref(0)

// 2. 定义导航栏样式
const navStyle = reactive({
  position: 'relative',
  top: 0,
  width: '100%',
  padding: '16px 0',
  backgroundColor: '#fff',
  boxShadow: 'none',
  transition: 'all 0.3s ease',
  zIndex: 999
})

// 3. 监听滚动事件：更新scrollTop
const handleScroll = () => {
  scrollTop.value = window.scrollY
}

// 4. 生命周期钩子：挂载时添加事件监听，卸载时移除
onMounted(() => window.addEventListener('scroll', handleScroll))
onUnmounted(() => window.removeEventListener('scroll', handleScroll))

// 5. watch监听scrollTop：调整导航栏样式
watch(scrollTop, (newVal) => {
  if (newVal > 100) { // 滚动超过100px时固定
    navStyle.position = 'fixed'
    navStyle.boxShadow = '0 2px 8px rgba(0,0,0,0.15)'
    navStyle.backgroundColor = '#f8f8f8'
  } else { // 恢复默认样式
    navStyle.position = 'relative'
    navStyle.boxShadow = 'none'
    navStyle.backgroundColor = '#fff'
  }
})
</script>

<style scoped>
nav a { margin: 0 16px; text-decoration: none; color: #333; }
.content { margin-top: 20px; background-color: #f0f0f0; }
</style>
往期文章归档
免费好用的热门在线工具

关键逻辑：

  • onMounted中添加滚动事件监听，onUnmounted中移除（避免内存泄漏）；
  • watch监听scrollTop的变化，当超过100px时修改导航栏的position为fixed，并添加阴影。

2.2 案例：监听输入，调整输入框样式

当用户输入内容时，我们可以根据输入长度调整输入框的边框颜色（比如输入过短提示红色，足够长提示绿色）：

<template>
  <input 
    type="text" 
    v-model="inputValue"
    :style="inputStyle"
    placeholder="请输入内容（至少5字）"
  >
</template>

<script setup>
import { ref, watch, reactive } from 'vue'

const inputValue = ref('')
const inputStyle = reactive({
  padding: '8px',
  border: '1px solid #ddd',
  borderRadius: '4px',
  transition: 'border-color 0.3s ease'
})

// 监听输入内容长度
watch(inputValue, (newVal) => {
  if (newVal.length < 5) {
    inputStyle.borderColor = '#ff4444' // 红色：输入过短
  } else {
    inputStyle.borderColor = '#00C851' // 绿色：输入足够
  }
})
</script>

三、computed：计算式样式的“高效缓存机”

computed用于根据多个响应式数据计算样式，它会缓存计算结果——只有依赖的数据变化时才会重新计算，比watch更高效。

3.1 案例：进度条的动态样式

进度条是computed的经典场景：根据进度值计算宽度和颜色（比如进度低于30%红色，高于70%绿色）：

<template>
  <div class="progress-container">
    <div class="progress-bar" :style="progressStyle"></div>
  </div>
  <!-- 用滑块控制进度 -->
  <input type="range" min="0" max="100" v-model="progress">
  <p>当前进度：{{ progress }}%</p>
</template>

<script setup>
import { ref, computed } from 'vue'

const progress = ref(50) // 初始进度50%

// 用computed计算进度条样式
const progressStyle = computed(() => {
  // 根据进度值判断颜色
  let barColor = ''
  if (progress.value < 30) barColor = '#ff4444'
  else if (progress.value < 70) barColor = '#ffbb33'
  else barColor = '#00C851'

  return {
    width: `${progress.value}%`, // 进度条宽度
    backgroundColor: barColor,
    transition: 'width 0.3s ease'
  }
})
</script>

<style scoped>
.progress-container {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}
.progress-bar { height: 100%; border-radius: 10px; }
</style>

优势：

  • progressStyle是computed属性，依赖progress——只有progress变化时才会重新计算；
  • 缓存计算结果，避免重复计算（比如progress不变时，多次访问progressStyle不会重新执行函数）。

3.2 案例：结合多个数据的复合样式

假设我们有一个“动态按钮”，样式由size（小/中/大）和type（ primary / secondary ）共同决定：

<template>
  <button :style="buttonStyle">
    动态按钮
  </button>
  <select v-model="size">
    <option value="small">小</option>
    <option value="medium">中</option>
    <option value="large">大</option>
  </select>
  <select v-model="type">
    <option value="primary">primary</option>
    <option value="secondary">secondary</option>
  </select>
</template>

<script setup>
import { ref, computed } from 'vue'

const size = ref('medium')
const type = ref('primary')

// 根据size和type计算按钮样式
const buttonStyle = computed(() => {
  // 尺寸对应的 padding 和 font-size
  const sizeMap = {
    small: { padding: '4px 8px', fontSize: '12px' },
    medium: { padding: '8px 16px', fontSize: '14px' },
    large: { padding: '12px 24px', fontSize: '16px' }
  }
  // 类型对应的背景色
  const typeMap = {
    primary: '#2196f3',
    secondary: '#9e9e9e'
  }

  return {
    ...sizeMap[size.value], // 合并尺寸样式
    backgroundColor: typeMap[type.value],
    color: '#fff',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer',
    transition: 'all 0.3s ease'
  }
})
</script>

解释：

  • buttonStyle依赖size和type两个响应式数据；
  • 当size或type变化时，computed会重新计算样式，否则直接返回缓存的结果。

四、生命周期：样式的“初始化与清理”

Vue的生命周期钩子（如onMounted、onUnmounted）用于在特定阶段处理样式——比如初始化时获取DOM尺寸、卸载时清理事件监听。

4.1 案例：onMounted初始化样式

onMounted会在组件DOM渲染完成后执行，适合获取DOM元素的尺寸或位置，从而初始化样式。比如一个卡片组件，初始化时根据父元素宽度调整自己的宽度：

<template>
  <div class="parent-container">
    <div ref="cardRef" class="card">
      <h3>动态初始化的卡片</h3>
      <p>宽度由父元素决定</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const cardRef = ref(null) // 引用卡片DOM元素

onMounted(() => {
  // 确保DOM已渲染，才能获取父元素宽度
  const parentWidth = cardRef.value.parentElement.offsetWidth
  // 设置卡片的max-width为父元素宽度的80%
  cardRef.value.style.maxWidth = `${parentWidth * 0.8}px`
})
</script>

<style scoped>
.parent-container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
}
.card {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin: 0 auto;
}
</style>

注意：

  • onMounted中cardRef.value已指向真实DOM元素，因此能安全获取parentElement；
  • 如果在setup直接访问cardRef.value，会得到null（因为DOM还没渲染）。

4.2 onUnmounted：清理样式相关的副作用

当组件卸载时，需要清理全局事件监听或定时器，避免内存泄漏。比如之前的滚动监听案例，我们在onUnmounted中移除了滚动事件：

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

课后Quiz：巩固你的动态样式知识

  1. 问题：用reactive定义的样式对象，修改其深层属性时样式没更新，可能的原因是什么？如何解决？
  2. 问题：为什么computed比watch更适合处理动态样式？

答案解析

  1. 原因：reactive的响应式是深层的，但如果直接替换整个对象（比如cardStyle = { ... }），会丢失响应式；或修改未被追踪的属性（比如cardStyle.newProp = 'value'，而newProp不是初始对象的属性）。
    解决：始终修改reactive对象的现有属性，而非替换整个对象；若需添加新属性，用reactive包裹深层对象（比如cardStyle.deep = reactive({ color: 'red' })）。

  2. 原因：computed会缓存计算结果——只有依赖的数据变化时才会重新计算；而watch会在每次监听的数据变化时执行回调（即使结果不变）。例如进度条案例，computed仅在progress变化时重新计算，watch则每次progress变化都执行回调，效率更低。

常见报错及解决方案

1. 报错：TypeError: Cannot read properties of null (reading 'offsetWidth')

  • 原因：在onMounted之前访问ref.value（此时DOM未渲染，ref.value为null）。
  • 解决：确保在onMounted中访问DOM元素（onMounted会等待DOM渲染完成）。
  • 预防：访问ref.value前检查是否存在（如if (cardRef.value) { ... }）。

2. 报错：响应式数据修改后，样式没更新

  • 原因：用了非响应式变量（比如let color = 'red'而非const color = ref('red')）；或修改了reactive对象的未被追踪的属性。
  • 解决：用ref/reactive正确包裹数据；修改reactive对象的现有属性（而非替换整个对象）。

3. 报错：watch监听的变量没触发回调

  • 原因：监听的是普通变量（非响应式）；或监听reactive对象的深层属性但未开启deep: true。
  • 解决：监听响应式数据（ref/reactive）；监听深层属性时，用箭头函数返回该属性（比如watch(() => obj.deep.color, (val) => { ... })）。

参考链接

avatar
文章
阅读
粉丝