阿坝州网站建设公司

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

本篇内容主要讲解“vue3使用reactive赋值后页面不改变如何解决”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue3使用reactive赋值后页面不改变如何解决”吧!

成都创新互联是一家专注于成都网站设计、成都网站建设与策划设计,昭平网站建设哪家好?成都创新互联做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:昭平等地区。昭平做网站价格咨询:13518219792

    场景原因

    我们需要在vue3中使用服务器的数据渲染到页面上，我使用的是reactive生成的响应式数据属性，但是在挂载后请求的数据并没有渲染显示到页面上。

    技术：vue3 、 element-ui-plus

    一、例子

    home.vue

    
        
          
            
          
          {{ item2.authName }}
        
      
    
  
    // 引入模块 import { reactive, onMounted } from 'vue' import { useRouter } from 'vue-router' import http from '@/utils/request' const router = useRouter(); let menusList = reactive([ ]); onMounted(() => {   getData() }) const getData = async () => {   let { data } = await http.get('/menus');   // 这里直接赋值，会导致menusList失去响应式了   menusList = data.data;   console.log(menusList); } const changeMenu = (key) => {   router.push('/home/' + key) } .common-layout {   height: 100vh;   box-sizing: border-box;   position: relative;   overflow: hidden;   /deep/.el-menu--vertical {     margin: 0;     border-right: none !important;     overflow-x: hidden;     height: calc(100vh - 100px);     user-select: none;   }   .el-menu-vertical-demo:not(.el-menu--collapse) {     width: 200px;     min-height: 400px;   } }

    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;
}

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

    可以看出打印出的数据是经过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);
}

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

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

    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赋值后页面不改变如何解决

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


    分享名称：vue3使用reactive赋值后页面不改变如何解决
    分享URL：http://azwzsj.com/article/ggpeps.html

    其他资讯