Vue进阶（八十二）：updated 应用详解

文章目录

一、前言
二、注意事项
三、拓展阅读

一、前言

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用updated钩子函数。

无论是组件本身的数据变更，还是从父组件接收到的 props 或者从vuex里面拿到的数据有变更，都会触发虚拟 DOM 重新渲染和打补丁，并在之后调用 updated。

有个值得注意的地方，举例说明：

例子

<template><div><div v-for="(item, index) in list" :key="index">{{item}}</div></div>
</template><script>
export default {data () {return {list: [1, 1, 1]}},created () {setTimeout(_ => {this.list = [2, 2, 2]}, 1000)},updated () {console.log('App.vue finish re-render')}
}
</script>

页面首先渲染了3个1的列表，1s后页面重绘为3个2，并打出’App.vue finish re-render’的日志。

二、注意事项

将created生命周期函数的setTimeout函数里的代码改为this.list = [1, 1, 1]，会发现还是打出了’App.vue finish re-render’的日志，虽然list的值没变，但页面仍然重新渲染了，这是因为 this.list 的指针指向发生了改变。

问：什么时候进updated方法？
答：只有事先设置好的data变量如arrData改变并且要在页面重新渲染{{ arrData }}完成之后,才会进updated方法，只改变arrData但不渲染页面是不会进的.

data:{arrData:[1，2，3]
},updated : function(){console.log("1==我会先执行");this.$nextTick(function(){//在下次DOM更新循环结束之后执行这个回调。在修改数据之后立即使用这个方法，获取更新后的DOM.console.log("3==我只能等页面渲染完了才会立即执行");})console.log("2==我虽然在最后但会比$nextTick先执行")}

三、拓展阅读

《Vue进阶（八十三）： updated和watch的区别》
《Vue进阶（八十四）：vue中Computed 和 Watch的使用和区别》

Vue进阶（八十二）：updated 应用详解相关推荐

八十二、ElasticSearch详解（下）
上一篇文章我们通过搜索原理来看了一下ElasticSearch,本文我们主要从数据结构.Mapping.文档操作入手看一下ElasticSearch是如何使用的.关注专栏<破茧成蝶--大数据篇& ...
十二、springboot 详解RestControllerAdvice(ControllerAdvice)
springboot 详解RestControllerAdvice(ControllerAdvice)拦截异常并统一处理简介 @Target({ElementType.TYPE}) @Retenti ...
十二张图详解淘宝架构变迁
创立之初,为了快速上线,抢占市场,淘宝选择了当时流行的LAMP架构,用PHP作为网站开发语言, Linux作为操作系统,Apache作为Web服务器,MySQL为数据库,用了三个月不到的时间淘宝就上线 ...
Kubernetes(十二)Kubernetes ConfigMapSecret详解
一.ConfigMap 官方文档 ConfigMap 概念 ConfigMap的功能在k8s1.2版本中引入的,许多应用程序会从配置文件,命令行参数或环境变量中读取配置信息.ConfigMap API ...
pytorch学习笔记（十二）：详解 Module 类
Module 是 pytorch 提供的一个基类,每次我们要搭建自己的神经网络的时候都要继承这个类,继承这个类会使得我们搭建网络的过程变得异常简单. 本文主要关注 Module 类的内部是怎么样 ...
十二张图详解Redis的数据结构和对象系统
回顾:大数据平台技术栈 (ps:可点击查看),今天就来说说其中的Redis! 本文来自:张狗蛋的技术之路 Redis是一个开源的 key-value 存储系统,它使用六种底层数据结构构建了包含字符串对 ...
tableau可视化数据分析60讲（十二）-过滤器详解
前言关于tableau的高级部分内容,大家可自行订阅专栏 tableau可视化数据分析高级教程 https://blog.csdn.net/wenyusuran/category_9596753.h ...
OpenCV精进之路（十二）：详解掩膜mask
在OpenCV中我们经常会遇到一个名字:Mask(掩膜).很多函数都使用到它,那么这个Mask到底什么呢? 一开始我接触到Mask这个东西时,我还真是一头雾水啊,也对无法理解Mask到底有什么用.经过 ...
无人机项目跟踪记录七十二———降压电路模块详解
下图为降压电路模块: 从左向右介绍,MIC5205_3.3为输出是3.3伏的电压调节器件.VIN接入5伏电压,GND管脚接地,EN使能端接5伏电压代表芯片不受其他信号控制,固定输出3.3V电压.本电路 ...
多线程十二种设计模式详解
文章目录前言多线程程序的评价标准 Single Threaded Execution 模式 Single Threaded Execution 模式简介 Single Threaded Execu ...