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 相关文章推荐
JavaScript设置FieldSet展开与收缩
May 15 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
Vue 组件注册全解析
Dec 17 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中对用户身份认证实现两种方法
2011/06/04 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
一些常用的Javascript函数
2006/12/22 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
python中round函数保留两位小数的方法
2020/12/04 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
急诊科护士自我鉴定
2013/10/14 职场文书
酒店总经理欢迎词
2014/01/15 职场文书
欢迎领导检查标语
2014/06/27 职场文书
大学毕业生推荐信
2014/07/09 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
房屋维修申请报告
2015/05/18 职场文书
庆七一晚会主持词
2015/06/30 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
Python之基础函数案例详解
2021/08/30 Python