uniapp延迟执行_【 vue / uniapp 】延迟加载数据的特殊处理
在用vue实现一个无限层级的树型结构时,遇到了这个问题。
页面结构如图:
其中,父页面的处理逻辑:
步骤一:引用并挂载组件,同时向组件props传递树型JSON列表数据(this.list),当然这时候的 this.list 还只是一个空数组。
步骤二:在 onload 事件中从服务器获取树型JSON数据并回写到 this.list,同时这个 this.list 也会自动通过 props 传递给组件。
当时考虑到对数据的解耦,不想在父页面中对数据进行过多的处理,拿到服务端的JSON后直接交给组件,剩下的都在组件里实现。
所以对于组件来说,就要对 props 中接收到的数据进一步处理,用来满足树型的相关要求。
首先,为了实现对树型节点的展开/闭合操作,每个节点的数据对象都需要增加一个属性(opened),用来记忆节点的状态,同时自动渲染到Dom。
组件的处理逻辑:
步骤一:接收 props 中的 list 数据;
步骤二:在组件的 mounted 事件中遍历 list 中当前层级的节点列表数据对象,增加并初始化属性 item.opened = false,即默认闭合节点。
步骤三:如果存在子节点,则递归引用并挂载组件,同时将子节点列表数传递给组件,实现无限层级的树型渲染。
注意:步骤二中为节点数据对象增加 opened 属性需要使用 this.$set 函数,否则新增加的属性将不支持与视图的自动响应。
按照以上方式完成之后,发现第一层节点的 opened 属性并没有自动响应,通过调试发现组件的 mounted 事件只处理了第一次挂载时接收到的空数组,之后父页面传过来的真实数据压根没经过处理。
想了一下,才反应过来,因为父页面在创建时就已经触发了组件的 mounted 事件;
后来从服务端返回JSON后,修改 props 时不会再次触发组件的 mounted 事件,反而会触发 updated 事件,所以才造成了新增属性无效的情况。
弄明白了问题所在,解决起来也很纠结,因为只有第一层组件的数据传入是异步的,需要从 updated 事件进行处理;
而更下层的组件都是挂载时就会传入的,还需要从 mounted 进行处理。
另一个问题就是,每次点击节点时要修改 opened 属性,而这时也会触发 updated 事件,所以初始化操作还是不能在 updated 中处理。
想明白了问题所在,就尝试通过 this.$refs 来实现,在父页面引用组件时,默认先不通过 props 传入 list 数据,而是在获取服务端JSON之后,使用 this.$refs.comp.treeRoot(list) 向组件传入,而组件本身的 mounted 事件用来处理第二层之后的组件数据初始化。
后来又尝试用 watch 来解决,感觉比 ref 要简洁一些,核心代码如下:
watch: {
list: {
handler(newVal, oldVal){if(kit.isEmpty(oldVal) || oldVal.length === 0){this.opened = this.currentLevel < this.openLevel;
let list=JSON.parse(JSON.stringify(newVal));
list.forEach((item, i)=>{
item[this.attrOpened] = this.opened;
})this.treeList =list;
}
},
immediate:true}
}
uniapp延迟执行_【 vue / uniapp 】延迟加载数据的特殊处理相关推荐
- uniapp延迟执行_uniapp微信小程序真机调试点击按钮有1秒延迟
详细问题描述 (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题) [内容] 开发uniapp小 ...
- vue请求数据完成后执行_生产库删除数据后怎样执行对应的undo sql来恢复数据?...
概述 Oracle11g 闪回事务查询就是对过去某段时间内所完成的事务的查询和撤销,通过闪回事物分析,可以识别在一个特定的时间段内所发生的所有变化,也可以对数据库表进行事物级恢复. 前面提到可以审计一 ...
- uniapp延迟执行_uni-app android 调试运行首页一直卡在加载中
参考官方文档,新建 uni-app android 工程后,按官方文档做完 从android studio 运行 app , 模拟器一直卡在如下页面 请问是为什么呢? 该如何排查问题呢? log: 0 ...
- oracle trigger 延迟执行_一文详解Spring任务执行和调度
一.概述 Spring框架分别使用TaskExecutor和TaskScheduler接口提供异步执行和任务调度的抽象.Spring还提供了这些接口的实现,这些接口支持线程池或将其委托给应用服务器环境 ...
- uniapp 底部菜单_利用uni-app怎么对底部导航栏进行自定义
利用uni-app怎么对底部导航栏进行自定义 发布时间:2020-12-14 15:15:03 来源:亿速云 阅读:78 利用uni-app怎么对底部导航栏进行自定义?相信很多没有经验的人对此束手无策 ...
- uniapp手写_【uniapp 开发】手绘签名组件
代码如下: 点击签名1 点击签名2 import catSignature from "@/components/cat-signature/cat-signature.vue" ...
- uni-app 阉割版的vue uni-app开发中的小坑。
如题,为何这么说呢,还是使用的过程中踩到的坑. 1.支付宝小程序不要在组件上直接加样式,要包一层view,不然不生效 <view class="empty-class" v- ...
- uniapp 子组件 props拿不到数据_来吧!一文彻底搞定Vue组件!
点击蓝色 "达达前端小酒馆" 关注我哦! 加个 "星标" ,每天一篇文章,一起学编程 作者 | Jeskson 来源 | 达达前端小酒馆 Vue组件的概述 ...
- vue uniapp 微信小程序 搜索下拉框 模糊搜索
vue uniapp 微信小程序 搜索下拉框 模糊搜索 话不多说 直接贴代码 template <template><view class="index"> ...
最新文章
- 交流线圈磁芯上的短路铜片
- 每天数十亿次请求的应用经验分享,值得参考!
- 安装卸载功能 [测试思路]
- 网易java实习面试_2019届网易JAVA实习2面经历
- java内部类为什么会持有外部类的引用_为什么内部类持有外部类的引?
- SQL编程---存储过程和存储函数
- mongodb如何写入图片_CTO之瞳-数据库-MongoDB
- 原来 Sql Server 的存储过程是可以调试的
- LeetCode 96. 不同的二叉搜索树(Unique Binary Search Trees )
- leetcode python3 简单题14. Longest Common Prefix
- 统计二进制中1的个数(四种方案)
- 【ArcGIS风暴】气象台站气温(降水)矢量数据插值成栅格气温(降水)空间数据
- android 面包屑控件,android面包屑導航欄的實現
- 中小企业如何选择OA协同办公产品?最全的对比都在这里了
- YYH的王国(NOIP模拟赛Round 6)
- 如何在Linux Shell脚本中添加GUI
- 2022焊工(初级)考试题库及答案
- linux 每日学一点《用tar来备份ubuntu系统》
- wdcp 安装及问题解决
- 证明一个数能被3整除,当且仅当它的各位数的和能被3整除!
热门文章
- android widget动画,widget 动画 - androidCode的个人空间 - OSCHINA - 中文开源技术交流社区...
- WL-test (GIN)
- 探秘之阿里云 OSS 数据存储 API
- 教你怎么学好Java
- 我的雷电游戏(重力感应控制)
- 《痞子衡嵌入式半月刊》 第 51 期
- 祝愿大家在新的一年里,万事大吉,送上我设计的可爱暴富小老虎微信红包封面,祝愿大家新的一年财运旺,事业旺,健康旺。
- 动态 V2 基础配置命令
- python雪花_用 Python 实现雪花效果
- OkHttp 官方中文文档