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中创建对象的几种方法总结
Nov 01 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
js实现搜索栏效果
Nov 16 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
面试题:react和vue的区别分析
Apr 08 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
PHP时间函数使用详解
2019/03/21 PHP
php适配器模式简单应用示例
2019/10/23 PHP
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
python使用opencv读取图片的实例
2017/08/17 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
CNC数控操作工岗位职责
2013/11/19 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
公司行政管理制度范本
2015/08/05 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python
python神经网络Xception模型
2022/05/06 Python