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