详细介绍Vue3中的监听属性的概念、使用方式以及一些常见的应用场景

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      message: 'Hello, Vue3!'
    })

    watch(() => state.message, (newVal, oldVal) => {
      console.log(`Message changed from "${oldVal}" to "${newVal}"`)
    })

    return {
      message: state.message
    }
  }
}
</script>

<template>
  <div>
    <p>{{ count }}</p>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    watch(
      () => state.count,
      (newVal, oldVal) => {
        console.log(`Count changed from "${oldVal}" to "${newVal}"`)
      },
      {
        immediate: true,
        deep: true
      }
    )

    return {
      count: state.count
    }
  }
}
</script>

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    watch(message, (newVal, oldVal) => {
      console.log(`Message changed from "${oldVal}" to "${newVal}"`)
    })

    return {
      message
    }
  }
}
</script>

<template>
  <div>
    <input v-model="userInfo.name" />
    <ul>
      <li v-for="task in tasks" :key="task.id">{{ task.name }}</li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    const userInfo = ref({ name: 'John Doe' })
    const tasks = ref([
      { id: 1, name: 'Task 1' },
      { id: 2, name: 'Task 2' },
      { id: 3, name: 'Task 3' }
    ])

    watch(
      userInfo,
      (newVal, oldVal) => {
        console.log('User info changed:', newVal, oldVal)
      },
      { deep: true }
    )

    watch(
      tasks,
      (newVal, oldVal) => {
        console.log('Tasks changed:', newVal, oldVal)
      },
      { deep: true }
    )

    return {
      userInfo,
      tasks
    }
  }
}
</script>

<template>
  <div>
    <input v-model="username" />
    <p v-if="isUsernameInvalid">Invalid username!</p>
  </div>
</template>

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

export default {
  setup() {
    const username = ref('')
    const isUsernameInvalid = ref(false)

    watch(username, (newVal) => {
      // Perform validation logic
      if (newVal.length < 4 || newVal.length > 16) {
        isUsernameInvalid.value = true
      } else {
        isUsernameInvalid.value = false
      }
    })

    return {
      username,
      isUsernameInvalid
    }
  }
}
</script>

<template>
  <div>
    <button @click="loadData">Load Data</button>
    <p v-for="item in data" :key="item.id">{{ item.name }}</p>
  </div>
</template>

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

export default {
  setup() {
    const data = ref([])

    const loadData = async () => {
      const response = await fetch('https://api.example.com/data')
      const result = await response.json()
      data.value= result
    }

    watch(data, () => {
      // Perform side effect on data change
      console.log('Data changed:', data.value)
    })

    return {
      data,
      loadData
    }
  }
}
</script>