关于#vue.js#vue3使用ref包裹boolean类型的值时，改变值，视图有时候会刷新，但有时候不会，如何解决？

Question

vue3使用ref包裹boolean类型的值时，改变值，视图有时候会刷新，但有时候不会

<template>
  <el-button @click="changeFlag">改变</el-button>
  {{ flag }}
  <hr class="mtb20">
  <B v-if="flag"></B>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import B from '@/components/B.vue';

const flag = ref<boolean>(true)

const changeFlag = () => {
  flag.value = !flag.value
  console.log('flag :>> ', flag.value);
}

</script>

数据变化正常，但组件显示隐藏正常，但flag展示的数据视图变化有问题，视图不变，但有时刷新页面点击后flag视图又可以变

希望知道为什么会出现这一情况，出现情况的原因

Answer 1

Vue.js 使用 "ref" 包裹 boolean 类型的值时，改变值后视图有时候会刷新，但有时候不会，这是因为 Vue 依赖检测系统是基于 JavaScript 的浅比较来检测数据变化的。当你使用 "ref" 包裹 boolean 类型的值时，Vue 无法检测到变化，因为你修改的是同一个内存地址中的值，而不是新建一个对象。

为了解决这个问题，可以在修改 boolean 类型的值时使用 "set" 方法，这样 Vue 依赖检测系统就能检测到数据变化了。

示例代码:

const flag = ref<boolean>(true)
const changeFlag = () => {
flag.value = !flag.value
console.log('flag :>> ', flag.value);
}

修改为

const flag = ref<boolean>(true)
const changeFlag = () => {
flag.value = !flag.value
flag.value = flag.value
console.log('flag :>> ', flag.value);
}

修改为

const flag = ref<boolean>(true)
const changeFlag = () => {
flag.value = !flag.value
flag.value = flag.value
console.log('flag :>> ', flag.value);
}

或者

const flag = ref<boolean>(true)
const changeFlag = () => {
flag.value = !flag.value
flag.set(flag.value)
console.log('flag :>> ', flag.value);
}