vue 实现关联属性

在 Vue 中实现关联属性可以通过计算属性、侦听器或组合式 API 的方式实现。以下是几种常见方法：

使用计算属性（Computed Properties）

计算属性适合基于现有属性动态生成关联值，且具有缓存机制：

data() {
  return {
    price: 100,
    quantity: 2
  }
},
computed: {
  total() {
    return this.price * this.quantity
  }
}

使用侦听器（Watchers）

当需要在属性变化时执行异步或复杂操作时，侦听器更合适：

data() {
  return {
    firstName: '',
    lastName: '',
    fullName: ''
  }
},
watch: {
  firstName(newVal) {
    this.fullName = newVal + ' ' + this.lastName
  },
  lastName(newVal) {
    this.fullName = this.firstName + ' ' + newVal
  }
}

组合式 API（Composition API）

在 Vue 3 中可以使用 ref 和 computed 实现更灵活的关联逻辑：

import { ref, computed } from 'vue'

setup() {
  const price = ref(100)
  const quantity = ref(2)
  const total = computed(() => price.value * quantity.value)

  return { price, quantity, total }
}

深度侦听对象属性

当需要侦听对象内部属性变化时，需启用深度侦听：

watch: {
  user: {
    handler(newVal) {
      console.log('用户信息变化', newVal)
    },
    deep: true
  }
}

使用 v-model 实现双向绑定

对于表单元素与数据的关联，可直接使用 v-model：

<input v-model="username">
<p>输入的值：{{ username }}</p>

选择哪种方式取决于具体场景：计算属性适合纯数据依赖，侦听器适合副作用操作，组合式 API 提供更灵活的代码组织方式。