Vue-生命周期函数

生命周期函数

相当于是一种特殊事件,当vm实例在整个运行的过程中,会在不同的时期去执行特定的函数,这样的函数就是vue的生命周期函数

beforeCreate created beforeMount mounted destory/x这些钩子都只执行一次

beforeUpdate updated第一次构建不会调用,以后每次data被更新了就会调用

beforeDestroy destroyed 销毁的方式有两种:用户关闭和代码

this.$destroy()//销毁vm实例

 

 

new Vue({
				el:"#app",
				data:{
					msg:"hello",
					url:"66666",
					count:0
				},
				methods:{
					des(){
						this.$destroy()
					},
					change1(){
						this.count++
						this.url="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1662397200&t=873657ddc05e966309998f18814a9e54"
					}
				},
				filters:{},
				computed:{},
				watch:{},
				directives:{},
				
				//钩子函数: 生命周期函数  (c语言中有一类系统回调的函数然后执行业务 叫做钩子)
				//在某一种条件成立的时刻 系统会去调用的vue中设定的函数 这些函数都叫做:生命周期函数 
				//今天主要是学习vue中组件8个
				//当前vm实例在创建到销毁的过程中  会去调用的函数:
				beforeCreate(){
					//能否网络请求?
					//能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的
					
					//能否网络请求数据 然后设置到数据源中?
					//不能设置到数据源中,因为这个钩子中 this还在创建
										
					//这个在项目中干什么?
					//只要不是用于页面渲染
					//预加载图片: 网页中同源加载的优化(同一个页面中img script等等 src属性去请求资源)
					new Image().src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1662397200&t=873657ddc05e966309998f18814a9e54"
					//预加载工具
					//第三方工具的加载
					
					//这个函数在运行时 vm正在创建中:劫持data,methods 也就是 this对象中还不能访问到数据
					console.log("beforeCreate",this.msg,this.change1,this)										
				},
				created(){
					//能否网络请求?
					//能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的
					//能否网络请求数据 然后设置到数据源中?
					//可以设置到数据源中,因为这个钩子中 this已经创建完毕了
					//这个在项目中干什么?
					//请求首屏数据
					
					//vm对象已经创建完毕了,但是它(vm)还没有挂载到DOM树中
					//这个函数可以操作this对象了  但是无法操作DOM
					console.log("created",this.msg,this.change1)					
				},
				beforeMount(){
					//渲染前的操作
					//vm对象已经创建完毕了,在挂载之前触发的钩子
					//这个函数可以操作this对象了  但是无法操作DOM
					console.log("beforeMount")
				},
				mounted(){
					//vm已经挂载到页面了
					//请求首屏数据,请求时页面已经出来了					
					console.log("mounted")
				},
				beforeUpdate(){
					//这两个钩子中 不能网络请求新数据 去更新数据源
					//会导致死循环
					
					//数据源已经更新了,页面重新渲染前(并不是数据更新前) 触发的钩子
					console.log("beforeUpdate",this.url)
				},
				updated(){
					//页面已经重新渲染了触发的钩子
					console.log("updated")
				},
				
				beforeDestroy(){
					
					//vm对象销毁之前触发的钩子,this还在  可以做最后的操作
					//保存用户的行为配置文件:播放器的进度 等等
					console.log("beforeDestroy",this.msg)
				},
				destroyed(){
					//后面在webpack环境下操作 无法操作this
					//往往把当前组件中计时器清除了  可以把body的滚动条滚到顶部
					console.log("destroyed",this.msg)
				}				
			})