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);
})
import { ref, computed } from 'vue';
const num = ref(1);
const price = 9.9
const sum = computed(() => {
return num.value * price;
});
<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 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
}
})
侦听购物车商品长度或某个商品数量
选中某个商品，发生变化时，统计总价
修改选中商品的数量，更新总价
计算总价还要判断是否是全选；当选择了所有商品后，应为全选状态
继续选中商品，当选中商品的种类数量等于待选商品种类的数量时，应为全选
侦听购物车商品的全选对应的多选按钮 checkbox；选中 true，为全选；否则取消全选
watch(isModalOpen, (newval, oldval) => {
if (newval) {
setTimeout(() => {
isModalOpen.value = false
}, 3000);
}
})
<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 })