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

相关推荐
腾讯TNTWeb前端团队35 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试