没想到 Vue 中滥用 watch 危害这么大！吓得我连夜修改代码

<template>
  <div>{{ dataList }}</div>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps(['value']);
const dataList = ref([]);
watch(
  () => props.value,
  (newValue, oldValue) => {
    // 根据新的 props.value 更新 dataList
    dataList.value = processValue(newValue);
  }
);
function processValue(value) {
  // 处理值的逻辑
  return value.split(',');
}
</script>

<template>
  <div>{{ dataList }}</div>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps(['disableList', 'type', 'id']);
const dataList = ref([]);
watch(
  () => props.disableList,
  (newDisableList) => {
    dataList.value = processDisableList(newDisableList);
  },
  { deep: true }
);
watch(
  () => props.type,
  (newType) => {
    dataList.value = processType(newType);
  }
);
watch(
  () => props.id,
  (newId) => {
    fetchDataList(newId).then(newDataList => {
      dataList.value = newDataList;
    });
  },
  { immediate: true }
);
function processDisableList(disableList) {
  // 处理 disableList 的逻辑
  return disableList.map(item => item.id);
}
function processType(type) {
  // 处理 type 的逻辑
  return type.split(',');
}
function fetchDataList(id) {
  // 从服务器获取 dataList
  return fetch(`/api/dataList/${id}`).then(response => response.json());
}
</script>

<template>
  <div>{{ processedData }}</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const props = defineProps(['value']);
const data = ref(props.value);
const processedData = computed(() => {
  return data.value.split(',');
});
</script>

<template>
  <div>{{ processedData }}</div>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
const props = defineProps(['disableList', 'type', 'id']);
const dataList = ref([]);
const disableList = ref(props.disableList);
const type = ref(props.type);
const id = ref(props.id);
const processedData = useDataProcessing(disableList, type, id);
function useDataProcessing(disableList, type, id) {
  const data = ref([]);
  const processedDisableList = computed(() => {
    return disableList.value.map(item => item.id);
  });
  const processedType = computed(() => {
    return type.value.split(',');
  });
  watch(
    id,
    (newId) => {
      fetchDataList(newId).then(newDataList => {
        data.value = newDataList;
      });
    },
    { immediate: true }
  );
  return computed(() => {
    return processFinalData(processedDisableList.value, processedType.value, data.value);
  });
}
function fetchDataList(id) {
  return fetch(`/api/dataList/${id}`).then(response => response.json());
}
function processFinalData(disableList, type, dataList) {
  // 处理最终数据的逻辑
  return dataList.filter(item => !disableList.includes(item.id) && type.includes(item.type));
}
</script>

<template>
  <div>
    <Filter @change="handleFilterChange" />
    <ProductList :products="filteredProducts" />
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import Filter from './Filter.vue';
import ProductList from './ProductList.vue';
const filters = ref({
  category: '',
  priceRange: [0, 100],
  sortBy: 'price'
});
const products = ref([]);
const filteredProducts = ref([]);
watch(
  () => filters.value.category,
  (newCategory) => {
    filteredProducts.value = filterProducts(products.value, filters.value);
  }
);
watch(
  () => filters.value.priceRange,
  (newPriceRange) => {
    filteredProducts.value = filterProducts(products.value, filters.value);
  }
);
watch(
  () => filters.value.sortBy,
  (newSortBy) => {
    filteredProducts.value = sortProducts(filteredProducts.value, filters.value.sortBy);
  }
);
function filterProducts(products, filters) {
  // 根据 filters 过滤产品列表的逻辑
  return products.filter(product => {
    return product.category === filters.category && product.price >= filters.priceRange[0] && product.price <= filters.priceRange[1];
  });
}
function sortProducts(products, sortBy) {
  // 根据 sortBy 对产品列表排序的逻辑
  return products.sort((a, b) => {
    if (sortBy === 'price') {
      return a.price - b.price;
    } else if (sortBy === 'name') {
      return a.name.localeCompare(b.name);
    }
  });
}
</script>

<template>
  <div>
    <Filter @change="handleFilterChange" />
    <ProductList :products="filteredProducts" />
  </div>
</template>
<script setup>
import { ref, computed } from 'vue';
import Filter from './Filter.vue';
import ProductList from './ProductList.vue';
const filters = ref({
  category: '',
  priceRange: [0, 100],
  sortBy: 'price'
});
const products = ref([]);
const filteredProducts = useFilteredProducts(products, filters);
function useFilteredProducts(products, filters) {
  const filtered = computed(() => {
    return filterProducts(products.value, filters.value);
  });
  const sorted = computed(() => {
    return sortProducts(filtered.value, filters.value.sortBy);
  });
  return sorted;
}
function filterProducts(products, filters) {
  // 根据 filters 过滤产品列表的逻辑
  return products.filter(product => {
    return product.category === filters.category && product.price >= filters.priceRange[0] && product.price <= filters.priceRange[1];
  });
}
function sortProducts(products, sortBy) {
  // 根据 sortBy 对产品列表排序的逻辑
  return products.sort((a, b) => {
    if (sortBy === 'price') {
      return a.price - b.price;
    } else if (sortBy === 'name') {
      return a.name.localeCompare(b.name);
    }
  });
}
</script>