vue3监听ref对象属性变化

Vue 3 中监听 ref 对象属性的变化
在 Vue 3 中，可以通过多种方式来监听由 ref 创建的对象其内部属性的变化。一种常见的方式是利用箭头函数返回目标属性，并将其作为第一个参数传递给 watch 函数。
对于一个通过 ref 定义的对象来说，当想要监听这个对象里的具体某一项属性时，可以这样做：
import { ref, watch } from 'vue';

const person2 = ref({
name: '张三'
});

// 监听person2对象下的name属性变化
watch(
() => person2.value.name,
(newv) => {
console.log(newv); // 输出最新的name值
},
{ deep: true }
);
登录后复制
上述代码展示了如何设置对 person2 这个引用类型的变量下 name 字段改变事件的侦听器[^4]。每当 person2.value.name 发生变动时，回调函数就会被触发并打印新的名字。
值得注意的是，在这里设置了 {deep:true} 参数选项用于开启深层检测模式，尽管在这个例子中并不严格必要（因为直接监控到了最底层的数据），但在处理更复杂的嵌套结构时非常有用。

相关问题

vue3 通过ref监听宽度变化

在Vue 3中，可以使用ref来监听元素的宽度变化。通常可以通过ResizeObserver来实现这一功能。以下是一个简单的示例，展示如何在Vue 3中使用ref和ResizeObserver来监听元素宽度的变化。
首先，确保你已经安装了Vue 3。然后，可以按照以下步骤进行操作：

创建一个Vue组件。
在组件中定义一个ref来引用你想要监听的元素。
使用ResizeObserver来监听元素大小的变化。
在组件销毁时，移除监听器以避免内存泄漏。

以下是一个示例代码：
<template>
<div ref="resizeElement" class="resize-element">
宽度: {{ width }}px
</div>
</template>

<script>
import { ref, onMounted, onUnmounted, watch } from 'vue';

export default {
setup() {
const resizeElement = ref(null);
const width = ref(0);

const handleResize = () => {
if (resizeElement.value) {
width.value = resizeElement.value.clientWidth;
}
};

let resizeObserver;

onMounted(() => {
resizeObserver = new ResizeObserver(() => {
handleResize();
});
if (resizeElement.value) {
resizeObserver.observe(resizeElement.value);
}
});

onUnmounted(() => {
if (resizeObserver &amp;&amp; resizeElement.value) {
resizeObserver.unobserve(resizeElement.value);
}
});

watch(width, (newWidth, oldWidth) => {
console.log(`宽度变化: ${oldWidth}px -> ${newWidth}px`);
});

return {
resizeElement,
width
};
}
};
</script>

<style scoped>
.resize-element {
width: 100%;
height: 100px;
background-color: lightblue;
}
</style>
登录后复制
在这个示例中，我们使用了ref来引用一个div元素，并通过ResizeObserver来监听其宽度的变化。当宽度变化时，width的值会被更新，并在控制台中打印出变化的信息。

vue3监听数组对象

在 Vue.js 3 中，如果你想监听数组对象的变化，可以使用 watch API 或者更推荐的 reactive 和 ref 结合 track 钩子。reactive 可以将数据包裹成响应式对象，而 track 可以让你跟踪对数组深层结构的修改。

使用 watch 监听数组变化：

import { watch } from 'vue';

data() {
return {
arr: [{ key: 'value' }]
}
}

watch('arr', (newVal, oldVal) => {
console.log('数组对象已更改:', newVal);
});
登录后复制

使用 ref 和 track：

import { ref, onTrack } from 'vue';

const arrRef = ref([{ key: 'value' }]);
onTrack(arrRef.value, (changes) => {
changes.forEach((change) => {
console.log('数组对象已更改:', change);
});
});
登录后复制
当数组内的对象添加、删除或更新时，上述函数会捕获到这些变化。