黑马vue---37-38、vue实例的生命周期

一、总结

一句话总结:

created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板
mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示

生命周期中我们最常用的两个函数

1、生命周期钩子 和 生命周期函数 和 生命周期事件 三者之间的关系?

生命周期钩子 = 生命周期函数 = 生命周期事件

2、vue创建期间的生命周期函数 有哪些?

beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性
created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板
beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中
mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示

3、vue运行期间的生命周期函数 有哪些?

beforeUpdate:状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点
updated:实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!

4、vue销毁期间的生命周期函数 有哪些?

beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

5、如果要通过某些插件操作页面上的DOM节点了,最早要在哪个生命周期函数中操作?

mounted中

6、vue由创建阶段到运行阶段的标志是什么?

只要执行完了mounted,就表示整个Vue 实例已经初始化完毕了;此时,组件已经脱离了创建阶段;进入到了运行阶段

7、vue运行阶段的生命周期函数只有两个:beforeUpdate 和updated这俩事件,这两个函数一般执行多少次?

会根据 data数据的改变,有选择性的触发0次到多次

8、vue生命周期中的挂载(mounted)指的是什么?

将编译好的模板挂载到页面指定的容器中

9、beforeUpdated的触发时机是什么?

vue里面的数据被更新

二、内容在总结中

  • 什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!
  • 生命周期钩子:就是生命周期事件的别名而已;
  • 生命周期钩子 = 生命周期函数 = 生命周期事件
  • 主要的生命周期函数分类:
  • 创建期间的生命周期函数:

    • beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性
    • created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板
    • beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中
    • mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示
  • 运行期间的生命周期函数:
    • beforeUpdate:状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点
    • updated:实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!
  • 销毁期间的生命周期函数:
    • beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
    • destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

 

黑马vue---37-38、vue实例的生命周期的更多相关文章

  1. 第4章-Vue.js 交互及实例的生命周期

    一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...

  2. Vue学习1:实例及生命周期

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue.js 1.x 和 2.x 实例的生命周期

    在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中.当实例化后将经历创建.编译.销毁三个主要阶段. 以下是Vue.js 1.x  实例的生命周期图示: Vue.js 1 ...

  4. 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  5. Vue.js-07:第七章 - Vue 实例的生命周期

    一.前言  在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...

  6. Vue2.5笔记:Vue的实例与生命周期

    理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们才行利用它进行一些列的操作. 首先 Vu ...

  7. vue实例的生命周期

    Vue实例的生命周期也就是这个实例从出生到死亡的过程,所以我在文档原图上把这个周期大致分为创建过程 | 运行过程 | 销毁过程三个阶段,不同结果或又分为一些小的阶段 在第一个阶段,创建阶段,会完成Vu ...

  8. 浅析vue实例的生命周期(生命周期钩子)

    “每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...

  9. 从零开始学 Web 之 Vue.js(三)Vue实例的生命周期

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. css之弹性盒模型

    弹性盒子(Flexible Box/filebox)是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子 ...

  2. vue去哪儿网项目环境配置

     一.首先安装node.js 根据自己的(windows或mac)系统进行安装node,在开发环境中一般安装LTS版本.安装成功后,在终端输入"node -v"和"npm ...

  3. 2019 GIAC-全球互联网架构大会课件

    百度云:https://pan.baidu.com/s/1Lt40UTP3hCIVS7LhPl2bKw密码:ovrh

  4. impala 下的SQL函数

    #把时间转化成时间戳select cast('1966-07-30' as timestamp);select cast('1985-09-25 17:45:30.005' as timestamp) ...

  5. 安卓已过时的ProgressDialog对话框

    private ProgressDialog mDialog; private Handler mHandler; //初始化Handler //初始化 mDialog = new ProgressD ...

  6. window.onload 和doucument.ready执行顺序

    浏览器渲染时 首先解析DOM结构 (同时在发送请求 去请求其他资源 比如图片 视频 等 ) DOM结构解析完毕 这个时候jQuery看准时机在这里添加了监听 所以Ready方法执行很早,可能会引起其他 ...

  7. vuejs开发流程

    https://www.cnblogs.com/yexiaowang/p/8489250.html

  8. windows 下sublime text 3 配置python 环境详解

    这我们的环境已经安装了python 3.7.1解释器和sublime text 3 编辑器 一.package control 安装 首先我们打开sublime text 3 ——>Tools— ...

  9. 07_Azkaban工作流调度器简介及其安装

    Azkaban介绍 Azkaban是一个Linkedin开源的一个批量工作流任务调度器.用于在一个工作流内以一个特定的顺序运行一组工作和流程. Azkaban定义了一种KV文件格式来建立任务之间的依赖 ...

  10. laravel本地开发环境的安装及配置 - Windows:安装 Laravel Homestead 虚拟机

    一.安装 VirtualBox-5.2.22-126460-Win.exe 和 vagrant_2.2.2_x86_64.msi(可视化安装包安装); 安装在D盘 二.导入 Homestead Vag ...