vue3 的响应式变量在axios.then方法中修改值后,并未会显到页面中
时间: 2023-06-13 09:08:42 浏览: 114
vue修改对象的属性值后页面不重新渲染的实例
5星 · 资源好评率100%
这种情况可能是因为 Vue 的响应式系统侦测不到该变量的变化。Vue 3 中的响应式变量是通过 `ref` 或 `reactive` 创建的,而在 `axios.then` 方法中修改变量的值时,可能会破坏响应式系统的侦测。解决这个问题的方法是,可以使用 Vue 3 提供的 `watchEffect` API 监听变量的变化,例如:
```javascript
import { ref, watchEffect } from 'vue';
const data = ref([]);
axios.get('/api/data').then(response => {
data.value = response.data;
});
watchEffect(() => {
// 在这里访问 data.value,Vue 会自动侦测其变化并更新视图
});
```
在 `watchEffect` 中访问 `data.value`,Vue 会自动侦测其变化并更新视图。这样就可以解决在 `axios.then` 方法中修改响应式变量值后没有更新视图的问题。
阅读全文