深入浅出 Vue.js 学习笔记--生命周期

前言

Vue.js的整体生命周期可以分为4个阶段:初始化阶段、模板编译阶段、挂载阶段和卸载阶段。初始化阶段结束后,会触发created钩子函数。在created钩子函数与beforeMount钩子函数之间的这个阶段是模板编译阶段,这个阶段在不同的构建版本中不一定存在。挂载阶段在beforeMount钩子函数与mounted期间。挂载完毕后,Vue.js处于已挂载阶段。已挂载阶段会持续追踪状态的变化,当数据(状态)发生变化时,watcher会通知虚拟DOM重新渲染视图。在渲染视图前触发beforeUpdate钩子函数,渲染完毕后触发update钩子函数。当vm.$destory被调用时,组件进入卸载阶段、卸载前会触发beforeDestroy钩子函数,卸载会触发destroy钩子函数。


vue生命周期图示

vue生命周期图示


常见理论

接下来我会以问题的形式来描述vue的生命周期:

1. 什么是vue生命周期

Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,称之为 Vue 的生命周期。

2. vue生命周期的作用是什么

它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3. 第一次页面加载会触发哪几个钩子

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这四个生命周期钩子。

4. 简述每个周期具体适合哪些场景

生命周期钩子的一些使用方法: beforecreate : 可以在这加个loading事件,在加载实例时触发 created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用 mounted : 挂载元素,获取到DOM节点 updated : 如果对数据统一处理,在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom。

5. created和mounted的区别

created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

6. DOM 渲染在 哪个周期中就已经完成

DOM 渲染在 mounted 中就已经完成了。

7. vue生命周期总共有几个阶段

它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后。其中所涉及到的生命周期的钩子有

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

activated, deactivated, errorCaptured

activated

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

deactivated

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

keep-alive

包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

errorCaptured

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

发布了13 篇原创文章 · 获赞 4 · 访问量 1282
展开阅读全文

深入浅出学 Vue 开发

07-27

#### **课程介绍** 前端技术日新月异,每一种新的思想出现,都代表了一种技术的跃进、架构的变化,那么对于目前的前端技术而言,MVVM 的思想已经可以代表当今前端领域的前沿思想理念,Angular、React、Vue 等基于 MVVM 思想的具体实现框架,也成为了人们争相学习的一个热点。而 Vue 作为其中唯一没有大公司支持但却能与它们并驾齐驱并且隐隐有超越同类的趋势,不得不说这种增长让人感到惊奇。 本系列课程内容将会带领大家由浅入深的学习 Vue 的基础知识,了解 Vue 的源码设计和实现原理,和大家一起看一下尤雨溪先生的编程思想、架构设计以及如何进行代码实现。本系列课程内容主要分为三大部分: - Vue 的基础知识:在这一部分将学习 Vue 的基础语法及其源码的实现。例如,Vue 的生命周期钩子如何设计?当声明了一个 directive 时,Vue 究竟执行了什么?为什么只有通过 vue.set 函数才能为响应式对象添加响应式属性?如果我们自己要实现一个响应式的框架的话,应该如何下手、如何思考等。 - Vue 的周边生态:在这一部分将学习 Vue 的周边生态圈,包括有哪些 UI 库可以和 Vue 配合快速构建界面、如何使用 vue-router 构建前端路由、如何使用 Vuex 进行状态管理、如何使用 Axios 进行网络请求、如何使用 Webpack、使用 vue-cli 构建出的项目里的各种配置有什么意义? - 项目实战:在这一部分将会通过一个有意思的自动对话系统来进行项目实战,争取通过这个小项目把学到的知识点进行一个整合。 #### **作者介绍** 刘国栋,资深软件开发工程师、慕课网认证讲师、开源爱好者,目前就职于济南某国企,并且成立了个人工作室,负责前端和移动端的工作。拥有 5 年前端、移动端开发经验,在 JS、Android、iOS 领域有独特的见解,统筹过的多个项目用户数已过千万。

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览