vue生命周期函数

vue生命周期函数

• 所有的vue组件都是vue实例，一个组件对应一个实例，并且接收相同的选项对象，一些根实例特有的选项除外
• 实例生命周期也叫做：组件生命周期
• 定义：从组件被创建到组件挂载到页面上运行再到页面关闭组件被销毁期间的所有事件统称为组件的生命周期函数（简称：钩子函数）
• 开发人员可以通过vue提供的钩子函数，让我们写的代码参与到vue的生命周期里面来，让我们的代码在合适的阶段起到相应的作用

钩子函数 - beforeCreate()

• 在实例初始化之前，数据观测和event/watcher事件配置之前被调用
• 组件实例刚被创建，组件属性计算之前，例如data属性，methods属性
• 在此钩子函数下无法获取data中的数据和methods方法
• 目前几乎不使用

钩子函数 - created()

• 组件实例创建完成，属性已绑定，可以使用data中的值，可以调用methods中的方法
• 可在此钩子函数下发送ajax请求本地存储获得数据

	beforeCreate(){
		//无法获取数据和事件
		console.warm("beforeCreate",this.msg,this.fn)
	},
	created(){
		//可以获取
		console.warm('created',this.msg,this.fn)
	}

钩子函数 - beforeMount()

• 在挂载开始之前被调用（挂载：可以理解DOM渲染）

钩子函数 - mounted()

• 挂载结束，DOM完成渲染
• 可在此钩子函数下发送请求操作DOM

	beforeMount(){
		//<h1 id='h1' @click='fn'>{{ msg }}</h1>
		console.log(document.getElementById('h1'))
	},
	created(){
		//<h1 id='h1'>测试</h1>
		console.log(document.getElementById('h1'))
	}

钩子函数 - beforeUpdate()

• 数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前，可以在这个钩子中进一步地更改状态，不会触发附加的重渲染过程
• 此处获取的数据是更新后的数据，但是获取页面中的DOM元素是更新之前的

钩子函数 - updated()

• 组件DOM已经更新，此时可以执行依赖于DOM的操作

	beforeUpdate(){
		//更新之前的值：信息
		console.warm("beforeUpdate",document.getElementById('h1').innerText)
	},
	updated(){
		//更新之后的值：信息1111
		console.warm('updated',document.getElementById('h1').innerText)
	}

钩子函数 - beforeDestroy()

• 实例销毁之前调用，在此钩子函数中实例仍然完全可用
• 可在实例销毁之前执行清理任务，例：清除定时器等

created(){
	this.timerId = setInterval(() => {
		console.log(1111)
	},1000)
},
beforeDestroy(){
	clearInterval(this.timerId)
}

钩子函数 - destroyed()

• 实例销毁后调用，调用后vue实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁