vue实现不同状态

Vue 实现不同状态的方法

使用计算属性（Computed Properties）

计算属性适合处理依赖其他状态变化的派生状态。计算属性会缓存结果，只在依赖变化时重新计算。

data() {
  return {
    count: 0
  }
},
computed: {
  status() {
    return this.count > 5 ? 'High' : 'Low'
  }
}

使用方法（Methods）

方法适合处理需要参数或需要主动触发的状态变更。每次调用都会重新执行。

methods: {
  getStatus(count) {
    return count > 5 ? 'High' : 'Low'
  }
}

使用侦听器（Watchers）

侦听器适合在状态变化时执行异步操作或复杂逻辑。

watch: {
  count(newVal, oldVal) {
    if (newVal > 5) {
      this.status = 'High'
    } else {
      this.status = 'Low'
    }
  }
}

使用 Vuex 管理全局状态

对于跨组件共享的状态，可以使用 Vuex 进行集中管理。

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    status: state => {
      return state.count > 5 ? 'High' : 'Low'
    }
  }
})

使用组件 Props 传递状态

父组件可以通过 props 将状态传递给子组件。

// Parent component
<ChildComponent :count="count" />

// Child component
props: ['count'],
computed: {
  status() {
    return this.count > 5 ? 'High' : 'Low'
  }
}

使用动态类名绑定

根据状态动态改变样式类。

<div :class="{ 'active': isActive, 'error': hasError }"></div>

使用条件渲染

根据状态显示不同的内容。

<div v-if="status === 'High'">High Count</div>
<div v-else>Low Count</div>

使用过滤器（Filters）

对状态进行格式化显示。

filters: {
  statusFormat(value) {
    return value > 5 ? 'High' : 'Low'
  }
}

使用组合式 API（Vue 3）

在 Vue 3 中可以使用组合式 API 更灵活地管理状态。

import { ref, computed } from 'vue'

setup() {
  const count = ref(0)
  const status = computed(() => count.value > 5 ? 'High' : 'Low')

  return {
    count,
    status
  }
}