vue页面实现响应式

Vue 页面实现响应式的方法

使用 Vue 的响应式数据

Vue 的核心特性之一是响应式数据绑定。通过 data 选项或 reactive API，Vue 会自动跟踪数据变化并更新 DOM。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    updateMessage() {
      this.message = '消息已更新'
    }
  }
}
</script>

使用计算属性

计算属性 (computed) 可以根据依赖的响应式数据动态计算值，并缓存结果以提高性能。

<template>
  <div>
    <p>原始数据: {{ count }}</p>
    <p>计算属性: {{ doubledCount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1
    }
  },
  computed: {
    doubledCount() {
      return this.count * 2
    }
  }
}
</script>

使用侦听器

侦听器 (watch) 可以监听数据变化并执行自定义逻辑，适合处理异步或复杂操作。

<template>
  <div>
    <input v-model="query" placeholder="搜索...">
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: ''
    }
  },
  watch: {
    query(newVal) {
      this.debouncedSearch(newVal)
    }
  },
  methods: {
    debouncedSearch(query) {
      // 实现防抖搜索逻辑
    }
  }
}
</script>

使用 Vue 3 的 Composition API

Vue 3 的 Composition API 提供了更灵活的响应式编程方式，尤其适合复杂组件逻辑。

<template>
  <div>
    <p>{{ state.message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      message: 'Hello Vue 3!'
    })

    const updateMessage = () => {
      state.message = '消息已更新'
    }

    return {
      state,
      updateMessage
    }
  }
}
</script>

响应式样式

通过绑定 class 或 style 实现动态样式变化。

<template>
  <div :class="{ active: isActive }">动态类名</div>
  <div :style="{ color: textColor }">动态样式</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      textColor: 'red'
    }
  }
}
</script>

响应式布局

结合 CSS 媒体查询和 Vue 的响应式数据实现自适应布局。

<template>
  <div :class="['container', { 'mobile-layout': isMobile }]">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMobile: window.innerWidth < 768
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.isMobile = window.innerWidth < 768
    }
  }
}
</script>

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

.mobile-layout {
  flex-direction: column;
}
</style>

使用响应式工具函数

Vue 提供了一些响应式工具函数，如 ref、toRefs 等，可以更灵活地处理响应式数据。

import { ref, toRefs } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const state = reactive({
      foo: 1,
      bar: 2
    })

    return {
      count,
      ...toRefs(state)
    }
  }
}