首页 > 其他分享 >vue 之 computed方法自带缓存踩坑1

vue 之 computed方法自带缓存踩坑1

时间:2023-04-04 16:57:13浏览次数:43  
标签:缓存 computed 穿梭 vue 数据 页面

使用场景:ant-vue 穿梭框使用
页面使用computed方法处理组织结构数据,退出页面时,对加载数据做了set null 操作,再次进入页面时,穿梭框只显示数据,无法做左右穿梭功能。
原因:computed方法在页面初始化时执行,且只执行一次,并会将方法内的数据进行缓存。退出页面做了数据清除工作,但并为清楚缓存数据,导致两边数据冲突,穿梭框数据并未正常渲染。
解决办法:取消退出页面时组件数据的set null操作,在打开页面时对重新加载的组件数据做是否存在判断,若不存在,再重新获取数据进行渲染。

标签:缓存,computed,穿梭,vue,数据,页面
From: https://www.cnblogs.com/tianjunjun/p/17286965.html

相关文章

  • 项目实践后的图片压缩完整使用过程【vue3+js】
    van-uploader+图片压缩+图片base64转成file compressImage.jsconstACCEPT=['image/jpg','image/png','image/jpeg']constMAXSIZE=1024*1024*2;constMAXTIP="4"//压缩算法函数/*1.首先拿到了base64的图片字符串2.创建一个image对象,获......
  • VUE watch监听器的基本使用方法详解
    1、下面代码是watch的一种简单的用法<divid="app"><inputtype="text"v-model="firstName"/></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>......
  • vue 常用动画
    来源: https://juejin.cn/post/6844903638402334734Vue常用transition动画效果记录我的代码果然有问题2018年07月15日13:48 ·  阅读3839先简单介绍下transition标签的使用方法主要用于v-show,v-if或router-view的进出场动画模板<transitionn......
  • vue第三课:简单点击器应用
    简单需求:1,最小为0,小于0则不能再点击减少,并显示提示2,最大值为10,小于10则可以点击增加,超过10则不能再点击,并显示提示<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>v-html测试</title><scriptsrc="vue.js"></script>......
  • vue第二课:常用标签
    1,v-text指令 <divid='app'><h2v-text="message+'???'"></h2><h2v-text="info"></h2><h2>{{message+'??'}}江苏</h2></div><script>Vue.co......
  • vue侦听器
    侦听data里的数据变化:方法格式:<script>  constvm=newVue({    el:"#app",    data:{      username:"张三",      userList:[        {"id":1,"name":"张三"},        {"i......
  • VSCode打开Vue项目
    打开VSCode                                                                       打开文件夹并选择vue的文件夹  ......
  • 4.15 vue中watch computed
    在Vue.js中,computed是一种计算属性,它能够根据依赖的数据动态计算出一个新的值。computed属性可以定义为一个函数,该函数返回需要计算的值。当它所依赖的数据发生变化时,Vue.js会自动重新计算这个值并将其更新到组件上。与computed对应的还有另外两种常见的属性,分别是meth......
  • vue下拉框联动 数据清空后,赋值无效
     1.问题描述:规格型号与设备类型联动,当选择“规格型号”后,清空“设备类型”选择框内容,选择数据赋值时失效。   2.解决 添加this.$forceUpdate();进行强制渲染,效果实现。 getSecondName(){   this.$forceUpdate();  }, ......
  • vue3+vite 解决本地调用时跨域请求
    1、config配置文件中,axios默认请求地址;改为"/api",否则还是请求环境变量中的地址; 2、vite.config.ts文件中做如下配置:  server:{  open:true,//启动项目自动弹出浏览器  port:8081,//启动端口  cors:true,  proxy:{   "/api":{  ......