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笔记一 js以及json基础使用说明
May 22 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
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
深入理解php的MySQL连接类
2013/06/07 PHP
php 如何获取数组第一个值
2013/08/06 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
jQuery的一些注意
2006/12/06 Javascript
ext jquery 简单比较
2010/04/07 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
餐饮业会计岗位职责
2013/12/19 职场文书
四年级评语大全
2014/04/21 职场文书
男性健康日的活动方案
2014/08/18 职场文书
出纳岗位职责范本
2015/03/31 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python