彻底理解vue的钩子函数，vue的生命周期理解，什么是vue的生命周期，钩子函数

官方图（官方的图大家总是理解不了）：

使用vue框架，需要在合适的时机做合适的事情，了解了vue对象的生命周期和钩子函数，才能知道，哪些事情应该咋哪个函数里做。

一、vue的生命周期的理解

生命周期

用人举例说明：

生命周期就是一个人的一生，此处我需要说的没有人情一点（哈哈）。

从人的出生，到成长，到工作，到死亡，就是人的一生，也叫一个人的生命周期。

2. 对象的生命周期

在程序开发中，对象的生命周期就是：从对象的创建，到使用对象，到对象的消亡整个过程。

用人和对象进行类比（此处没有人性）：

人	程序中的对象
人出生	New对象
人工作（ps：要人的目的就是为了工作，如果一个人不工作，不为国家做贡献，那就不是合格的人，活着没有意义）	使用对象的方法和属性（ps：new的对象的目的就是为了用它，用对象主要就是使用对象的方法和属性）
人死亡（ps：人没有用了，那就“去死吧”）	对象使用完就该消亡了（过河拆桥，不用了，那就不要了。）

3. Vue的生命周期

Vue实例，vue组件实例都是vue对象，也是对象。所以，vue的生命周期和对象的生命周期是同样的道理

二、vue生命周期经历的阶段

生命周期是有不同的阶段的，就像人一样，有幼儿期，童年期，少年期，青年期，中年期，老年期。每个阶段应该做不同的事情，但是每个人做的事情又不尽相同。

Vue对象的生命周期也分不同的阶段，不同的阶段也可以做不同的事情，但是不同的vue（组件）对象在不同的阶段做的事情也不尽相同，所以，每个vue组件的代码不相同。

Vue生命周期经历哪些阶段：

总体来说：初始化、运行中、销毁
详细来说：开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程

三、生命周期经历的阶段和钩子函数

实例化vue(组件)对象：new Vue()
初始化事件和生命周期 init events 和 init cycle
beforeCreate函数：

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

即此时vue（组件）对象被创建了，但是vue对象的属性还没有绑定，如data属性，computed属性还没有绑定，即没有值。

此时还没有数据和真实DOM。

即：属性还没有赋值，也没有动态创建template属性对应的HTML元素（二阶段的createUI函数还没有执行）

4. 挂载数据（属性赋值）

包括属性和computed的运算，

5. Created函数：

vue对象的属性有值了，但是DOM还没有生成，$el属性还不存在。

此时有数据了，但是还没有真实的DOM

即：data，computed都执行了。属性已经赋值，但没有动态创建template属性对应的HTML元素，所以，此时如果更改数据不会触发updated函数

如果数据的初始值就来自于后端，可以发送ajax，或者fetch请求获取数据。

6. 检查

1）检查是否有el属性
检查vue配置，即new Vue() 里面的el项是否存在，有就继续检查template项。没有则等到手动绑定调用vm.$mount()

完成了全局变量$el的绑定。

2）检查是否有template属性

检查配置中的template项，如果没有template进行填充被绑定区域，则被绑定区域的el对象的outerHTML（即整个#app DOM对象，包括<div id=”app” >和</div>标签）都作为被填充对象替换掉填充区域

即：如果vue对象中有 template属性，那么，template后面的HTML会替换$el对应的内容。如果有render属性，那么render就会替换template。

即：优先关系时： render > template > el

vue中el属性，template属性，render函数的优先级

7 beforeMount函数：

模板编译(template)、数据挂载(把数据显示在模板里)之前执行的钩子函数

此时 this.$el有值，但是数据还没有挂载到页面上。即此时页面中的{{}}里的变量还没有被数据替换

8.模板编译：用vue对象的数据（属性）替换模板中的内容

9. Mounted函数：

模板编译完成，数据挂载完毕

即：此时已经把数据挂载到了页面上，所以，页面上能够看到正确的数据了。

此处虽然也可以发送异步请求，但是，没有created早，所以，会显得比较缓慢，所以，建议，在created里发送请求。

10. beforeUpdate函数：

组件更新之前执行的函数，只有数据更新后，才能调用（触发）beforeUpdate，注意：此数据一定是在模板上出现的数据，并且改数据值修改前后不一样。否则，不会，也没有必要触发组件更新（因为数据不出现在模板里，数据也没有改变，就没有必要再次渲染）

数据更新了，但是，vue（组件）对象对应的dom中的内部（innerHTML）没有变，所以叫作组件更新前

11. updated函数：

组件更新之后执行的函数

vue（组件）对象对应的dom中的内部（innerHTML）改变了，所以，叫作组件更新之后

12. activated函数：keep-alive组件激活时调用

13. deactivated函数：keep-alive组件停用时调用

14. beforeDestroy：vue（组件）对象销毁之前。

在这个生命周期钩子函数里，可以销毁定时器，因为定时器是全局的，属于window对象的，所以，组件销毁时，并不会销毁定时器

15. destroyed：vue组件销毁后

四、测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue生命周期学习</title></head>
<body><div id="app"><h1>{{message}}</h1><h1>count:{{count}}</h1></div><input id="btn01" type="button" value="测试" />
</body>
<script type="text/javascript" src="js/vue.min.js" ></script>
<script>var vm = new Vue({el: '#app',data: {message: 'Vue的生命周期',age:2},computed:{count:function(){return this.age+1;}},
//  template:"<p>vue对象中的template的内容</p>",
//  render: function(createElement) {
//      return createElement('h1', 'this is createElement')
//  },beforeCreate: function() {console.group('------beforeCreate创建前状态------');console.log("%c%s", "color:red" , "el     : " + this.$el); //undefinedconsole.log("%c%s", "color:red","data   : " + this.$data); //undefined console.log("%c%s", "color:red","count   : " + this.count); //undefined console.log("%c%s", "color:red","message: " + this.message) },created: function() {console.group('------created创建完毕状态------');console.log("%c%s", "color:red","el     : " + this.$el); //undefinedconsole.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 console.log("%c%s", "color:red","count   : " + this.count); //undefined console.log("%c%s", "color:red","message: " + this.message); //已被初始化},//完成了el的绑定beforeMount: function() {console.group('------beforeMount挂载前状态------');console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化console.log(this.$el.innerHTML);    console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  console.log("%c%s", "color:red","message: " + this.message); //已被初始化  },mounted: function() {console.group('------mounted 挂载结束状态------');console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化console.log(this.$el);    console.log(this.$el.innerHTML);    console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化console.log("%c%s", "color:red","message: " + this.message); //已被初始化 },beforeUpdate: function () {console.group('beforeUpdate 更新前状态===============》');console.log("%c%s", "color:red","el     : " + this.$el);console.log(this.$el.innerHTML);console.log("%c%s", "color:red","data   : " + this.$data.message); console.log("%c%s", "color:red","message: " + this.message); },updated: function () {console.group('updated 更新完成状态===============》');console.log("%c%s", "color:red","el     : " + this.$el);console.log(this.$el.innerHTML);   console.log("%c%s", "color:red","data   : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); },
//  beforeDestroy: function () {
//    console.group('beforeDestroy 销毁前状态===============》');
//    console.log("%c%s", "color:red","el     : " + this.$el);
//    console.log(this.$el);
//    console.log("%c%s", "color:red","data   : " + this.$data);
//    console.log("%c%s", "color:red","message: " + this.message);
//  },
//  destroyed: function () {
//    console.group('destroyed 销毁完成状态===============》');
//    console.log("%c%s", "color:red","el     : " + this.$el);
//    console.log(this.$el);
//    console.log("%c%s", "color:red","data   : " + this.$data);
//    console.log("%c%s", "color:red","message: " + this.message)
//  }});document.getElementById("btn01").onclick = function(){vm.message="改了";}

五、模拟vue的构造函数（部分代码）

myVue.js

class MyVue{constructor(obj){//默认值let defaultObj={data: null,computed:null,watch:null,beforeCreate:function(){},created:function(){},beforeMount:function(){},mounted:function(){}}for(let key in defaultObj){obj[key]?this[key]=obj[key]:this[key]=defaultObj[key];}//对象创建完毕已经有this了。this.beforeCreate();    //挂载数据：//1）、把传入的data属性的值赋给thisif(obj.data){for(let key in this.data){this[key] = obj.data[key];} this.$data = obj.data;//设置全局变量}//2）、计算属性        if(obj.computed){for(let key in obj.computed){this[key] = obj.computed[key].call(this);}}      //created函数this.created();//检查是否有el属性if(obj.el){this.el = $(obj.el);this.$el = $(obj.el);//设置全局变量}//检查是否有template属性if(this.template){//this.template = obj.template;
//          动态创建template 里所有的html元素}//beforeMonutethis.beforeMount();//用vue对象的数据（属性）替换模板中的内容//1)、替换data中的数据let html = this.el.innerHTML;             for(let key in this.data){//用属性值替换，属性名（页面上用双花括号包起来的）html=html.replace(new RegExp("{{"+key+"}}","g"),this[key]);}  //2)、替换computed中的数据             for(let key in this.computed){//用属性值替换，属性名（页面上用双花括号包起来的）html=html.replace(new RegExp("{{"+key+"}}","g"),this[key]);}  this.el.innerHTML = html;//mounted函数：this.mounted();}addWatch(){}//数据双向绑定//
}function $(str){//#box .cls  pif(str.charAt(0)=="#"){return document.getElementById(str.substring(1));}else if(str.charAt(0)=="."){return document.getElementsByClassName(str.substring(1));}else{return document.getElementsByTagName(str);}
}

html代码：

<body>

<h1>{{message}}</h1>

<h1>count:{{count}}</h1>

</div>

</body>

var vm = new MyVue({

el: '#app',

data: {

message: 'Vue的生命周期',

age:1

computed:{

count:function(){

return this.age+1;

}

beforeCreate: function() {

console.group('------beforeCreate创建前状态------');

console.log("%c%s", "color:red" , "el : " + this.$el); //undefined

console.log("%c%s", "color:red","data : " + this.$data); //undefined

console.log("%c%s", "color:red","message: " + this.message)

created: function() {

console.group('------created创建完毕状态------');

console.log("%c%s", "color:red","el : " + this.$el); //undefined

console.log("%c%s", "color:red","data : " + this.$data); //已被初始化

console.log("%c%s", "color:red","message: " + this.message); //已被初始化

//完成了el的绑定

beforeMount: function() {

console.group('------beforeMount挂载前状态------');

console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化

console.log(this.$el);

console.log(this.$el.innerHTML);

console.log("%c%s", "color:red","data : " + this.$data); //已被初始化

console.log("%c%s", "color:red","message: " + this.message); //已被初始化

mounted: function() {

console.group('------mounted 挂载结束状态------');

console.log("%c%s", "color:red","el : " + this.$el); //已被初始化

console.log(this.$el);

console.log(this.$el.innerHTML);

console.log("%c%s", "color:red","data : " + this.$data); //已被初始化

console.log("%c%s", "color:red","message: " + this.message); //已被初始化

}

})

彻底理解vue的钩子函数，vue的生命周期理解，什么是vue的生命周期，钩子函数相关推荐

Vue钩子函数中的this为什么能指向Vue的实例而不是指向传入的参数options（Vue源码解读）
起因先看一段Vue的代码,在Vue的原型链上增加了一个setData方法,然后实例化Vue对象,传入一个Object类型的参数 Vue.prototype.setData = function (k ...
vue中的组件导航守卫，个人理解
vue中组件导航守卫 beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave 今天有遇到一个问题,就是在一个页面新增模块按钮和编 ...
vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 "react 是不是比 vue 牛皮,为什么?" 的问题,Vue.js 作者尤雨溪12月4日正面回应了该 ...
微信小程序和vue双向绑定哪里不一样_个人理解Vue和React区别
本文转载自掘金,作者:binbinsilk, 监听数据变化的实现原理不同 Vue 通过 getter/setter 以及一些函数的劫持,能精确知道数据变化,不需要特别的优化就能达到很好的性能 Reac ...
vue render函数_Vue原理解析（一）：Vue到底是什么？
Vue,现在前端的当红炸子鸡,随着热度指数上升,实在是有必要从源码的角度,对它功能的实现原理一窥究竟.个人觉得看源码主要是看两样东西,从宏观上来说是它的设计思想和实现原理:微观上来说就是编程技巧,也就 ...
[vue] 说说你对provide和inject的理解
[vue] 说说你对provide和inject的理解通过在父组件中inject一些数据然后再所有子组件中都可以通过provide获取使用该参数,主要是为了解决一些循环组件比如tree, menu, ...
[vue] 说说你对vue的表单修饰符.lazy的理解
[vue] 说说你对vue的表单修饰符.lazy的理解 input标签v-model用lazy修饰之后,vue并不会立即监听input Value的改变,会在input失去焦点之后,才会触发input ...
[vue] 说说你对SPA单页面的理解，它的优缺点分别是什么？
[vue] 说说你对SPA单页面的理解,它的优缺点分别是什么? 介绍:SPA应用就是一个web应用,可理解为:是一种只需要将单个页面加载到服务器之中的web应用程序.当浏览器向服务器发出第一个请求时, ...
总结Vue第一天~简单介绍、基本知识、辅助函数和js数组的高阶函数
目录 vue中文官网一.简单介绍: (1)vue.js :本质就是一个js 核心类库[跟咱使用的其他组件插件而安装他们]: ■ 安装方式: (2)小demo了解一下vue.js: (3)响应式: 二 ...
vue实现多行数据提交_2020年大厂面试指南 Vue篇
点击蓝字「前端小苑」关注我导读 vue的一些基础知识,以及相关实现原理,一直是面试中比较热门的题目,本文梳理了常见的Vue面试题. 注意:关于底层实现原理,建议最好还是参照源码进行学习,有些原理相 ...

彻底理解vue的钩子函数，vue的生命周期理解，什么是vue的生命周期，钩子函数

彻底理解vue的钩子函数，vue的生命周期理解，什么是vue的生命周期，钩子函数相关推荐

最新文章

热门文章