通俗讲解vue生命周期、钩子函数

网上有长篇很专业的讲述vue生命周期及钩子函数的文章，相信大家都看过不少，本文主要是结合自己的理解，更加通俗易懂。先看官网贴上地址

官网的生命周期图请牢记于心！

• 了解一下：
  客户端渲染过程
  处理 HTML 标记并构建 DOM 树。
  处理 CSS 标记并构建 CSSOM 树。
  将 DOM 与 CSSOM 合并成一个渲染树。
  根据渲染树来布局，以计算每个节点的几何信息。
  将各个节点绘制到屏幕上。

Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。

截图.png

• 首先看下生命周期钩子函数的写法：

比如

mounted: function() {}

或者

mounted() {}

注意点，Vue的所有生命周期函数都是自动绑定到this的上下文上。所以，你这里使用箭头函数的话，就会出现this指向的父级作用域，就会报错。
不要写成这样：

mounted:() => {}

• 生命周期钩子函数详解

beforeCreate()：组件实例刚刚创建，还未进行数据观测和事件配置。
在beforeCreate中拿不到任何数据。

created()：实例已经创建完成，并且已经进行数据的观测和事件配置。
在created中已经可以拿到data中的数据了，但是dom还没有挂载。会判断有无el，如果没有el则停止后面的模板挂载
（在实例创建完成后被立即调用，使用场景:请求和初始化数据，可以访问响应式数据、监听实例事件）

beforeMount()： 挂载/模板编译之前
和 created 拿到的数据相同 在挂载开始之前被调用
虚拟dom已经创建完成，马上就要渲染，在这里做初始数据的获取，可以访问el（挂载根节点）但是无法访问refs（真实节点）

mounted()： 模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示。可以获取到真实的$el
数据、真实dom都已经处理好了，事件也挂载好了

mounted使用场景:常用于获取VNode信息和操作，ajax请求
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

beforeUpdate()： 组件更新之前

updated()：组件更新之后

beforeDestroy()： 组件销毁之前

destroyed()：组件销毁之前

• mounted()和create()的区别与例子：https://blog.csdn.net/xdnloveme/article/details/78035065

image.png

image.jpeg

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，
比如：插件chart.js的使用: var ctx = document.getElementById(ID); 通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。

遇到过的一个问题（组件中）：

created页面还没渲染出来，mounted页面已经渲染了，
cmsIndex中，我在created中获取了getId方法，在子组件中，去监听id的变化，此时第一次监听不到getId方法。因为watch的层级，第一次想在created函数中调用函数的时候，此时，还没有获取到getId方法，就进入watch了。
可以使用vm.$nextTick 和 在mounted里调用，去解决。