博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue 2.0 生命周期-钩子函数理解
阅读量:4544 次
发布时间:2019-06-08

本文共 1792 字,大约阅读时间需要 5 分钟。

Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行:

    
Title

{

{message}}

查看控制台进行调试:

1. app.show = false;

  修改了data的值,所以会触发beforeUpdate和updated钩子

2. app.$destroy()

  我们发现实例依然存在,但是此时变化已经发生在了其他地方,根据官方文档描述:Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

  可以在进行测试:app.message = "销毁了"测试,发现已经销毁

3. app.message = '注意页面展示dom是否被更新'

  beforeUpdate 与 updated console.log('beforeUpdate == ' + document.getElementsByTagName('p')[0].innerHTML); 看变化;

  beforeUpdate和updated触发时,el中的数据都已经渲染完成,但根据beforeUpdate == "father"而updated == "注意页面展示dom是否被更新"可知,只有updated钩子被调用时候,组件dom才被更新。

 

根据官方文档和例子测试对vue 2.0 生命周期函数总结如下:

  
beforeCreate    
    在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
    此阶段data/methods/el 都不可见
  
created 
    实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。
    然而,挂载阶段还没开始,$el 属性目前不可见。
  
beforeMount 
    在挂载开始之前被调用:相关的 render 函数首次被调用。
    data和el均已经初始化,但从{
{message}}等现象可以看出此时el并没有渲染进数据,el的值为“虚拟”的元素节点
    注意:并且组件中activated 此时激活
  
mounted
    el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
    此时el渲染数据,当有data中数据变化时触发beforeUpdate,updated生命钩子
  
beforeUpdate    
    数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
    此时el中的数据渲染完成,但是页面dom中展示的数据不更新
  
updated 
    由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
    此时el中的数据渲染完成,同时页面dom中展示的数据更新了
  
beforeDestroy   
    实例销毁之前调用。在这一步,实例仍然完全可用。
    注意:并且组件中deactivated 此时激活
  
destroyed   
    Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
  
activated   
    keep-alive 组件激活时调用。(beforeMount :el初始化时候触发)
  
deactivated 
    keep-alive 组件停用时调用。(beforeDestroy:vue实例销毁之前触发)
 
 
以上是个人的理解,如果有什么不对的地方可以一起交流

 

  

 

转载于:https://www.cnblogs.com/changxue/p/8580204.html

你可能感兴趣的文章
Redis 禁用FLUSHALL FLUSHDB KEYS 命令
查看>>
Matlab中imread函数使用报错“不应为MATLAB 表达式”分析
查看>>
MFC ADO数据库操作
查看>>
图像质量评价-NQM和WPSNR
查看>>
面试准备——相关知识
查看>>
每日一字:悟
查看>>
CentOS7.6安装稳定版Nginx
查看>>
LeetCode 1002. Find Common Characters (查找常用字符)
查看>>
建立隐藏管理员用户
查看>>
android设置图文提醒功能
查看>>
ajax跨域提交
查看>>
完成登录与注册页面的前端
查看>>
Mac下source tree 下的安装
查看>>
Q学习原理及例子
查看>>
rpmbuild 源码打包clickhouse,附带打好的rpm包下载地址
查看>>
软件体系结构原理、方法与实践总结
查看>>
2017-2018-1 《程序设计与数据结构》第3周学习总结
查看>>
一些基础语法
查看>>
win10企业版无法访问共享文件夹
查看>>
查行号
查看>>