vue的生命周期一、什么是vue的生命周期 vue每个组件都是独立的个体，都有各自的生命周期。 vue实例组件从开始创建

一、什么是vue的生命周期

vue每个组件都是独立的个体，都有各自的生命周期。

vue实例组件从开始创建、初始化数据、预编译、挂载、更新、销毁的整个过程，我们称之为vue的生命周期。 vue3之前，vue的生命周期函数分为四个阶段分别为：

beforeCreate/created、beforeMount/mounted、beforeUpdate/updated、beforeDestory/destoryed。（详见生命周期图）

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

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

在挂载开始之前被调用：相关的 render 函数首次被调用，只在虚拟DOM生成HTML。

在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

在实例销毁之前调用。实例仍然完全可用。

在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

beforeCreate、created、beforeMounted、mounted

beforeCreate（父）、created（父）、beforeMounted（父）、beforeCreate（子）、created（子）、beforeMounted（子）、mounted（子）、mounted（父）

beforeUpdate（父）、beforeUpdate（子）、updated（子）、updated（父）

beforeUpdate（父）、updated（父）

beforeDestory（父）、beforeDestory（子）、destoryed（子）、destoryed（父）

在created钩子中可以对data数据进行操作，这个时候可以进行ajax请求将返回的数据赋给data。
虽然updated函数会在数据变化时被触发，但却不能准确的判断是那个属性值被改变，所以在实际情况中用computed或match函数来监听属性的变化，并做一些其他的操作。
在mounted钩子对挂载的dom进行操作，此时，DOM已经被渲染到页面上。
在使用vue-router时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载或切换状态的时候进行某些操作，可以使用activated钩子触发。
所有的生命周期钩子自动绑定 this 上下文到实例中，所以不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是导致this指向父级。
不要在updated进行data数据修改的操作，会形成死循环。