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 相关文章推荐
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
使用js实现数据格式化
Dec 03 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
React Router基础使用
Jan 17 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
vue-cli点击实现全屏功能
Mar 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采集利器 Snoopy 试用心得
2011/07/03 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
php操作MongoDB类实例
2015/06/17 PHP
提高php编程效率技巧
2015/08/13 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
python日志logging模块使用方法分析
2019/05/23 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
python的range和linspace使用详解
2019/11/27 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
Python bisect模块原理及常见实例
2020/06/17 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
美德少年事迹材料
2014/01/23 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
兴趣小组活动总结
2014/05/05 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
花木兰观后感
2015/06/10 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL