vue3中的watch能够监听那些值?(总结)
时间:2021-09-20
本文章向大家介绍vue3中的watch能够监听那些值?(总结),主要包括vue3中的watch能够监听那些值?(总结)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
-
只能是vue响应式中的值(包括ref,reactive定义的值)
-
watch的使用场景:
-
可以监听ref定义的值,如果ref定义的值为一个基本类型的值
const name=ref<string>('tang') watch(name,()=>{}) const info=ref<{city:string,location:string}>={ city:'chongqing', location:"hechuan" } // 监听单一数据源例如:city watch(()=>info.value.city,(newCity,oldCity)=>{}) // 监听整个info对象,注意:这样的info.value其实是一个对象的引用地址,所以newInfo和oldInfo拿到的值是一样的 watch(info.value,(newInfo,oldInfo)=>{},[options]) // 通过单一数据源的getter函数的方式监听,这样newIfo,oldInfo得到的对象是正确的 watch(()=>({...info.value}),(newInfo,oldInfo)=>{},[options])
-
监听reactive创建的响应式对象
const info=reactive<{city:string,location:string}>({ city:'chongqing', location:'hechuan' }) // 监听整个info对象,注意这个同上面一样监听的其实是info的是响应式引用对象的地址,newInfo,oldInfo的是同一个对象打印的是一样的 watch(info,(newInfo,oldInfo)=>{}[,options]) // 改善:通过单一数据源的getter函数的形式去写 watch(()=>({...info}),(newInfo,oldInfo)=>{}[,options]) // 监听info对象的单一数据源,getter函数方式 watch(()=>info.city,(newCity,oldCity)=>{})
-
监听组件中的某个props中的动态属性
注意:为什么可以监听到props中的值呢?个人思考是因为组件在使用的通过props来传递参数时如果想到达实现动态传递参数时,一般都是通过ref跟reactive对象去定义的,所以在组件的内部同样可以通过监听ref,reactive的方式去监听prop的变化
props:{ name:{ type:String }, info:{ type:Object as propType<IInfo> } } setup(props){ // 如果监听的prop为本身就是一个基本类型的值,则只能通过单一数据源的方式监听不然编辑器会提示报错(vscode+volar) watch(()=>props.name,(newName,oldName)=>{}) // 监听的prop为对象形式,同样会存在监听的新值跟旧值是一样的,因为是同一个引用对象地址 watch(props.info,(newInfo,oldInfo)=>{}[,options]) // 改善建议写法: watch(()=props.info,(newInfo,oldInfo)=>{}[,options]) }
-
一次监听多个响应式的值
wacth([value1,value2],([newValue1,newValue2],[oldValue1,oldvalue2])=>{}[,options])
-
补充知识点:
-
ref定义的值是Ref的一个实例对象,所以ref创建出来的值本身才是响应式对象 ,对象value中保存的值是一个proxy代理对象,所以在通过watch去监听时直接将整个ref的对象当作整个监听的数据源传递进去。如果要监听ref的value对象,需要用到getter函数这个单一数据源的方式去监听,把value对象当成一个单一数据源去监听
const name=ref<string>('tang') watch(name,(newValue,oldValue)=>{}) watch(()=>name.value,(newValue,oldValue)=>{}) console.log(isProxy(name),isRef(name),isProxy(name.value)) // false,true,true
-
-
- reactive跟readonly创建的对象用是proxy对象,可以用isProxy去检测返回true
```javascript
const info=reactive({})
const obj=readonly({})
const readOnlyObj=readonly(info)
console.log(isProxy(info),isProxy(obj)) // true,true
console.log(isReadonly(readOnlyObj),isReactive(readOnlyObj)) //true,true
```
原文地址:https://www.cnblogs.com/comyan/p/15314232.html
- (1024程序员节快乐)阿里祭出大器,Java代码检查插件
- Java多线程神器:join使用及原理
- SpringCloud配置中心内容加密
- Spring Boot日志集成
- MongoDB系列7:MongoDB存储引擎
- MongoDB系列6:MongoDB索引的介绍
- 文本数据处理的终极指南-[NLP入门]
- 神经网络思想建立LR模型(DL公开课第二周答案)
- 如何用卷积神经网络从歌曲中提取纯人声?这里有教程+代码
- 排序算法对比、总结(Python代码)
- 记一道未能答出的算法面试题
- 关于numpy mean函数的axis参数
- 在Keras+TF环境中,用迁移学习和微调做专属图像识别系统
- Tensorflow的LRN是怎么做的
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法