首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3使用ref监听复杂类型

vue3使用ref监听复杂类型过程

2025-10-28 16:18:41 作者：icpink_

文章主要介绍了如何使用Vue的watch函数监听由ref创建的响应式数据,特别是针对引用数据类型,通过定义数据、监听变化并使用方法改值,可以在控制台查看监听效果,文章还提到了在watch中使用{deep:true}和immediate:true选项,以实现深度监听和初始化时立即触发监听器

vue3使用ref监听复杂类型

1.使用watch监听

基于 ref 创建的响应式数据 (引用数据类型)。

import { ref, watch } from "vue";

2.定义数据，监听

const person = ref({ name: '张三' });
watch(
  person,
  (newVal) => {
    console.log('监听到数据111:', newVal)
    console.log('监听到数据222:', newVal.name)
  },
  { deep:true }
)

3.使用一个方法改值

然后在控制台查看

const submitForm =  () => {
  person.value.name +='1'
}

4.ref定义的一个对象

监听它的一个属性

const person2 = ref({ name: '张三' });
watch(
  () => person2.value.name,
  (newv) => {
    console.log(newv);
    //其中的newv就是最新值
    //可以在这里做些什么
  },
  { deep: true }
)

由此我们可以得出结论，我们操作数据的时候，尽管是ref定义的，但是并不用.value去读改它。

还可以在 { deep: true}平级，加上immediate: true 页面初始化的时候就监听。

 { deep: true, immediate: true }

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。