侦听器

import { watch } from 'vue'

function watch<T>(
    source: WatchSource<T>,
    callback: WatchCallback<T>,
    options?: WatchOptions
): StopHandle

const stopWatch = watch(source, callback)

// 当已不再需要该侦听器时：
stopWatch()

const num = ref(0)
const inc = () =>{
    num.value++
}
watch(num, (newv, oldv) => {
    console.log('num old vs new', oldv, newv);
})

Invalid watch source:  0 A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.at ... 

const msg = ref('')
const str = ref('')
watch(msg, (newv, oldv) => {
    str.value = newv.split('').reverse().join('')
})

const times = ref(0)
const sum = ref(0)
function incTimes() {
    times.value++
}
function incSum() {
    sum.value += 1000
}
watch([times, sum], ([new1, new2], [old1, old2]) => {
    console.log(old1, new1, old2, new2);
})

const user = ref({
  id: 100,
  name: 'glpla',
  age: 18,
  addr: {
      city: 'cq',
      code: '541000'
  }
})

watch(user, (newv, oldv) => {
    console.log('user is watched', newv, oldv);
})

watch(user, (newv, oldv) => {
    console.log('user is watched', newv, oldv);
}, { deep: true })

watch(() => user.value.age, (newv, oldv) => {
  console.log('user age is watched', newv, oldv);
})

const user = reactive({
  id: 100,
  name: 'glpla',
  age: 18,
  addr: {
    city: 'cq',
    code: '541000'
  }
})

watch(user, (newv, oldv) => {
  console.log('user is watched', newv, oldv);
  console.log('user is watched', newv.age, oldv.age);
})

watch(() => user.id, (newv, oldv) => {
  console.log('user id is watched', newv, oldv);
})

watch(() => user.addr.code, (newv, oldv) => {
  console.log(newv, oldv);
})

watch([() => user.age, () => user.addr.code], ([n0, n1], [o0, o1]) => {
  console.log(o0, n0, o1, n1);
})

<div>{{ sum }}</div>
<div class="inc" @click="num++">inc</div>
<div>{{ num }}</div>
<div class="dec" @click="num--">dec</div>

import { ref, watch } from 'vue';
const num = ref(1);
const sum = ref(0);
const price = 9.9
watch(num, (newv, oldv) => {
  console.log('user is watched', newv, oldv);
  sum.value = newv * price;
}, { immediate: true })

<div v-for="tab in tabs" :key="tab.id" @click="word = tab.data">{{ tab.label }}</div>

import { ref, watch } from 'vue';
const tabs = ref([{
  id: 1,
  label: '软工3班',
  data: '20240203.json',
}, {
  id: 2,
  label: '软工4班',
  data: '20240204.json',
}])
const word = ref(tabs.value[0].data)
watch(word, (newValue, oldValue) => {
  console.log(newValue);
  fetch(`https://glpla.github.io/utils/data/rank/${newValue}`)
    .then(res => res.json())
    .then(data => {
      console.log(data);
    })
}, { immediate: true })

<div class="item">
  <input type="text" v-model.number="user.code" required maxlength="6">
  <button class="tips" :disabled="isCellActive" @click="getCode">获取验证码</button>
</div>

const user = ref({
  cell: '',
  code: null,
  isAgree: false,
  code: null
})
const isCellActive = ref(true)
watch(() => user.value.cell, (n, o) => {
  if (/^1[3-9]\d{9}$/.test(n)) {
    isCellActive.value = false
  } else {
    isCellActive.value = true
  }
})

watch(isModalOpen, (newval, oldval) => {
  if (newval) {
    setTimeout(() => {
    isModalOpen.value = false
    }, 3000);
  }
})