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 相关文章推荐
Javascript 实用小技巧
Apr 07 Javascript
JS 文件传参及处理技巧分析
May 13 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 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
一个MYSQL操作类
2006/11/16 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
python练习程序批量修改文件名
2014/01/16 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
Python3 修改默认环境的方法
2019/02/16 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
如何写好升职自荐信
2014/01/06 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
公司承诺书怎么写
2014/05/24 职场文书
高中生学习计划书
2014/09/15 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
教师工作总结范文2014
2014/11/10 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
被委托人身份证明
2015/08/07 职场文书