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)=>{})

相关推荐
fruge15 分钟前
前端工程化流程搭建与配置优化指南
前端
Aress"29 分钟前
uniapp设置vuex公共值状态管理
javascript·vue.js·uni-app
东芃939433 分钟前
uniapp上传blob对象到后台
前端·javascript·uni-app
coding随想1 小时前
救命!网页还在偷偷耗电?浏览器Battery API事件教你精准控电,这5个场景用了都说香
前端
贝西奇谈1 小时前
JavaScript DOM节点操作详解
开发语言·javascript·php
IT_陈寒1 小时前
Redis性能翻倍的5个冷门优化技巧,90%的开发者都不知道第3个!
前端·人工智能·后端
华仔啊2 小时前
无需UI库!50行CSS打造丝滑弹性动效导航栏,拿来即用
前端·css
光影34152 小时前
专利撰写与申请核心要点简报
前端·数据库·php
ze_juejin2 小时前
Angular 中设置宿主元素(Host)样式的方法
前端
用户90443816324602 小时前
《零代码基础也能 AI 创作?GPT+DALL・E 实战教程,10 分钟上手》
前端·github