Vue之this.$forceUpdate——强制更新数据
时间:2021-08-20
本文章向大家介绍Vue之this.$forceUpdate——强制更新数据,主要包括Vue之this.$forceUpdate——强制更新数据使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
依据官网的生命周期,数据更新时,相关的组件生命周期包括 beforeUpdate 、 updated 。
生命周期 | 描述 |
beforeUpdate | 数据更新前调用。 |
updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。 |
$forceUpdate 迫使组件或实例强制渲染。
示例
方法用于更新数据。当执行 this.$forceUpdate() 时,重新刷新数据。(输出“更新了数据”)
1 <template> 2 <view class="flex flex-direction"> 3 <view>姓名:{{ student.name }}</view> 4 <view>年龄:{{ student.age }}</view> 5 <button class="margin-top cu-btn bg-blue" @click="addAge">年龄+1</button> 6 <button class="margin-top cu-btn bg-blue" @click="reload">更新数据</button> 7 </view> 8 </template> 9 10 <script> 11 export default { 12 name:"comp-x", 13 data() { 14 return { 15 student:{ 16 name :'张三', 17 age:15 18 } 19 } 20 }, 21 updated:function(){ 22 console.log("更新了数据"); 23 }, 24 methods:{ 25 addAge: function(){ 26 this.student.age += 1; 27 }, 28 reload: function(){ 29 this.$forceUpdate(); 30 } 31 } 32 } 33 </script>
参考网址
有志者,事竟成,破釜沉舟,百二秦关终属楚; 苦心人,天不负,卧薪尝胆,三千越甲可吞吴。
原文地址:https://www.cnblogs.com/luyj00436/p/15163669.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LeetCode题目27:移出元素
- LeetCode题目28:实现strStr()
- LeetCode题目29:两数相除
- LeetCode题目30:串联所有单词的子串
- LeetCode题目31:下一个排列
- LeetCode题目33:搜索旋转排序数组
- LeetCode题目34:在排序数组中查找元素的第一个和最后一个位置
- LeetCode题目35:搜索插入位置
- LeetCode题目36:有效的数独
- 你必须掌握动态规划——LeetCode题目5:最长回文子串
- 有意思的难题——LeetCode题目37:解数独
- 源码分析-分布式链路追踪:Skywalking存储插件能力-elasticsearch
- mongodb 4.0副本集搭建
- 浅析Kubernetes Pod重启策略和健康检查
- SpringBoot2 整合Ehcache组件,轻量级缓存管理