监听 ref 数据

监听一个 ref 数据

📝 监听 age 的变化，做一些操作

<template>
  <p>{{ age }}</p>
  <button @click="age++">click</button>
</template>

<script>
  import { watch, ref } from 'vue'
  export default {
    name: 'App',
    setup() {
      const age = ref(18)
      // 监听 ref 数据 age，会触发后面的回调，不需要 .value
      watch(age, (newValue, oldValue) => {
        console.log(newValue, oldValue)
      })

      return { age }
    }
  }
</script>

监听多个 ref 数据

📝 可以通过数组的形式，同时监听 age 和 num 的变化。

<template>
  <p>age: {{ age }} num: {{ num }}</p>
  <button @click="handleClick">click</button>
</template>

<script>
  import { watch, ref } from 'vue'
  export default {
    name: 'App',
    setup() {
      const age = ref(18)
      const num = ref(0)

      const handleClick = () => {
        age.value++
        num.value++
      }
      // 数组里面是 ref 数据
      watch([age, num], (newValue, oldValue) => {
        console.log(newValue, oldValue)
      })

      return { age, num, handleClick }
    }
  }
</script>

立即触发监听

<template>
  <div class="container">
    <div>{{ name }}</div>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
    name: 'App',
    setup() {
      const name = ref('ifer')
      const updateName = () => {
        name.value = 'xxx'
      }
      return { name, updateName }
    }
  }
</script>