vue将data恢复到初始状态 && 重新渲染组件实例


Posted in Javascript onSeptember 04, 2020

1. 将data恢复到初始状态

Object.assign(this.$data, this.$options.data()) // 初始化data

这里的 this.$options.data() 作为源对象, this.$data 作为目标对象。源对象覆盖并合并目标对象中的内容,即有则覆盖,无则添加。

2. 重新渲染组件

方法一:v-if(可以重置生命周期)

虽然能实现重新渲染,但不推荐首选

方法二:给组件加key值【推荐】

通过修改key的值,就会重新渲染该组件

方法三:this.$forceUpdate()

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

补充知识:vue强制刷新组件 ----组件重置到初始状态

把一个组件重置到初始状态是一个常见的需求,推荐的做法有两种,一种是父组件重置子组件的 prop,另一种是子组件暴露一个重置的方法供父组件调用。但有些时候,子组件既没有提供重置的方法,也没提供 prop 来重置自己的状态。

更重要的是,这个子组件我们还动不了。于是我们就需要一种 hack 的方式来强制子组件重置到初始状态。

方法如下:

hack 的方式来强制子组件重置到初始状态

vue将data恢复到初始状态 && 重新渲染组件实例

vue将data恢复到初始状态 && 重新渲染组件实例

在你需要重置组件状态的操作里面加上这个句话,就可以实现组件的刷新,

v-if 在切换时,元素及它的绑定数据和组件都会被销毁并重建

以上这篇vue将data恢复到初始状态 && 重新渲染组件实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 刷新页面的代码小结 推荐
Apr 02 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
简单谈谈json跨域
Mar 13 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
详解vue.js的devtools安装
May 26 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
深入解析koa之中间件流程控制
Jun 17 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 #Javascript
我所理解的JavaScript中的this指向
Sep 04 #Javascript
JS运算符优先级与表达式示例详解
Sep 04 #Javascript
vue中的循环对象属性和属性值用法
Sep 04 #Javascript
JavaScript逻辑运算符相关总结
Sep 04 #Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 #Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 #Javascript
You might like
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
php错误级别的设置方法
2013/06/17 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
jquery插件之easing使用
2010/08/19 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
python机器学习理论与实战(二)决策树
2018/01/19 Python
pandas带有重复索引操作方法
2018/06/08 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
后勤人员自我鉴定
2013/10/20 职场文书
实习生体会的自我评价范文
2013/11/28 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
小学生成长感言
2014/01/30 职场文书
教师节学生演讲稿
2014/09/03 职场文书
车贷收入证明范本
2014/09/14 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
导游词之千岛湖
2019/09/23 职场文书