vue3使用-watch监听总结

watch

watch(attr, (val1, val2) => {}, {
    deep: true, 
    immediate: true, 
    flush: 'post', 
    once: true, 
    onTrack / onTrigger
})

attr: 基本类型可以直接监听，引用类型需要用函数返回监听(不能直接侦听响应式对象的属性值)，可以监听多个

(newVal1, oldVal) => {}: newVal1是改变后新的值, oldVal是改变前旧的值

{deep: true, immediate: true, flush: 'post'}：deep是深度监听；immediate创建实例后立即执侦听器；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；onTrack / onTrigger：调试侦听器的依赖关系;once:true,当 attr 变化时，仅触发一次

监听单个值或多个值

监听单个值

示例1：

<template>
  <div>
    <h2>watch监听-基本数据</h2>
    <div :style="{color: nowColor}">字体颜色+count{{ count }}</div>
    <el-button @click="handleAdd">改变</el-button>
  </div>
</template>
​
<script setup>
import { watch } from 'vue';
const colors = ['#FF66FF', '#FF0033', '#66CCCC', '#990066', '#00CC00']
​
const count = ref(0)
const nowColor = ref(colors[count.value])
// 后端返回的数据
watch(count, (newVal, oldVal) => {
  if(newVal !== oldVal) {
    console.log(newVal, oldVal);
    nowColor.value = colors[count.value]
  }
})
function handleAdd() {
  if (count.value < colors.length - 1) {
    count.value += 1
  }
}
</script>

示例2：监听对象下某个值的变动

<script setup>
import {ref, watch, reactive } from 'vue'
const data = reactive({
  updateTitle: '测试改变'
})
const user =  ref({
    name: '张三',
    age: 28
})
// watch(user.value.age, (newVal, val) => {}) 这样监听没用,因为监听的是引用类型
// watch(user.value, (newVal, val) => {}) 这样监听也没用,因为监听的是引用类型
watch(() => user.value.age, (newVal, val) => {
  console.log(newVal, val);
  if (newVal !== val) {
    data.updateTitle = '哈哈'
  }
}, {
  deep: true
})
</script>

监听多个值

示例1：多个值进行累加，有个值变了就调用

<template>
  <div>
    <h2>watch监听-基本数据</h2>
    <div :style="{color: nowColor}">字体颜色+count{{ count }}</div>
    <el-button @click="handleAdd">改变</el-button>
  </div>
</template>
​
<script setup>
const colors = ['#FF66FF', '#FF0033', '#66CCCC', '#990066', '#00CC00']
​
const count = ref(0)
const num = ref(2)
const nowColor = ref(colors[count.value])
// 后端返回的数据
watch(() => count.value + num.value, (newVal, oldVal) => {
  console.log('newVal', newVal);
  if(newVal > colors.length) {
    nowColor.value = colors[colors.length - 1]
  }
})
function handleAdd() {
  count.value += 1
}
</script>

基本数据类型-监听多个值：对某个值进行判断

<script setup>
// newN对应的是num, newC对应的是count
watch([num, count], ([newN, newC]) => {
  console.log('newVal', newC);
  if(newC > colors.length) {
    nowColor.value = colors[colors.length - 1]
  }
})
</script>

示例2

<template>
  <div>
    <h2>watch绑定数组或对象并多个值</h2>
    输入姓名：<input type="text" v-model="queryParams.name" />
    <hr />
    输入每页条数：
    <input type="text" v-model="queryParams.size" />
  </div>
</template>
​
<script setup>
import { reactive, watch } from 'vue'
const queryParams = reactive({
  name: 'zhangsan',
  size: 10,
  page: 1
})
// 实现只要改变name和size，则执行回调
watch(
  () => [queryParams.name, queryParams.size],
  ([val, val2]) => {
    console.log('姓名是:', val, '每页条数是:', val2)
  }
)
</script>

监听整个对象或数组的变化

监听对象

实现监听整个对象之使用reactive，只要对象下某个值变动就请求

<template>
  <div>
    <h2>watch绑定数组或对象并多个值</h2>
    输入姓名：<input type="text" v-model="queryParams.name" />
    <hr />
    输入每页条数：
    <input type="text" v-model="queryParams.size" />
  </div>
</template>
​
<script setup>
import { reactive, watch } from 'vue'
const queryParams = reactive({
  name: 'zhangsan',
  size: 10,
  page: 1
})
// 这样监听不了整个对象的变化，也不能监听到具体的值
// watch(() => queryParams,(val) => {console.log('发生数据变化了:', val)})
// // watch([() => queryParams],(val) => {console.log('发生数据变化了:', val)})
​
// 实现监听对象下的数值变化就请求接口，监听单个对象
watch(queryParams, (val) => {
  console.log('发生数据变化了:', val)
})
// or 或者下面这样,如果要监听多个对象，就使用下面这种，在数组里面添加一个需要监听的参数
/* watch([queryParams], (val) => {
  console.log('发生数据变化了:', val)
})*/
</script>

换成ref只要watch加个.value

<script>
import { ref, watch } from 'vue'
const queryParams = ref({
  name: 'zhangsan',
  size: 10,
  page: 1
})
watch(queryParams.value, (val) => {
  console.log('发生数据变化了:', val)
})
</script>

监听数组

ref监听数组的方式-示例

<template>
  <div>
    <h2>watch绑定数组或对象并多个值</h2>
    <div>数组长度是：{{ resultLength }}</div>
  </div>
</template>
​
<script setup>
import { onMounted, ref, watch } from 'vue'
const resultData = ref([])
// 数组长度
const resultLength = ref(0)
​
onMounted(() => {
  resultData.value = [1, 2, 3, 4, 5]
})
// 下面是两种监听方式
watch(
  () => resultData.value,
  (val) => {
    resultLength.value = val.length
  }
)
// 这样监听不需要.value,打印.value就会失去作用
watch(resultData, (val) => {
  console.log('发生数据变化了:', val)
})
</script>

reactive监听数组的方式-示例

<template>
  <div>
    <h2>watch绑定数组或对象并多个值</h2>
    <div>数组长度是：{{ resultLength }}</div>
  </div>
</template>
​
<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
const data = reactive({
  resultData: []
})
// 数组长度
const resultLength = ref(0)
​
onMounted(() => {
  data.resultData = [1, 2, 3, 4, 5]
})
// 下面是两种监听方式
watch(
  () => data.resultData,
  (val) => {
    resultLength.value = val.length
  }
)
watch([() => data.resultData], (val) => {
  console.log('发生数据变化了:', val)
})
​
// 这样监听不起作用
watch(data.resultData,(val) => {console.log('发生数据变化了:', val)})
watch([data.resultData],(val) => {console.log('发生数据变化了:', val)})
</script>

监听函数的变化

<template>
  <div>
    <input type="number" v-model="count" />
    <p>是否为偶数？{{ isEven() }}</p>
    <div>count2: {{ count2 }}</div>
    <button @click="count2++">+1</button>
  </div>
</template>
​
<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
const count2 = ref(0)
​
// 注意这个函数本身，是每次重新渲染的时候都会重新执行的
function isEven() {
  console.log('isEvent 函数被重新执行了')
  if (count2.value === 5) {
    return 'this is a test'
  }
  return count.value % 2 === 0
}
// 设置侦听器
// 这里侦听的是函数的返回值结果
// 如果函数返回值发生变化，就会触发侦听器回调函数
watch(isEven, () => {
  console.log('触发了侦听器回调函数')
})
</script>
​
<style scoped></style>

监听计算属性的变化

<template>
  <div>
    <input type="text" v-model="firstName" placeholder="first name" />
    <input type="text" v-model="lastName" placeholder="last name" />
    <p>全名：{{ fullName }}</p>
  </div>
</template>
​
<script setup>
import { ref, computed, watch } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed(() => `${firstName.value} ${lastName.value}`)
​
// 设置侦听器
watch(fullName, (newVal, oldVal) => {
  console.log(`new: ${newVal}, old: ${oldVal}`)
})
</script>
​
<style scoped></style>

watchEffect

不需要再指定需要依赖的值，会自动追踪依赖的值

flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'

flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发

<template>
  <div>
    <h2>wwatchEffect监听</h2>
    <div :style="{color: nowColor}">字体颜色+count{{ count }}</div>
    <el-button @click="handleAdd">改变</el-button>
  </div>
</template>
​
<script setup>
​
const colors = ['#FF66FF', '#FF0033', '#66CCCC', '#990066', '#00CC00']
​
const count = ref(0)
const nowColor = ref(colors[count.value])
watchEffect(() => {
  if(count.value < colors.length) {
    nowColor.value = colors[count.value]
  }
}, {
    flush: 'post'
})
​
function handleAdd() {
  count.value += 1
}
</script>

watchPostEffect

watchEffect()使用 flush: 'post' 选项时的别名。

watchSyncEffect

watchEffect() 使用 flush: 'sync' 选项时的别名。