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 相关文章推荐
json对象转字符串如何实现
Dec 02 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 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读取excel文件的简单实例
2013/08/26 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
Python递归函数定义与用法示例
2017/06/02 Python
Linux下多个Python版本安装教程
2018/08/15 Python
python实现人脸签到系统
2020/04/13 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
存储过程和函数的区别
2013/05/28 面试题
银行实习自我鉴定
2013/10/12 职场文书
智能电子应届生求职信
2013/11/10 职场文书
金融与证券专业求职信
2014/06/22 职场文书
文秘应届生求职信
2014/07/05 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers