vue3 watch监听成绩单

在Vue3中，可以使用watch函数来监听成绩单的变化。假设成绩单是一个响应式对象，其中包含多个属性，可以使用watch函数来监听其中一个属性的变化，也可以监听整个对象的变化。具体实现可以参考以下代码：

<template>
  <div>
    <p>语文成绩：{{ score.chinese }}</p>
    <p>数学成绩：{{ score.math }}</p>
    <p>英语成绩：{{ score.english }}</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  setup() {
    const score = ref({
      chinese: 90,
      math: 85,
      english: 95
    })

    // 监听整个成绩单对象的变化
    watch(score, (newValue, oldValue) => {
      console.log('成绩单发生变化', newValue, oldValue)
    }, { deep: true })

    // 监听语文成绩的变化
    watch(() => score.value.chinese, (newValue, oldValue) => {
      console.log('语文成绩发生变化', newValue, oldValue)
    })

    return {
      score
    }
  }
}
</script>

<style>
</style>

在上述代码中，我们使用了watch函数来监听整个成绩单对象的变化，以及监听了语文成绩的变化。当成绩单对象的任意属性发生变化时，控制台会输出相应的信息。当语文成绩发生变化时，控制台也会输出相应的信息。