49 lines
953 B
JavaScript
49 lines
953 B
JavaScript
import {reactive, ref, computed, watch, effect} from './vue-reactive.js'
|
|
|
|
// 测试
|
|
const product = reactive({ price: 5, quantity: 2 });
|
|
const tax = ref(5);
|
|
|
|
effect(() => {
|
|
console.log(`现在的总价是：${product.price * product.quantity}`);
|
|
});
|
|
|
|
// 修改价格
|
|
product.price = 10;
|
|
|
|
// 修改数量
|
|
product.quantity = 3;
|
|
|
|
// 计算含税价格
|
|
const total = computed(() => {
|
|
return product.price * product.quantity + tax.value;
|
|
});
|
|
|
|
effect(() => {
|
|
console.log(`含税价格为：${total.value}`);
|
|
});
|
|
|
|
// 修改税
|
|
tax.value = 10;
|
|
|
|
watch(total, (newVal, oldVal) => {
|
|
console.log(`老总价：${oldVal}---->新总价：${newVal}`);
|
|
});
|
|
|
|
watch(
|
|
() => product.price,
|
|
(newVal, oldVal) => {
|
|
console.log(`老价格：${oldVal}---->新价格：${newVal}`);
|
|
}
|
|
);
|
|
|
|
watch(
|
|
() => product.quantity,
|
|
(newVal, oldVal) => {
|
|
console.log(`老数量：${oldVal}---->新数量：${newVal}`);
|
|
}
|
|
);
|
|
|
|
product.price = 20
|
|
product.quantity = 10
|