Vue 3监视的属性不会更新

是指在Vue 3中，当使用watch或watchEffect来监视一个属性时，如果该属性的值发生变化，Vue不会自动更新相关的视图。

Vue 3引入了一个新的响应式系统，使用Proxy代替了Vue 2中的Object.defineProperty。这个新系统在性能和灵活性方面有所提升，但也导致了一些变化。

在Vue 3中，当我们使用watch或watchEffect来监视一个属性时，Vue会在初始渲染时执行一次回调函数，然后只有在属性的引用发生变化时才会再次执行回调函数。这意味着如果我们直接修改了属性的值，而不是修改引用，Vue不会触发更新。

为了解决这个问题，我们可以使用ref或reactive函数来包装属性。这样，当我们修改属性的值时，Vue会自动更新相关的视图。

例如，我们可以使用ref函数来包装属性：

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`count的值从${oldValue}变为${newValue}`);
});

count.value = 1; // 输出：count的值从0变为1

在上面的例子中，我们使用ref函数将count属性包装成一个响应式对象。当我们修改count.value的值时，Vue会自动更新相关的视图，并执行watch回调函数。

除了ref，我们还可以使用reactive函数来包装一个对象：

import { reactive, watch } from 'vue';

const user = reactive({
  name: 'Alice',
  age: 20
});

watch(() => user.name, (newValue, oldValue) => {
  console.log(`name的值从${oldValue}变为${newValue}`);
});

user.name = 'Bob'; // 输出：name的值从Alice变为Bob

在上面的例子中，我们使用reactive函数将user对象包装成一个响应式对象。当我们修改user.name的值时，Vue会自动更新相关的视图，并执行watch回调函数。

总结起来，Vue 3监视的属性不会更新是因为Vue 3使用了新的响应式系统，需要使用ref或reactive函数来包装属性，以便让Vue能够自动更新相关的视图。