Vue3的侦听器

• 需要引入才能使用

• 分好几种情况，下面以此介绍

1. 监听ref()定义的单个响应式数据 watch(要监听的，callback，{配置项})

<template>
  <div class="App">
    <p>pdd --- {{ num }}</p>
    <button @click="lessen">砍一刀</button>
  </div>
</template>
​
<script>
import { ref, watch } from 'vue'
​
export default {
  name: 'App',
  setup() {
    const num = ref(100)
    function lessen() {
      num.value--
    }
    // 侦听器
    watch(num, (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })
    return { num, lessen }
  },
}
</script>

1. 监听ref()定义的多个响应式数据 watch([要监听的]，callback，{配置项})

<template>
  <div class="App">
    <p>pdd --- {{ num }}</p>
    <button @click="lessen">砍一刀</button>
    <hr />
    <p>信息 --- {{ msg }}</p>
    <button @click="changeMsg">修改信息</button>
  </div>
</template>
​
<script>
import { ref, watch } from 'vue'
​
export default {
  name: 'App',
  setup() {
    const num = ref(100)
    const msg = ref('内容...')
    function lessen() {
      num.value--
    }
    function changeMsg() {
      msg.value += '!'
    }
    // 侦听器
    watch([num, msg], (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })
    return { num, lessen, msg, changeMsg }
  },
}
</script>

1. 监听reactive()定义的单个响应式数据中的全部数据 watch(要监听的，callback，{配置项})

• reactive()声明的响应式数据，侦听的话会强制开启deep深度监听，是关不掉的，deep无效

• 但是有一个问题，侦听到的值，不管是新值还是旧值，都会显示新值，无法显示旧值(要解决，只能把需要旧值的属性放外面，用ref()声明)

<template>
  <div class="App">
    <p>{{ person.uname }} --- {{ person.age }}</p>
    <button @click="changeName">改变名字</button>
    <button @click="changeAge">改变年龄</button>
  </div>
</template>
​
<script>
import { reactive, watch } from 'vue'
​
export default {
  name: 'App',
  setup() {
    const person = reactive({
      uname: 'cxk',
      age: 30,
    })
    function changeName() {
      person.uname += 'yyds'
    }
    function changeAge() {
      person.age++
    }
    // 侦听器
    watch(person, (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })
    return { person, changeName, changeAge }
  },
}
</script>

1. 监听reactive()定义的单个响应式的数据中的某个属性 watch(() => 要监听的，callback，{配置项})

<template>
  <div class="App">
    <p>{{ person.uname }} --- {{ person.age }}</p>
    <button @click="changeName">改变名字</button>
    <button @click="changeAge">改变年龄</button>
  </div>
</template>
​
<script>
import { reactive, watch } from 'vue'
​
export default {
  name: 'App',
  setup() {
    const person = reactive({
      uname: 'cxk',
      age: 30,
    })
    function changeName() {
      person.uname += 'yyds'
    }
    function changeAge() {
      person.age++
    }
    // 侦听器
    watch(
      () => person.age,
      (newVal, oldVal) => {
        console.log(newVal, oldVal)
      }
    )
    return { person, changeName, changeAge }
  },
}
</script>

1. 监听reactive()定义的单个响应式的数据中的某些属性 watch([() => 要监听的某个属性,() => 要监听的某个属性]，callback，{配置项})

<template>
  <div class="App">
    <p>{{ person.uname }} --- {{ person.age }}</p>
    <button @click="changeName">改变名字</button>
    <button @click="changeAge">改变年龄</button>
  </div>
</template>
​
<script>
import { reactive, watch } from 'vue'
​
export default {
  name: 'App',
  setup() {
    const person = reactive({
      uname: 'cxk',
      age: 30,
    })
    function changeName() {
      person.uname += 'yyds'
    }
    function changeAge() {
      person.age++
    }
    // 侦听器
    watch([() => person.age, () => person.uname], (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })
    return { person, changeName, changeAge }
  },
}
</script>

特殊情况

1. 监听reactive()定义的单个响应式的数据中的某个属性是复杂数据类型时，又需要开深度侦听 watch(() => 要监听的，callback，{配置项})

• 只要是侦听reactive()定义的单个响应式的数据，都会丢失旧值

<template>
  <div class="App">
    <p>{{ person.skill.sing }} --- {{ person.skill.dance }}</p>
    <button @click="changeSing">改变唱</button>
    <button @click="changeDance">改变跳</button>
  </div>
</template>
​
<script>
import { reactive, watch } from 'vue'
​
export default {
  name: 'App',
  setup() {
    const person = reactive({
      uname: 'cxk',
      age: 30,
      skill: {
        sing: '唱',
        dance: '跳',
      },
    })
    function changeSing() {
      person.skill.sing = '喂喂喂'
    }
    function changeDance() {
      person.skill.dance = '你干嘛，哎呦'
    }
    // 侦听器
    watch(
      () => person.skill,
      (newVal, oldVal) => {
        console.log(newVal, oldVal)
      },
      { deep: true }
    )
    return { person, changeSing, changeDance }
  },
}
</script>

总结：

• 监听简单数据类型和复杂数据类型中的某个属性的时候，可以拿到新值，旧值

• 监听复杂数据类型的时候，拿不到旧值

watchEffect() 函数

• 也可以进行数据侦听，需要引入使用

watchEffect(() => { // 需要监听那个，就在里面写入那个 }

<template>
  <div class="App">
    <p>{{ person.skill.sing }} --- {{ person.uname }}</p>
    <button @click="changeSing">改变唱</button>
    <button @click="changeUname">改变名字</button>
  </div>
</template>
​
<script>
import { reactive, watchEffect } from 'vue'
​
export default {
  name: 'App',
  setup() {
    const person = reactive({
      uname: 'cxk',
      age: 30,
      skill: {
        sing: '唱',
        dance: '跳',
      },
    })
    function changeUname() {
      person.uname = '坤坤'
    }
    function changeSing() {
      person.skill.sing = '喂喂喂'
    }
    // watchEffect() 进行侦听
    watchEffect(() => {
      // 需要侦听那个，就在里面写入那个
      let name = person.uname
      let sing = person.skill.sing
      console.log('watchEffect()执行了', name, sing)
    })
    return { person, changeSing, changeUname }
  },
}
</script>