Web前端 ---- 【Vue3】computed计算属性和watch侦听属性(侦听被ref和reactive包裹的数据)

目录

前言

computed

watch

watch侦听ref数据

ref简单数据类型

ref复杂数据类型

watch侦听reactive数据


前言

本文介绍在vue3中的computed计算属性和watch侦听属性。介绍watch如何侦听被ref和reactive包裹的数据

computed

在vue3中,计算属性computed也是组合式api,也就是说要先引入,再在setup中使用

语法

完整:

let 自定义 = computed({

get(){

return

},

set(val){

}

})

当不使用set时,

可以简写

let 自定义 = computed(()=>{

return

})

如下

反转案例

watch

watch侦听属性也是组合式api,所以也需要先引入然后再setup中使用

watch侦听ref数据

ref简单数据类型

watch(监听的属性,(newValue,oldValue)=>{})

ref复杂数据类型

watch(.value,(newValue,oldValue)=>{})

这篇文章可知,ref包裹复杂数据类型底层使用的是object.defineProperty+Proxy。.value代表的就是Proxy代理对象

这种方法获取不到oldValue

1

使用

watch(复杂数据对象,(newValue,oldValue)=>{})

这种方法是无法监听对象里面的内容的

因为直接监听复杂数据对象,默认deep是false的

要手动开启deep:true

watch(复杂数据对象,(newValue,oldValue)=>{},{deep:true})

watch侦听reactive数据

watch(复杂数据对象,(newValue,oldValue)=>{})

获取不到旧值

被reactive包裹的复杂数据类型可以直接监视复杂数据对象。但是,这种方法默认是开启了深度监视,是关不掉的。deep:false是无效的。所以,复杂对象里面任意数据发生改变都会被监视

watch(()=>复杂数据对象.要被监视的属性,(newValue,oldValue)=>{})

这样就可以监视单一的属性

可以获取到旧值

如下图,宽度增加是没有触发监听的,只有高度增加时才会触发监听。

数组的形式监听多个属性

watch([ ()=>复杂数据对象.要被监视的属性,()=>复杂数据对象.要被监视的属性],(newValue,oldValue)=>{})

相关推荐
IT_陈寒24 分钟前
Redis性能翻倍秘籍:10个99%开发者不知道的冷门配置优化技巧
前端·人工智能·后端
LinXunFeng39 分钟前
Flutter - Melos Pub workspaces 实践
前端·flutter·架构
艾小码42 分钟前
前端人必看!3个技巧让你彻底搞懂JS条件判断与循环
前端·javascript
灵感__idea8 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡9 小时前
CSS是什么?—— 网页的“化妆师”
前端·css
黑犬mo9 小时前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel9 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
大前端helloworld9 小时前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel9 小时前
🌿 一文看懂 Vue 3 的 watch 源码:从原理到流程
前端
繁依Fanyi10 小时前
让工具说话:我在 Inspira Board 里用 AI 把“能用、好用、可复用”落成了日常
前端