vue3 watch 监听响应式数据变化

发布时间：2023-05-15 文章分类：WEB开发, 电脑百科投稿人：李佳字号：默认 | 大 | 超大打印

主要是用来监听ref 或者reactive 所包裹的数据才可以被监听到

<template>
  <input type="text" v-model="message">
</template>
<script setup lang="ts">
import {ref, watch} from "vue";
let message = ref<string>("小满")
watch(message, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})
</script>

也可以同时监听两个数据源

<template>
  <input type="text" v-model="message">
  <input type="text" v-model="message2">
</template>
<script setup lang="ts">
import {ref, watch} from "vue";
let message = ref<string>("小满")
let message2 = ref<string>("大满")
watch([message, message2], (newVal, oldVal) => {
  console.log(newVal, oldVal)
})
</script>

ref监听对象需要开启一个属性 deep: true

<template>
  <input type="text" v-model="message.foo.bar.name">
</template>
<script setup lang="ts">
import {ref, watch} from "vue";
let message = ref({
  foo: {
    bar: {
      name: "小满"
    }
  }
})
watch(message, (newVal, oldVal) => {
  console.log(newVal, oldVal)
}, {
  deep: true
})
</script>

但是新的数值和旧的数值会是一样的，

把ref换成 reactive 则无须deep:true，或者开启关闭都是一样的

<template>
  <input type="text" v-model="message.foo.bar.name">
</template>
<script setup lang="ts">
import {reactive, ref, watch} from "vue";
let message = reactive({
  foo: {
    bar: {
      name: "小满"
    }
  }
})
watch(message, (newVal, oldVal) => {
  console.log(newVal, oldVal)
}, )
</script>

新的数值和旧的数值也会是一样的

多个数值也是可以监听的到的

如果想针对单一属性name也是支持的。

<template>
  <input type="text" v-model="message.foo.bar.name">
</template>
<script setup lang="ts">
import {reactive, ref, watch} from "vue";
let message = reactive({
  foo: {
    bar: {
      name: "小满",
      age:18
    }
  }
})
watch(()=>message.foo.bar.name, (newVal, oldVal) => {
  console.log(newVal, oldVal)
}, )
</script>

immediate: true 默认开启监听回调

开启后在没有输入内容的时候会自动回调一次

Flush 三种模式 pre //

{
  immediate: true,
  flush: "pre"  //组件更新之前调用 sync，同步执行，post 组件更新之后执行
}

标签 watch, 响应式, 数据