vue 的钩子函数

vue 的生命周期

• beforeCreate 实例初始化后 进行数据观测及事件的配置
• created 表示实例已经创建完成和被调用 响应式属性和方法已经配置完成（可以拿到data内的数据）
  • 一般在这个函数内进行数据资源的请求–ajax请求
• beforeMount 挂载前，确定是否设置el选项（vm.$mount），是否有template选项，若有则渲染template，若没有则渲染外部html
• mounted 挂载后，可以获取到DOM元素
• beforeUpdate 更新前
• updated 更新后，依赖于DOM操作，若更新data中的数据，可能会陷入死循环
• beforeDestroy 销毁前，通过vm.$destory()
• destroyed 销毁后，进行一些优化操作，例如清空定时器，销毁子组件，解除事件的绑定等

在钩子函数中不能使用箭头函数，因为箭头函数内是没有this的

let vm = new Vue({
    data:{
      return {
      	msg:10  
      }  
    },
	el:"#app",
	template:`<div>123</div>`,
	beforeCreate(){
    	console.log('创建前')
	},
	created(){
        //获取到数据，ajax请求
		console.log('创建后')
	},
    beforeMount(){
        consoloe.log('挂载前')
    },
	mounted(){
        //操作DOM元素
        console.log('挂载后')
    },
	beforeUpdate(){
        console.log('更新前')
    },
	updated(){
        //页面数据的更新
        console.log('更新后')
    },
	beforeDestroy(){
        console.log('销毁前')
    },
	destroyed(){
        cosole.log('销毁后')
    }
})