Vue.js中如何避免监听属性互相触发更新？

你的问题根源在于两个watch互相触发更新：修改width会触发其watch回调修改height，而height的变化又会触发它的watch回调修改width，形成循环，直到两次赋值后数值不再变化才停止。以下是几种可行的解决方法：

方法1：添加值相等判断，避免无意义赋值 #

在每个watch回调中，先判断计算后的目标值是否与当前值一致，只有不一致时才更新，直接打断循环：

const width = ref(0);
const height = ref(0);

watch(width, (newWidth) => {
    console.log(`width: ${width.value}->${newWidth}`);
    const targetHeight = newWidth / 2;
    if (targetHeight !== height.value) {
        height.value = targetHeight;
    }
});

watch(height, (newHeight) => {
    console.log(`height: ${height.value}->${newHeight}`);
    const targetWidth = newHeight * 2;
    if (targetWidth !== width.value) {
        width.value = targetWidth;
    }
});

当width更新后，若计算出的targetHeight和当前height一致，就不会触发height的watch，循环直接终止。

方法2：改用计算属性（推荐） #

因为width和height存在明确的依赖关系（width = 2 * height，height = width / 2），使用Vue的computed实现关联是更优雅的方案，computed会自动处理依赖追踪，天然避免循环更新：

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

const width = ref(0);
// 可写计算属性，双向关联width和height
const height = computed({
    get() {
        return width.value / 2;
    },
    set(val) {
        width.value = val * 2;
    }
});
</script>

<template>
    <div class="item">
        <div class="details">
            <h3>Width {{ width }}</h3>
            <input v-model="width" placeholder="0" />
        </div>
    </div>

    <div class="item">
        <div class="details">
            <h3>Height {{ height }}</h3>
            <input v-model="height" placeholder="0" />
        </div>
    </div>
</template>

这里用可写计算属性实现双向关联：既可以通过width自动计算height，也可以通过修改height反向更新width，代码简洁且完全规避循环问题。

方法3：使用标记位控制watch执行（不推荐，仅作参考） #

如果一定要保留watch写法，可以通过标记位避免同时执行两个回调：

const width = ref(0);
const height = ref(0);
let isUpdating = false;

watch(width, (newWidth) => {
    if (isUpdating) return;
    isUpdating = true;
    console.log(`width: ${width.value}->${newWidth}`);
    height.value = newWidth / 2;
    isUpdating = false;
});

watch(height, (newHeight) => {
    if (isUpdating) return;
    isUpdating = true;
    console.log(`height: ${height.value}->${newHeight}`);
    width.value = newHeight * 2;
    isUpdating = false;
});

通过isUpdating标记位确保同一时间只有一个watch回调在执行，从而打断循环，但这种方式代码冗余，不如前两种方案简洁高效。

内容的提问来源于stack exchange，提问作者kikulikov