【Vue 学习】- VueJS 生命周期

一、概述

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 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>

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

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

【Vue 学习】- VueJS 生命周期相关推荐

vue学习之生命周期，钩子函数执行顺序
vue的生命周期,钩子函授执行顺序一般的执行顺序(从上往下): beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用 ...
vuejs页面跳转_【Vue 学习】 VueJS 生命周期
一.概述 Vue 的生命周期可以分为 8 个生命周期的执行点,从 new 创建 Vue 对象到对象的销毁,其中 4 个基本的,4 个特殊的,在下图中,红色标注的就是 8 个生命周期的执行点,前四个为基 ...
python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...
昨日内容回顾 0. 组件注意事项!!!data属性必须是一个函数!1. 注册全局组件Vue.component('组件名',{template: ``})var app = new Vue({el: ...
第五节：轻松掌握 vue 实例的生命周期
公众号后台收到不少同学催更新,马上来. 上两节我们都是讲vue的实例,简单创建和定义实例的4个常用选项,没看过的伙伴可以先去看上两节,按顺序学习比较容易掌握. 这一节我们学习vue实例的生命周期,没错 ...
计算属性与监听器、Vue 实例的生命周期
本文是我在学习过程中记录学习的点点滴滴,仅仅为了学完之后巩固一下,日后忘记了也可以方便快速的复习. 计算属性与监听器.Vue 实例的生命周期前言一.计算属性 1.1.计算属性初步理解 1.2.计算 ...
Vue实例的生命周期
vue实例的生命周期什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已: 生命周期钩子 = 生命周期函 ...
React学习：生命周期、过滤器、event、axios-学习笔记
文章目录 React学习:生命周期.过滤器.event.axios-学习笔记生命周期过滤器 webapp小例子: event - 和原生JavaScript写法一样的 axios React学习: ...
vue组件的生命周期和执行过程
Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...
vue父子组件生命周期顺序_vue父子组件生命周期执行顺序
Parent -- Child1 -- Child2 装载 parent beforeCreate parent created parent beforeMount child1 beforeCre ...

【Vue 学习】- VueJS 生命周期

一、概述

二、代码实例

【Vue 学习】- VueJS 生命周期相关推荐

最新文章

热门文章