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 变化时，仅触发一次

基本数据类型-监听

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

多个值进行累加，有个值变了就调用

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

引用数据类型-函数监听

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

引用数据类型-监听多个值

<template>
  <div>
    <h2>watch监听-函数</h2>
    <div>二级标题： {{ data.updateTitle }}</div>
    <div class="active">个人信息</div>
    <div>
      <span>姓名：{{ user.name }}</span>
      <span>年龄：{{ user.age }}</span>
    </div>
    <div>
      <el-button @click="updateUser">更新用户信息</el-button>
    </div>
  </div>
</template>
​
<script setup>
import {ref, watch, reactive } from 'vue'
const data = reactive({
  updateTitle: '测试改变'
})
const user =  ref({
    name: '张三',
    age: 28
})
watch(() => [user.value.age, user.value.age], (newVal, val) => {
  let i = 0
  // 判断里面的值是否相等，相等就不更新
  newVal.forEach((it, index) => {
    if(it === val[index]) {
      ++i
    }
  })
  console.log('===', i);
  if (i === 0) {
    data.updateTitle = '哈哈'
  }
}, {
  deep: true
})
function updateUser() {
  user.value.age = 10
  // user.value.name = '李四'
}
</script>
​
<style lang="scss" scoped>
.active{
  color: red;
}
.info {
  margin-bottom: 10px;
}
.info span {
  margin-right: 10px;
}
</style>