一、概述

Vue 的生命周期可以分为 8 个生命周期的执行点，从 new 创建 Vue 对象到对象的销毁，其中 4 个基本的，4 个特殊的，在下图中，红色标注的就是 8 个生命周期的执行点，前四个为基本的，后四个为特殊的

四个基本执行点(数据加载)：

  • beforeCreadted：

    • 实例组件刚创建，元素DOM和数据都还没有初始化，loading事件

  • created：

    • 数据data已经初始化完成，方法也已经可以调用，但是DOM为渲染。在这个周期里面如果进行请求是可以改变数据并渲染，由于DOM未挂载，请求过多或者占用时间过长会导致页面线上空白。

  • beforeMount：

    • DOM未完成挂载，数据也初始化完成，但是数据的双向绑定还是显示{{}}，这是因为Vue采用了Virtual DOM(虚拟Dom)技术。先占住了一个坑。

  • mounted：

    • 数据和DOM都完成挂载，在上一个周期占位的数据把值给渲染进去。一般请求会放在这个地方，因为这边请求改变数据之后刚好能渲染。

四个特殊执行点(数据更新)：

  • beforeUpdate：

    • 只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，如果没有数据改变不执行。

  • updated：

    • 只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。beforeUpdate和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和容易死循环。

  • beforeDestroy：

    • 这个周期是在组件销毁之前执行，在我项目开发中，觉得这个其实有点类似路由钩子beforeRouterLeave,都是在路由离开的时候执行，只不过beforeDestroy无法阻止路由跳转，但是可以做一些路由离开的时候操作，因为这个周期里面还可以使用data和method。比如一个倒计时组件，如果在路由跳转的时候没有清除，这个定时器还是在的，这时候就可以在这个里面清除计时器。

  • destroyed：

    • 组件销毁时触发，vue实例解除了事件监听以及和dom的绑定(无响应了)，但DOM节点依旧存在    组件销毁时进行提示

二、代码实例

在代码编写中，每一个执行过程都有对应的函数事件

!DOCTYPE htmlhtmlheadmeta charset=\"utf-8\" /title/titlescript src=\"js/vuejs-2.5.16.js\"<>/script/headbodydiv id=\"app\"/div/bodyscript/script/html
<html>  <head>    <meta charset="utf-8" />    <title>vuejs生命周期title>    <script src="js/vuejs-2.5.16.js">script>  head>  <body>    <div id="app">      {{message}}    div>  body>  <script>    var vm = new Vue({      el: "#app",      data: {        message: 'hello world'      },      beforeCreate: function() {        console.log(this);        showData('创建vue实例前：beforeCreate', this);      },      created: function() {        showData('创建vue实例后：created', this);      },      beforeMount: function() {        showData('挂载到dom前：beforeMount', this);      },      mounted: function() {        showData('挂载到dom后：mounted', this);      },      beforeUpdate: function() {        showData('数据变化更新前：beforeUpdate', this);      },      updated: function() {        showData('数据变化更新后：updated', this);      },      beforeDestroy: function() {        vm.test = "3333";        showData('vue实例销毁前：beforeDestroy', this);      },      destroyed: function() {        showData('vue实例销毁后：destroyed', this);      }    });    function realDom() {      console.log('真实dom结构：' + document.getElementById('app').innerHTML);    }    function showData(process, obj) {      console.log(process);      console.log('data 数据：' + obj.message)      console.log('挂载的对象：')      console.log(obj.$el)      realDom();      console.log('------------------')      console.log('------------------')    }    //vm.message = "good...";    vm.$destroy();script>html>
!DOCTYPE htmlhtmlheadmeta charset=\"utf-8\" /title/titlescript src=\"js/vuejs-2.5.16.js\"<>/script/headbodydiv id=\"app\"/div/bodyscript/script/html

运行后按 F12，点 Console，可以看到加载时数据的变化

当修改数据后，比如将上面代码注释打开，改变 message 的值，运行后按 F12，点 Console，可以看到加载时数据的变化：

vuejs页面跳转_【Vue 学习】 VueJS 生命周期相关推荐

  1. vue学习之生命周期，钩子函数执行顺序

    vue的生命周期,钩子函授执行顺序 一般的执行顺序(从上往下): beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用 ...

  2. python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...

    昨日内容回顾 0. 组件注意事项!!!data属性必须是一个函数!1. 注册全局组件Vue.component('组件名',{template: ``})var app = new Vue({el: ...

  3. 计算属性与监听器、Vue 实例的生命周期

    本文是我在学习过程中记录学习的点点滴滴,仅仅为了学完之后巩固一下,日后忘记了也可以方便快速的复习. 计算属性与监听器.Vue 实例的生命周期 前言 一.计算属性 1.1.计算属性初步理解 1.2.计算 ...

  4. Vue实例的生命周期

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

  5. React学习：生命周期、过滤器、event、axios-学习笔记

    文章目录 React学习:生命周期.过滤器.event.axios-学习笔记 生命周期 过滤器 webapp小例子: event - 和原生JavaScript写法一样的 axios React学习: ...

  6. 第五节：轻松掌握 vue 实例的生命周期

    公众号后台收到不少同学催更新,马上来. 上两节我们都是讲vue的实例,简单创建和定义实例的4个常用选项,没看过的伙伴可以先去看上两节,按顺序学习比较容易掌握. 这一节我们学习vue实例的生命周期,没错 ...

  7. Vue父子组件生命周期

    Vue父子组件生命周期 Vue实例需要经过创建.初始化数据.编译模板.挂载DOM.渲染.更新.渲染.卸载等一系列过程,这个过程就是Vue的生命周期,Vue中提供的钩子函数有beforeCreate.c ...

  8. 7、Vue实例的生命周期钩子（created、mounted、updated、destoryed）

    1.Vue实例 new Vue()创建一个Vue实例 所有的组件其实都是Vue实例 2.Vue实例的生命周期钩子 每个Vue实例在被创建时都要经过一系列的初始化过程 初始化过程 created() 组 ...

  9. vue组件的生命周期和执行过程

    Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...

最新文章

  1. [JAVA EE] JPA技术基础：完成数据列表显示
  2. Science：一种新型玻璃，有望让手机告别碎屏！
  3. 写出漂亮 Python 代码的 20条准则
  4. 关于VS2017使用中常见的几个问题
  5. 【题解】Luogu SP1435 PT07X - Vertex Cover
  6. SpringBoot使用JdbcTemplate案例（学习笔记）
  7. SQL查询语句 select
  8. 自动化测试框架的搭建
  9. C++---内联函数与宏
  10. 安装MySQL-python时发生错误：error: command 'gcc' failed with exit status 1
  11. 小程序下载PDF等类型文件并保存到本地
  12. 最优化学习 数值优化的例子：实现最小二乘法
  13. css宋体代码_css中宋体怎么设置？
  14. 水经注叠加cad_如何下载矢量格式的CAD等高线
  15. HaaS EDU场景式应用整体介绍
  16. python无限循环怎么结束,python的无限循环及退出
  17. Oracle中rank函数详解
  18. 基于Java Servlet图片服务器
  19. 《古诗词里的快意人生》读后感
  20. Vue卡列表中不同卡片显示不同背景颜色

热门文章

  1. Total Physical Response TPR
  2. 阅读宋立恒《AI制胜：机器学习极简入门》第2章：机器学习中的数据预处理
  3. Python学习笔记：创建分数类
  4. 将2019拆分成三个整数的平方和
  5. oracle date引入哪个包,oracle 索引字段包含date类型，使用spring jdbc更新时不走索引，而是走table access full的问题...
  6. 2017.9.6 音量调节 思考记录
  7. 安卓一步一步搭建组件化
  8. 实时体积云渲染(地平线)：二.Perlin噪声和Worley噪声
  9. springboot 日志级别_SpringBoot实战（十三）:Admin动态修改日志级别
  10. android 底部圆角,android 实现部分圆角图片