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字符串截取函数substr substring slice使用对比
Nov 27 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
详解Vue的ref特性的使用
Jan 24 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
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
PyQt 如何创建自定义QWidget
2021/03/24 Python
国旗下讲话演讲稿
2014/05/08 职场文书
医德考评自我评价
2014/09/14 职场文书
委托函范文
2015/01/29 职场文书
三峡人家导游词
2015/01/31 职场文书
2015年药房工作总结
2015/04/25 职场文书
倡议书格式及范文
2015/04/29 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers