Vue3 Composition API下computed属性变化但template模板未更新问题

你代码中的currentMode是普通JavaScript变量，不属于Vue3的响应式变量，Vue响应式系统无法追踪它的变更。因此即使你修改了currentMode的值，依赖它的computed属性editMode也不会触发重新计算，模板自然不会更新。

1. 从vue中引入refAPI，ref用于将基础类型变量转为响应式对象

import { ref, computed } from 'vue'

2. 将currentMode的声明改为响应式声明，修改时要通过.value属性读写值：

setup(props, context) {
  // 改为ref声明响应式变量
  const currentMode = ref(null)
  const modes = {
     view:'view',
     edit:'edit',
     create:'create'
  }
  const editMode = computed(() => {
     // 读取ref值需要加.value
     return currentMode.value === modes.edit
  });

  const toggleMode = () => {
    if (currentMode.value === modes.edit ){
      // 修改ref值需要加.value
      currentMode.value = modes.view
      console.log(currentMode.value)
      return
    }  else {
      currentMode.value = modes.edit
      console.log(currentMode.value)
    }
  }

  return {editMode, toggleMode}
}

• ref包裹的变量在<script>内读写需要加.value，直接在模板中绑定使用时不需要额外加.value，Vue会自动完成解包
• 改为响应式变量后，currentMode的变更会被Vue响应式系统捕获，自动触发关联的计算属性更新、模板重渲染。

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