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 提供更灵活的代码组织方式。
