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

这篇具有很好参考价值的文章主要介绍了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

})

如下

反转案例

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

watch

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

watch侦听ref数据

ref简单数据类型

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

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

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

ref复杂数据类型

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

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

这种方法获取不到oldValue

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

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

1

使用

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

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

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

要手动开启deep:true

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

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

watch侦听reactive数据

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

获取不到旧值

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

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

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

可以获取到旧值

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

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

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

数组的形式监听多个属性

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

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

Web前端 ---- 【Vue3】computed计算属性和watch侦听属性(侦听被ref和reactive包裹的数据),vue,前端,vue.js,javascript文章来源地址https://www.toymoban.com/news/detail-799869.html

到了这里,关于Web前端 ---- 【Vue3】computed计算属性和watch侦听属性(侦听被ref和reactive包裹的数据)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3的computed计算属性和watch监视(四)

    监视【ref】定义的【基本数据】类型 监视【ref】定义的【对象类型】数据 监视【reactive】定义的【对象类型】数据  与 场景二 不同的是,newVal和oldVal是一样的,表明通过Object.assign重新赋值的时候,并不是生成一个新的对象,而是新的值覆盖了旧值 监视【ref】或者【reactiv

    2024年02月21日
    浏览(45)
  • vue3中,ref()、reactive()、computed()、watch() 和 watchEffect()的区别

    ref()、reactive()、computed()、watch() 和 watchEffect() 是 Vue 3 中常用的响应式处理函数,它们的主要区别如下: ref():ref() 函数用于将一个普通的 JavaScript 值转化为响应式对象。它返回一个具有 value 属性的对象,我们可以通过访问 value 属性来获取或修改值。当我们对 ref() 返回的对象

    2024年02月22日
    浏览(55)
  • Vue3前端开发,computed计算属性的基础练习

    Vue3前端开发,computed计算属性的基础练习! 在新版里面,和传统的vue2一样,计算属性,都是对一些数据运算进行了封装操作。返回结果是一个实时监控的效果。区别在于,写法不同。效果是一样。 下面给大家展示一个简单的案例。 如图,自定义一个组件,ComputedDemo.vue。里

    2024年01月18日
    浏览(50)
  • Vue3前端开发,watch数据侦听器的立即执行

    Vue3前端开发,watch数据侦听器的立即执行!实际上,我们可以通过回调函数的后面,再追加一个对象,来设置这个参数,immediate:true.来实现一种立即执行的效果。在页面记载完成后,马上就会执行一次watch. 如上所示,我们在回调函数的后面,追加了一个参数,是一个对象类型

    2024年01月18日
    浏览(51)
  • Vue3前端开发,watch侦听器的深度监听和精确监听

    Vue3前端开发,watch侦听器的深度监听和精确监听!今天和大家分享的内容是,关于watch的深度侦听和精确监听。 首先看一下,第一个案例,练习的是,深度监听的效果。默认是浅的侦听,是不会触发回调函数的。 如图,当我们点击按钮,修改num值的时候,触发了回调函数,在

    2024年01月23日
    浏览(45)
  • vue04---计算属性/监听(侦听)属性/Vue生命周期/组件介绍和使用/组件间通信/ref属性

    # 1 计算属性是基于它们的依赖变量进行缓存的 # 2 计算属性只有在它的相关依赖变量发生改变时才会重新求值,否则不会变(函数只要页面变化,就会重新运算) # 3 计算属性就像Python中的property,可以把方法/函数伪装成属性 # 4 计算属性,必须有返回值 基本使用 重写过滤案

    2024年02月08日
    浏览(64)
  • Vue-watch 侦听对象属性

    Vue 的 watch 侦听器格式有两种: 方法格式 和 对象格式 的侦听器。 方法格式的侦听器只能 监听简单数据类型 ,如: Number、String 、… 无法监听对象属性的变化,也不能在进入页面时,自动触发; 对象格式的侦听器可以监听 对象属性 的变化。在一定条件下,载入页面时,也

    2024年02月02日
    浏览(41)
  • 【Vue2从入门到精通】Vue监听器watch,计算属性computed,方法methods的区别及使用场景

    ✍创作者:全栈弄潮儿 🏡 个人主页: 全栈弄潮儿的个人主页 🏙️ 个人社区,欢迎你的加入:全栈弄潮儿的个人社区 📙 专栏地址:vue2从入门到精通 【分享几个国内免费可用的ChatGPT镜像】 【10几个类ChatGPT国内AI大模型】 【用《文心一言》1分钟写一篇博客简直yyds】 【用

    2023年04月15日
    浏览(49)
  • 【Vue3】computed 计算属性

    computed 是计算属性,它会根据响应式数据的变化⾃动计算出新的值,并缓存结果,只有在计算属性所依赖的响应式数据发⽣改变时才会重新计算。 computed 适⽤于需要根据响应式数据计算得出结果的场景,例如根据商品的数量和单价计算商品的总价,或者根据选中的过滤条件过

    2024年02月15日
    浏览(53)
  • Vue3/ Vue3 计算属性computed函数 语法 与 介绍 、Vue3 Vue2computed计算属性 能不能传参 怎么传参

    语法: // 第一种语法get方法 (没有set) const 函数名 = computed(() = {   return  }) // 第二种语法 get set 方法 带有set参数 可以设置 const 函数名 = computed(() = { get() { return 结果 }, set( val ){  } }) 触发场景:  如果要访问计算属性 会自动执行 get 如果要修改计算属性 会自动执行 set 简介

    2024年02月02日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包