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 }总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了VUE+Element环境搭建与安装的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要为大家详细介绍了vue实现文件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要为大家介绍了vue3基础组件开发-detePicker（日期选择组件）示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
网页截图与截屏功能在许多Web应用程序中都非常有用,Vue.js作为一个流行的JavaScript框架,提供了许多工具和库来简化网页截图和截屏的实现,本文将介绍如何使用Vue来实现一个网页截图和截屏功能的示例,包括使用html2canvas库和vue-cropper库,需要的朋友可以参考下2023-10-10
下面小编就为大家带来一篇基于Vue实例对象的数据选项。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Vue是目前使用较广泛的三大前端框架之一，其数据驱动及组件化的特性使得前端开发更为快捷便利。本文在LeanCloud 短信轰炸与图形校验码官方文档 基础上，从封装需要出发开发一个简单的短信图形验证Vue组件,具体内容详情大家参考下本文2017-11-11
这篇文章主要介绍了vue elementui上传图片限制格式、大小和尺寸方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了Vue.js第四天的学习笔记，一个简单的组件示例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了详解基于Vue cli开发修改外部组件Vant默认样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了前端vue打包项目，如何解决跨域问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
最新评论