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>

 监视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>

 监视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>

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

上方代码, 设置了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>

可以看出代码中所书写的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>

 

  • 5
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中的`watch`与Vue2中的`watch`有一些重要的变化。在Vue3中,`watch`仍然允许我们监视响应式数据的变化,并对变化做出相应的操作。不过,Vue3引入了一个新的API——`watchEffect`来取代Vue2中的`watch`。 在Vue3中,`watch`可以通过以下几种方式使用: 1. **基础用法**:可以使用`watch`方法来监视一个响应式数据的变化,并在变化发生时执行回调函数。示例如下: ```javascript import { watch } from 'vue'; watch(() => { // 监视的响应式数据 return state.value; }, (newVal, oldVal) => { // 响应式数据发生变化时执行的回调函数 console.log(`new value: ${newVal}, old value: ${oldVal}`); }); ``` 2. **立即执行**:可以通过在`watch`选项中设置`immediate`为`true`,使得监听函数会在初始创建时立即执行一次。示例如下: ```javascript watch(() => { // 监视的响应式数据 return state.value; }, (newVal, oldVal) => { // 响应式数据发生变化时执行的回调函数 console.log(`new value: ${newVal}, old value: ${oldVal}`); }, { immediate: true }); ``` 3. **深度监听**:可以通过设置`deep`为`true`来进行深度监听,以便检测对象内部值的变化。示例如下: ```javascript watch(() => { // 监视的响应式数据 return state.obj; }, (newVal, oldVal) => { // 响应式数据发生变化时执行的回调函数 console.log(`new value: ${newVal}, old value: ${oldVal}`); }, { deep: true }); ``` 此外,Vue3还引入了`watchEffect`,它可以轻松地监视响应式数据的变化,并在其变化时执行回调函数。与`watch`不同的是,`watchEffect`不需要显式指定要监视的数据,它会自动追踪代码中使用的响应式数据,并在其变化时触发。示例如下: ```javascript import { watchEffect } from 'vue'; watchEffect(() => { // 使用到的响应式数据 console.log(state.value); }); ``` 需要注意的是,在Vue3中,`watch`和`watchEffect`都是基于副作用函数实现的,所以它们可以在组件渲染期间多次执行。 以上是Vue3中`watch`和`watchEffect`的详细说明,希望能对你有所帮助!如有其他问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值