Vue3监视属性watch详解(附带详细代码与讲解!!!)

这篇具有很好参考价值的文章主要介绍了Vue3监视属性watch详解(附带详细代码与讲解!!!)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

watch()默认是懒侦听的,即仅在侦听源发生变化时才执行回调函数。

第一个参数是侦听器的。这个来源可以是以下几种:

  • 一个函数, 一个返回值
  • 一个ref
  • 一个响应式对象(reactive定义的)
  • ...或是由以上类型的值组成的数组

第二个参数是一个回调函数, 这个回调函数可接收三个参数: 新值(newValue)、旧值(oldValue)、以及一个副作用清理的回调函数

第三个参数是一个可选的参数是一个对象构成, 如:deep(深度监视)、immediate(创建时立即监听一次)等等...

监视ref所定义的一个响应式数据

<template>
  <div>
    <h2>{{name}}</h2>
    <button @click="name += '666'">修改姓名</button>
  </div>
</template>

<script>
import { reactive, ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
  export default {
    setup(){
      let name = ref('小明')

      watch(name,(newValue, oldValue)=>{
        console.log('修改了name',newValue,oldValue);
      })

      return {
        name
      }
    }
  }
</script>

vue3watch多个属性,vue.js,javascript,前端,前端框架

 监视ref定义多个响应式数据

定义多个响应式数据, 传递的第一个参数是用数组的形式多包裹

<template>
  <div>
    <h2>{{name}}</h2>
    <button @click="name += '666'">修改姓名</button>
    <h2>{{age}}</h2>
    <button @click="age++">增长年龄</button>
  </div>
</template>

<script>
import { reactive, ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
  export default {
    setup(){
      let name = ref('小明')
      let age = ref(18)

      watch([name,age],(newValue, oldValue)=>{
        console.log('修改了',newValue,oldValue);
      })

      return {
        name,
        age
      }
    }
  }
</script>

vue3watch多个属性,vue.js,javascript,前端,前端框架

 监视reactive所定义的一个响应式数据的全部属性

注意点:

  1. 用reactive数据无法正确的获取旧值(oldValue)
  2. 强制开启了深度监视(关闭deep属性无效!!!)
<template>
  <div>
    <h1>姓名:{{data.name}}</h1>
    <h1>年龄:{{data.age}}</h1>
    <h1>测试深度监视数值:{{data.school.s1.num}}</h1>
    <button @click="data.name += '~'">修改姓名</button>
    <button @click="data.age++">年龄增长</button>
    <button @click="data.school.s1.num++">测试深度监视数值</button>
  </div>
</template>

<script>
import { reactive, ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
  export default {
    setup(){
      let data = reactive({
        name:'张三',
        age:18,
        school:{
          s1:{
            num:666
          }
        }
      })

      watch(data,(newValue, oldValue)=>{
        console.log('修改了data',newValue,oldValue);
      },{deep:false})

      return {
        data
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

vue3watch多个属性,vue.js,javascript,前端,前端框架

 可以通过打印结果来看, 新值与旧值是一模一样的, 无法监视旧值(等官方后续的版本)

上方代码, 设置了deep属性为false, 但是打印出来结果依旧可以监视到, 所以deep属性是无效的

 监视reactive所定义的一个响应式数据的某个数据

在watch中参数1用.方式读取值的话, 会警告的, 操作也不可用, 而如何才能监视某个数据呢?

在参数1中, 需要配置一个函数的, 通过返回值来传递

<template>
  <div>
    <h1>姓名:{{data.name}}</h1>
    <h1>年龄:{{data.age}}</h1>
    <h1>测试深度监视数值:{{data.school.s1.num}}</h1>
    <button @click="data.name += '~'">修改姓名</button>
    <button @click="data.age++">年龄增长</button>
    <button @click="data.school.s1.num++">测试深度监视数值</button>
  </div>
</template>

<script>
import { reactive, ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
  export default {
    setup(){
      let data = reactive({
        name:'张三',
        age:18,
        school:{
          s1:{
            num:666
          }
        }
      })

      watch(()=>data.age,(newValue, oldValue)=>{
        console.log('修改了data中的年龄',newValue,oldValue);
      },{deep:false})

      return {
        data
      }
    }
  }
</script>

vue3watch多个属性,vue.js,javascript,前端,前端框架

可以看出代码中所书写的watch中参数1的返回值配置

 监视reactive所定义的一个响应式数据的某些数据

如果看了前面的监视ref定义多个响应式数据与监视reactive所定义的一个响应式数据的某个数据看明白了, 自己就可能知道怎么写了, 就是用一个数组包裹, 数组里面写多个函数来返回所响应的数据

<template>
  <div>
    <h1>姓名:{{data.name}}</h1>
    <h1>年龄:{{data.age}}</h1>
    <h1>测试深度监视数值:{{data.school.s1.num}}</h1>
    <button @click="data.name += '~'">修改姓名</button>
    <button @click="data.age++">年龄增长</button>
    <button @click="data.school.s1.num++">测试深度监视数值</button>
  </div>
</template>

<script>
import { reactive, ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
  export default {
    setup(){
      let data = reactive({
        name:'张三',
        age:18,
        school:{
          s1:{
            num:666
          }
        }
      })

      watch([()=>data.age,()=>data.name],(newValue, oldValue)=>{
        console.log('修改了data中的年龄',newValue,oldValue);
      },{deep:false})

      return {
        data
      }
    }
  }
</script>

vue3watch多个属性,vue.js,javascript,前端,前端框架

 文章来源地址https://www.toymoban.com/news/detail-673522.html

到了这里,关于Vue3监视属性watch详解(附带详细代码与讲解!!!)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Vue3 watch 监听对象数组中对象的特定属性

    在 Vue 3 中,可以使用 watch 函数来监听对象数组中对象的特定属性。可以通过在回调函数中遍历数组来检查对象的特定属性是否发生变化,并在变化发生时执行相应的操作。 例如,假设有一个名为 items 的对象数组,其中每个对象都有一个名为 checked 的布尔属性和一个名为 n

    2023年04月20日
    浏览(44)
  • Vue.js 中的 watch 属性详解

    在 Vue.js 中, watch 属性是一种非常重要的属性,它可以监听 Vue 实例中指定的数据变化,并在数据发生变化时执行相应的操作。本文将对 Vue.js 中的 watch 属性进行详细的介绍,并附上相关的代码示例。 在 Vue.js 中, watch 属性被定义为一个对象,它可以用来监听 Vue 实例中的数

    2024年02月07日
    浏览(44)
  • Vue3 计算属性和侦听器实战(computed、watch)——简易点餐页面

    这篇文章记录一下 Vue3 计算属性和侦听器 (computed、watch) 实战的内容,这篇文章我们在有计算属性和侦听器的基础上,我们来制作一个简易点餐页面,接下来我们一起来从零到一开始制作。 计算属性和侦听器相关文章推荐: 深入与浅谈 Vue 中计算属性和侦听器的区别和使用

    2024年02月09日
    浏览(99)
  • Web前端 ---- 【Vue3】computed计算属性和watch侦听属性(侦听被ref和reactive包裹的数据)

    目录 前言 computed watch watch侦听ref数据 ref简单数据类型 ref复杂数据类型 watch侦听reactive数据 本文介绍在vue3中的computed计算属性和watch侦听属性。介绍watch如何侦听被ref和reactive包裹的数据 在vue3中,计算属性computed也是组合式api,也就是说要先引入,再在setup中使用 语法 完整:

    2024年01月18日
    浏览(61)
  • 【vue2】计算属性(computed)与侦听器(watch)详解

    🥳博       主: 初映CY的前说(前端领域) 🌞个人信条: 想要变成得到,中间还有做到! 🤘本文核心: 计算属性与侦听属性的用法 目录( 文末有给大家准备好的Xmind思维导图 ) 一、计算属性computed ①默认get()方法,仅是获取值 ②不仅仅是获取值,还具有修改属性功能

    2024年01月16日
    浏览(52)
  • Vue-12、Vue监视属性

    1、介绍 Vue中的监视属性是通过watch选项来实现的。watch选项可以是一个对象,其中的每个属性都是要监视的属性名,而每个属性的值都是一个回调函数,用于处理这个属性的变化。 例如,假设有一个Vue实例的data对象中有一个属性message,我们想要监视这个属性的变化,可以通

    2024年01月25日
    浏览(43)
  • Vue核心基础3:计算属性和监视属性

    这边以姓名案例,来介绍计算属性 计算属性主要依靠它的返回值   这边以天气案例,来介绍监视属性  

    2024年02月20日
    浏览(36)
  • Vue--》计算属性与监视(侦听)属性的使用

    目录 计算属性(computed) 监视属性(watch) 监视的两种方法 immediate选项 深度监视/

    2024年02月02日
    浏览(39)
  • 【VUE前进之路】使用数据代理,计算属性与监视属性的妙用

    通过一个对象代理对另一个对象中属性的操作(读/写) 1.Vue中的数据代理:通过vm对象来代理data对象中属性的操作(读/写) 2.Vue中数据代理的好处:更加方便的操作data中的数据 3.基本原理:通过0bject . defineProperty( )把data对象中所有属性添加到vm上。为每一一个 添加到vm上的属性

    2024年02月02日
    浏览(35)
  • HTML第二章 “表格”详解 (附带详细代码与解释)!!!

    目录 1.表格的语法 2. 表格的可选标记 3. 表格的属性 4. 不规则的表格 5. 表格的大小  每日一句 table标签: 表示表格的开始和结束。表格的所有内容都需要写在这一对标签里 tr标签: 表示表格中的一行 td标签:要写在tr中,这一行中有几个单元格,就有几列 是真正放数据的地方

    2024年02月09日
    浏览(37)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包