一、vue里的生命周期是什么？
vue实例从创建到销毁的过程称之为vue的生命周期
二、vue.js里面的钩子函数
钩子函数 昰什么
相当于回调函数 即让开发者在特定的时候 执行自定义逻辑
1、自定义指令的钩子函数
bind : 让开发者将自定义指令绑定到dom元素上面时 执行自定义逻辑inserted ： 让开发者在元素插入dom树的时候 执行之定义逻辑update ： 让开发者在元素状态发生变化的时候 执行之定义逻辑
2、vue.js生命周期里面一共有8个钩子函数
beforeCreate 实例创建前：vue的实例化对象刚刚创建 但是数据以及方法都还没有设置到这个vue实例上面 所以访问不到created 实例创建后：vue实例创建完毕 并且传入参数 数据 都已经设置到vue上面 ，mount挂载阶段还没开始，$el 属性目前不可见，数据并没有在DOM元素上进行渲染beforeMount：各种数据 组件都已经创建完成 但是还没有开始任何操作 所以获取到的是dom元素mounted：组件挂在到vue对象上面去，el选项的DOM节点 被新创建的 vm.$el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染beforeUpdate：数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理updated：这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行beforeDestory：实例销毁之前调用。destroyed：Vue 实例销毁后调用。调用后，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>Document</title></head><body><div id="app"><p>{{ message }}</p><input type="button" @click="change" value="更新数据" /><input type="button" @click="destroy" value="销毁" /></div></body></html><script src="./lib/vue.js"></script><script>const app = new Vue({el : "#app",data : {message : "时空飞船"},methods : {change() {this.message = "田园生活"},destroy() {app.$destroy();}},beforeCreate () {console.log("beforeCreate");console.log(this.$el);console.log(this.$data);console.log(this.message); },created () {console.log("created");console.log(this.$el);console.log(this.$data);console.log(this.message); },beforeMount () {console.log("beforeMount");console.log(this.$el);console.log(this.$data);console.log(this.message); },mounted () {console.log("mounted");console.log(this.$el);console.log(this.$data);console.log(this.message); },beforeUpdate () {console.log("beforeUpdate");console.log(this.$el);console.log(this.$data);console.log(this.message); },updated () {console.log("updated");console.log(this.$el);console.log(this.$data);console.log(this.message); },beforeDestroy () {console.log("beforeDestroy");console.log(this.$el);console.log(this.$data);console.log(this.message); },destroyed () {console.log("destroyed");console.log(this.$el);console.log(this.$data);console.log(this.message); }})</script>
