Vue3组合式API中watcher内修改ref值不生效问题排查

ref值更新不生效是错误的赋值方式导致的：

• 初始化时let selectedTitle = ref(tabTitles.value[0])创建了一个响应式ref对象，后续provide传递、return暴露给模板的，都是这个初始创建的ref实例。
• watch回调里写的selectedTitle = tabTitles.value[0]，是直接把当前作用域下的selectedTitle变量重新赋值为普通值，直接覆盖丢弃了原本的ref对象引用。之前传递、暴露出去的旧ref实例完全没被修改，自然会一直保留初始的旧值。

修改watch内的赋值逻辑，给ref的.value属性赋值，不要直接覆盖ref变量本身：

watch(tabTitlesLength, (currentValue, oldValue) => {
  if (currentValue < oldValue) {
    selectedTitle.value = tabTitles.value[0];
  } else {
    console.log("fuera del if");
  }
});

额外优化建议：声明ref时优先用const代替let，从语法层面避免误覆盖ref变量的问题。ref的使用全程不需要更改变量本身的指向，只需要修改.value属性，用const声明后如果不小心写了直接赋值的错误代码，编辑器会第一时间抛出错误，提前排查问题：

// 原代码用let声明selectedTitle，改成const即可
const selectedTitle = ref(tabTitles.value[0]);

内容的提问来源于stack exchange，提问作者Lowtrux