Vue3中非响应式变量在响应式变量更新后也会被刷新的问题

Mashiro

2023 年 06 月 21 日

949 次浏览

1 条评论

1021字数

博客

## 问题

### 代码

```vue
<script setup lang="ts">
import { ref } from 'vue';

let msg: string = "HelloWorld";
function changeMsg() {
    // 不是响应式
    msg = "HelloVue";
    console.log(msg);
}

// 通过 ref 定义响应式变量（本质是包了一层对象）
const counter = ref("HelloWorld");
function changeCounter() {
    counter.value = "HelloVue";
    console.log(counter.value);
}
</script>

<template>
    <div>
        {{ msg }}
        <button @click="changeMsg">改变msg</button>
    </div>
    <div>
        
        {{ counter }}
        <button @click="changeCounter">改变counter.value</button>
    </div>
</template>
```

### 问题描述

在调用 `changeMsg` 方法后页面如预期内没有刷新，但在调用 `changeCounter` 方法后，除预期内 `counter` 对象会被刷新以外，非响应式变量 `msg` 也一同被刷新了

### 解答（ChatGPT）

在Vue中，响应式系统会追踪数据的依赖关系，并在相关数据发生变化时自动更新视图。在你的代码中，虽然msg变量没有使用Vue的响应式 API（如ref），但它仍然在Vue的渲染过程中被使用。

在Vue的模板中，所有在双花括号{{ }}中的表达式都会被视为依赖，当任何一个依赖发生变化时，Vue会自动重新渲染相应的部分。所以当counter发生变化时，整个组件会重新渲染，包括使用双花括号绑定的{{ msg }}部分。

这种行为是由Vue的响应式系统决定的，它会在组件的渲染过程中追踪所有被使用的响应式数据，并建立依赖关系。即使变量本身没有使用Vue的响应式 API，只要在渲染过程中被使用，Vue也会将其视为依赖并更新相关部分。

如果你想要避免msg被重新渲染，你可以将其包装成响应式对象，就像你使用ref包装counter一样。这样，msg将成为一个响应式变量，并且只有在它自身发生变化时才会触发重新渲染。

最后修改：2023 年 06 月 21 日