vue 强制组件重新渲染(重置)的两种方案


Posted in Javascript onOctober 29, 2019

数据通过异步操作后,对之前刚加载的数据进行变更后,发现数据不能生效

方案一

当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染。使用 v-if 可以解决这个问题

<template>
 <third-comp v-if="reFresh"/>
</template>
 
<script>
 export default{
 data(){
  return {
  reFresh:true,
  menuTree:[]
  }
 },
 watch:{
  menuTree(){
 
   this.reFresh= false
   this.$nextTick(()=>{
   
   this.reFresh = true
  })
  }
 }
}
</script>

这种方式虽然可以实现,太不优雅

方案二

通过vue key 实现,原理官方文档。所以当key 值变更时,会自动的重新渲染。

<template>
 <third-comp :key="menuKey"/>
</template>
 
<script>
 export default{
 data(){
  return {
  menuKey:1
  }
 },
 watch:{
  menuTree(){
 
  ++this.menuKey
  }
 }
}
</script>

以上这篇vue 强制组件重新渲染(重置)的两种方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js post方式传递提交的实现代码
May 31 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
jquery密码强度校验
Dec 02 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
javascript实现简单打字游戏
Oct 29 #Javascript
简单使用webpack打包文件的实现
Oct 29 #Javascript
vue 解决异步数据更新问题
Oct 29 #Javascript
VUE实现强制渲染,强制更新
Oct 29 #Javascript
js实现贪吃蛇小游戏
Oct 29 #Javascript
浅谈vue异步数据影响页面渲染
Oct 29 #Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 #Javascript
You might like
初探PHP5
2006/10/09 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
python开发中range()函数用法实例分析
2015/11/12 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python 实现单通道转3通道
2019/12/03 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
药剂专业学生求职信范文
2013/12/28 职场文书
大学生创业感言
2014/01/25 职场文书
开业典礼主持词
2014/03/21 职场文书
二年级评语大全
2014/04/23 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL