vue3使用reactive赋值后页面不改变如何解决

我们通过直接赋值，可以看出数据变为普通的数据了，并不是响应式的。

二、解决方法

1、使用ref存储响应式数据

代码如下：

// 引入模块
import { ref, reactive, onMounted } from 'vue'
import http from '@/utils/request'
let menusList = ref([
]);
onMounted(() => {
  getData()
})
const getData = async () => {
  let { data } = await http.get('/menus');
  // 这里直接赋值value，在页面上直接使用menusList即可！
  menusList.value = data.data;
}

可以看出打印出的数据是经过ref劫持的数据，是响应式的。

2、在reactive中使用对象包裹要改变的数据

代码如下：

// 引入模块
import { reactive, onMounted } from 'vue'
import http from '@/utils/request'
let parmar = reactive({
  menus: [
  ]
});
onMounted(() => {
  getData()
})
const getData = async () => {
  let { data } = await http.get('/menus');
  // 这里直接赋值对象里面的数据，就不会造成把响应式替换掉的情况了，直接在页面上通过parmar.menus使用数据！
  parmar.menus = data.data;
  console.log( parmar);
}

使用这种方式，数据也是响应式的。

3、for of循环push到reactive数据中，不破坏数据结构

代码如下：

// 引入模块
import { reactive, onMounted } from 'vue'
import http from '@/utils/request'
let menusList = reactive([])
onMounted(() => {
  getData()
})
const getData = async () => {
  let { data } = await http.get('/menus');
  for (let i of data.data){
    menusList.push(i);
  }
  console.log(menusList);
}

到此，相信大家对“vue3使用reactive赋值后页面不改变如何解决”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！