vue3使用ref监听复杂类型过程
更新时间：2025年10月28日 16:18:40 作者：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 }总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue3组件的开发，上一篇文章我们价绍了Vue3（三）网站首页布局开发，今天继续上篇内容展开组件的开发,需要的朋友可以参考一下2021-11-11
我们在做列表查询的时候，会有很多查询项，如何实现超过n行查询项的时候自动折叠起来呢？本文给大家分享vue3实现搜索项超过n行就折叠的思路详解，感兴趣的朋友一起看看吧2022-06-06
Vue的Router是一个用于实现页面跳转和路由管理的插件,它可以帮助我们根据不同的URL请求加载不同的组件,以及实现前端路由功能,本文给大家介绍vue中的Router基本配置命令,感兴趣的朋友跟随小编一起看看吧2024-02-02
这篇文章主要为大家介绍了Vue之过滤器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助,希望能够给你带来帮助2021-11-11
这篇文章主要介绍了vue+springboot实现项目的CORS跨域请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
制作一个折线图用于显示当前24小时的数据，并且可以通过拖动折现图设置数据，接下来通过本文给大家分享vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置），感兴趣的朋友跟随一起学习吧2019-04-04
本篇文章主要介绍了vue中computed 和 watch的异同，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
本文总结了Vue项目生产环境性能优化的实战技巧,这些优化能显著提升Vue应用的速度、稳定性和资源效率,文章通过代码示例介绍的非常详细,需要的朋友可以参考下2025-08-08
这篇文章主要介绍了Vue $emit()不能触发父组件方法的原因及解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。本文给大家详细介绍了vue解决跨域路由冲突问题思路解析，需要的朋友参考下吧2017-11-11
最新评论