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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
js中function()使用方法
Dec 24 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
详解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设计模式中的工厂模式
2008/06/12 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
JS交换变量的方法
2015/01/21 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
全面解析Python的While循环语句的使用方法
2015/10/13 Python
python实现按任意键继续执行程序
2016/12/30 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
无故旷工检讨书
2014/01/26 职场文书
低碳生活倡议书
2014/04/14 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
专职安全员岗位职责
2015/04/11 职场文书
永远是春天观后感
2015/06/12 职场文书
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers
frg-100简单操作(设置)说明
2022/04/05 无线电