vue组件生命周期

一、vue组件实例

• “ vue-template-compiler ” 将后缀名为 .vue 的组件编译成 js 文件，放到index.html，交给浏览器识别
• 使用vue组件，就相当于创建一个vue组件实例

二、生命周期

1.生命周期定义

• 如果在生命周期中，需要去执行某些业务功能，则在对应时间点使用生命周期函数
  
  3.官方文档图片解析
• beforeCreate 函数 、created 函数（经常使用 Ajax）–只执行一次
  

<template>
	<div>
	 <h3>---{{ book }}</h3>
	</div>
</template>
------------------------------------------
data(){
	return {
	  // 存储url的数据
	  book:[]
  }
},
methods:{
	// 使用 Ajax 请求,获取数据
	initBookList(){
		const xhr = new XMLHttpRequest()
		xhr.addEventListener('load',function(){
			const result = JSON.parse(xhr.responseText)
			console.log(result)
			this.book=result.data
		})
		xhr.open('GET','url地址')
		xhr.send()
	}
}
beforeCreate(){

},
// created 函数经常调用 methods 的方法，请求服务器的数据
// 把请求的数据 转存到 data 中，供 template 模板渲染时使用
created(){
	this.initBookList()
}

• beforeMount 函数 、 mounted 函数（操作DOM）–最少执行一次，最多n次
  
  

<template>
	<div>
	 <h3 id="myh3">---{{ book }}</h3>
	 <p>message 的值是：{{ message }}</p>
	 <button @click=" message += '-'">修改 message 的值</button>
	</div>
</template>
------------------------------------------
data(){
	return {
	  message:'hello',
	  // 存储url的数据
	  book:[]
  }
},
methods:{
	// 使用 Ajax 请求,获取数据
	initBookList(){
		const xhr = new XMLHttpRequest()
		xhr.addEventListener('load',function(){
			const result = JSON.parse(xhr.responseText)
			console.log(result)
			this.book=result.data
		})
		xhr.open('GET','url地址')
		xhr.send()
	}
}
beforeCreate(){

},
// created 函数经常调用 methods 的方法，请求服务器的数据
// 把请求的数据 转存到 data 中，供 template 模板渲染时使用
created(){
	this.initBookList()
},
beforeMount(){

},
// 如果操作当前组件的 DOM，最早在 mounted 阶段执行
mounted(){
	const dom = document.querySelector(#myh3)
	console.log(dom)
}

• beforeUpdate 函数、updated 函数（操作最新的 DOM 结构） ----若数据未变化，则不会被触发 ，只执行一次

beforeUpdate(){

},
updated(){
}

• beforeDestroy 函数、destroy 函数
  

beforeDestroy (){

},
destroy (){
}