使用组合API在Vue 3中改变观察器的参考值

nc1teljy  于 2022-11-30  发布在  Vue.js
关注(0)|答案(1)|浏览(86)

我尝试在watch函数中修改ref,但似乎没有效果。我使用watch来关注数组长度是否发生变化,每当发生变化时,我需要将旧长度与新长度进行比较,然后如果newValue小于oldValue,则修改ref(selectedTitle)。

setup() {
    const slots = useSlots();
    const tabTitles = computed(() =>
      slots.default()[0].children.map((tab) => tab.props.title)
    );
    const tabTitlesLength = computed(() => tabTitles.value.length);
    let selectedTitle = ref(tabTitles.value[0]);
    provide("selectedTitle", selectedTitle);
    provide("tabTitles", tabTitles);
    watch(tabTitlesLength, (currentValue, oldValue) => {
      if (currentValue < oldValue) {
        selectedTitle = tabTitles.value[0];
      } else {
        console.log("fuera del if");
      }
    });
    return {
      tabTitles,
      selectedTitle,
      tabTitlesLength,
    };
  },

在这段代码中,selectedTitle引用永远不会改变,它总是具有每次计算属性改变时接收的最后一个值(tabTitles)。我只是不明白为什么,因为其他一切似乎都工作得很好。

scyqe7ek

scyqe7ek1#

由于selectedTitle是引用,因此尝试使用

selectedTitle.value = tabTitles.value[0];

相关问题