监听器watch

最新推荐文章于 2024-12-12 16:53:44 发布

原创最新推荐文章于 2024-12-12 16:53:44 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

vue笔记专栏收录该内容

15 篇文章

订阅专栏

本文介绍了Vue中如何使用监听器监听响应式数据，包括ref和reactive的使用，如何监听对象属性，以及如何设置深层监听和立即监听。通过watch方法，可以在数据变化时执行相应操作，如打印新值或执行其他逻辑。同时，文章展示了在数据未改变时通过immediate参数实现初始化监听的情况。

监听器用于监听响应式数据。当响应式数据发生了改变可以进行相应的操作。

监听ref

下面代码作用：当每次num的值改变时就打印一下新的值

<template>
  <div id="d">
    num
    <button @click="num++">{{num}}</button>
  </div>
</template>

<script setup>
import {ref,reactive, watch} from 'vue'
const num=ref(0);
const obj=reactive({});

watch(num,(newX)=>{
  console.log('新的值为',newX);
})
</script>
<style></style>

监听reactive对象

不能直接监听响应式对象的属性值

const obj = reactive({ count: 0 })
// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

要用一个返回该属性的getter函数

// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  }
)

深层监听

当给watch传入一个响应式对象，会自动创建一个深层的监听器，对象内所有的属性发生改变都会触发回调函数。

<template>
  <div id="d">
    <button @click="obj.count++">{{obj.count}}</button>
    <!-- 数值发生改变也会触发 -->
  </div>
</template>

<script setup>
import {ref,reactive, watch} from 'vue'
const obj = reactive({ count: 0,name: '' })
watch(obj, (newValue,oldValue) => {
  console.log(newValue,oldValue)
})
obj.name='jack'; //名字发生改变会触发
</script>
<style></style>

obj里面的属性发生了改变都会触发watch监听器。

当obj.name改变时触发了watch，这时打印newValue和oldValue，这两个是一样的，他们都是obj对象。

其实我们也可以手动的把watch变为深层监听，加多一个deep

watch(value,()=>{
    
},{deep:true})

立即监听

上面监听器只有在数据发生改变时才会监听，但有时候我们希望在一开始就监听数据的变化，执行某些操作。这时可以加上immediate:true实现立即监听，即页面一被渲染就开始监听。

<template>
  <div id="d">
    <button @click="obj.count++">{{obj.count}}</button>
  </div>
</template>

<script setup>
import {ref,reactive, watch} from 'vue'
const obj = reactive({ count: 0,name: '' })
watch(obj, (newValue,oldValue) => {
  console.log(newValue,oldValue)
},{immediate:true}) //立即监听
</script>
<style></style>

现在我没有改变数据，但是页面渲染完后就实现了监听。

newValue为obj对象，oldValue是undefined.

}) //立即监听


现在我没有改变数据，但是页面渲染完后就实现了监听。

newValue为obj对象，oldValue是undefined.

![](https://img-blog.csdnimg.cn/img_convert/0d91b9a52d62553e49cd475764dcd44c.png)