Vue - 生命周期钩子理解 (8个常规钩子 + 2个额外钩子)

Vue 生命周期钩子(8 + 2)

vue的生命周期钩子总共有八个 我把他分成两部分

页面渲染前

<body>
    <!-- HTML结构 -->
    <div id="app" ref="appRef">
        {
     {
      msg }}
        <button @click="msg='我爱你们'">点我修改msg</button>
    </div>
</body>
<script>
 var app = new Vue({
     
 	//el:挂载点
	el: '#app',
	//data: 要渲染的数据
	data: {
     
		msg: '我是小王几!',
	},
// vue实例在创建
 beforeCreate(){
     
 	console.log('beforeCreate: ' + 1);
 	console.log(this.msg);		// undefined
 	console.log(this.$el);		// undefined
 	// 这个时候就可以获取到DOM中的元素了 但是vue的data还没有创建 也还没完成el的挂载
 },
 // vue实例完成创建
 created(){
     
 	console.log('created: ' + 2);;
  	console.log(this.msg);		// 我是小王几!
 	console.log(this.$el);		// undefined
 	// 这个时候 data 创建完毕 -> 就可以拿到 data中的数据了 但是这些数据还没有渲染到页面
 	这里一般用于 页面加载前的 接口请求(数据获取)
 },
 // 挂载前
 beforeMount(){
     
 	console.log('beforeMount: ' + 3);
   	console.log(this.msg);		// 我是小王几!
 	console.log(this.$el);		// 可以获取挂载点的Dom元素
 	// 创建el --> 读取 vue 需要渲染的dom范围   此时页面还没有被渲染 
 },
 // 完成初始挂载
 mounted(){
     
 	console.log('mounted: ' + 4);
 	// data 数据渲染到页面中
 	这里一般会写一些 进入页面的 dom 操作
}
以上四个钩子都只会执行一次 (页面加载)
打印结果
从打印结果可以看出 生命周期钩子的执行是有顺序的

Vue - 生命周期钩子理解 (8个常规钩子 + 2个额外钩子)_第1张图片

页面渲染后

// data 中任何数据改变
beforeUpload(){
     
	console.log('beforeUpdate: ' + 5);
	// 监听数据变化, 但是没有渲染
	console.log(this.msg)	// 我想大保健
	点击按钮 改变msg的值 在这个函数里 msg就已经完成修改了 但是还没有渲染到页面
},
// 渲染修改后的数据
upload(){
     
	console.log('updated: ' + 6);
	// 完成修改后数据的渲染
	// 这个跟上一个钩子都会 多次执行 只要 data 中的数据改变就会执行
},
断点 打印结果

Vue - 生命周期钩子理解 (8个常规钩子 + 2个额外钩子)_第2张图片
Vue - 生命周期钩子理解 (8个常规钩子 + 2个额外钩子)_第3张图片Vue - 生命周期钩子理解 (8个常规钩子 + 2个额外钩子)_第4张图片

// 销毁前
beforeDestroy(){
     
	console.log('beforeDestroy: ' + 7);
	// 主动调用 app.$destroy() 可以执行这一步 (app --> vue实例)
	//销毁 : 这里的销毁是解除 data 与 el 的关联 --> 修改data中的数据是不会再被渲染到页面上的(可以理解成 离婚了 你做什么都 与我无瓜)
	这里 一般做一些善后工作  (比如清空定时器)
},
// 销毁后
destroyed(){
     
	console.log('destroyed: ' + 8);
	console.log(document.getElementById('app'));	// 可以获取 DOM 元素
    console.log(this.$refs.appRef);	//undefined
    console.log(this.msg);	// 我是小王几!	--> 还可以访问 methhods/data
	// 此时还可以获取 Dom 的元素 但是 用ref绑定的不行
}
</script>
打印结果

Vue - 生命周期钩子理解 (8个常规钩子 + 2个额外钩子)_第5张图片

这里要注意 在vue的钩子函数中不要用箭头函数!!!!!

  • 用箭头函数的话 this 的指向就成了Window了
  • 用function : 钩子中的this指向 vue实例

额外钩子 – 被标签缓存的组件 就会有以下钩子

// 被 keep-alive 缓存的组件激活(显示)时
activated () {
     
	// 第一次执是在 mounted 之后
	// 被缓存的组件 再次显示 时时不会执行 页面渲染前的生命周期四个钩子的 而是会执行这个钩子
},
// 被 keep-alive 缓存的组件停用(隐藏)时
deactivated () {
     
	// 被缓存的组件 停用(隐藏)时 是不会执行生命周期钩子销毁的那两个钩子的
	// 所以被缓存的组件 在这个钩子 进行善后工作
}

你可能感兴趣的:(vue,vue,javascript)