vue生命周期，钩子函数。

vue生命周期

vue的生命周期即vue实例对象从创建到销毁的全过程，可分为四个阶段，每个阶段都有两个钩子函数。
生命周期图示：

生命周期钩子：

1.创建阶段

beforeCreate

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

	<div id="app">
        {{ msg }}
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                msg: "hello world"
            },
            methods: {
                handler(){
                    console.log("handler")
                }
            },
            beforeCreate() {    //1.创建前   
                console.log(this.msg)    //创建之前为undefined
                console.log(this.handler)   //创建之前methods中的也为undefined
                console.log("------beforeCreate-------")
            }
    </script>

在beforeCreate中是拿不到data中的数据的，显示为undefined，methods中的方法也是一样为undefined。

create

在实例创建完成后被立即调用。 在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。如果要在第一时间调用methods中的方法，或者操作data中的数据，可在此钩子中进行操作。
注意：执行此钩子时，挂载阶段还未开始，$el 属性目前不可见。可以在该钩子中发起异步请求

	created(){   //2.创建完成
        // 创建完成以后，data,methods,computed中的值都会放到vm实例对象当中去
          console.log(this.msg)  //显示	hello world
          console.log(this.handler) //显示undefined
          console.log(this.$el)   //需要挂载的元素为undefined
          console.log("------created-------")
    },

2.挂载阶段

beforeMount

在挂载开始之前被调用，此时模板已经编译完成，只是未将生成的模板替换el对应的元素。在此钩子函数中，可以获取到模板最初始的状态。
​ 此时，可以拿到vm.$el，只不过为旧模板

beforeMount(){   //3.挂载之前
    console.log(this.$el)    //拿到的是el中的模板 
     //打印 "<div id="app"> {{ msg }} </div>"
    console.log("------beforeMount-------")
},

mounted

el 被新创建的 vm.$el替换，并挂载到实例上去之后调用该钩子。在该钩子函数中的vm.$el为新模板。执行完该钩子函数后，代表实例已经被完全创建好。
如果要在第一时间，操作页面上的dom节点时，可以在此钩子函数中操作

mounted(){     //4.挂载完成   将虚拟dom中同步到真实dom
	console.log(this.$el)    //内容已经挂载完成
	//打印"<div id="app"> hello world </div>"
 	console.log("------mounted-------")
},

3.数据更新

beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。此时数据已经更新，但是DOM还未更新

beforeUpdate(){
 	//在控制台改变msg的值的时，vm.msg='vue'...
  	console.log(this.msg)   //更新，已经是vue实例已经拿到了这个值，只是页面还不会有变化，打印"vue"
    console.log(this.$el.outerHTML)//打印"<div id="app">hello</div>"
   
    console.log("------beforeUpdate-------")
},

updated

数据更改导致DOM重新渲染后，会执行该钩子函数。此时数据和dom同步。

updated(){
	//在控制台改变msg的值的时，vm.msg='vue'...
	console.log(this.msg)   //打印"vue"
	console.log(this.$el.outerHTML)//打印"<div id="app">vue</div>"
	console.log("------updated-------")
},

4. 销毁阶段

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。 可以在该钩子函数中，清除定时器。

beforeDestroy(){
	clearInterval(this.timer) //实例销毁之前清除定时器
	console.log("------beforeDestroy-------")
},

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除。

destroyed(){
	console.log("------destroyed-------")
}

注意：当销毁之后，仍然可以打印vue中的数据，如msg，handler等，只是与dom解除绑定。此时在更改msg，页面不会有变化，而之前绑定的事件等也不会触发。