关于vue生命周期

 

 上面这张图也是生命周期顺序 ps(这是在网上找的图看着写的不错就拿来用了，嘻嘻) 

 

 

<template>
  <div>
    <h1 >Vue的生命周期钩子函数</h1>
	<!-- vue的一个组件从创建到销毁会经历一系列特定步骤，称之为声明周期-->
	<!-- 特定步骤执行的回调函数，生命周期钩子函数 -->
	<!-- 4大类 8个特定步骤 创建前后 挂在前后，更新前后，销毁前后 -->
	<!-- 点击按钮num+1 -->
	<!-- 数据发生时页面进行更新 -->
	<button type="button" @click="num++">点击+{{num}}</button>
  </div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return {num:1}
		},
		methods:{
			// ajax请求数据方法
			getList(){
				fetch("url地址")
				.then(res=>res.json())
				.then(res=>{
					console.log("请求的数据",res)
				})
			},
			// 获取浏览器窗口的内部宽高方法
			getWinSize(){
				var w=window.innerWidth;
				var h=window.innerHeight;
				console.log(w,h)
			}
		},
		// 创建前（还未渲染页面）
			beforeCreate() {
				console.log("beforeCreate创建前",this)
			},
			// 创建完毕（常用）在这里面经常做的3种事
			created() {
				console.log("created组件已经创建完毕，没有渲染")
				// 1.发起ajax请求
				this.getList();
				// 2.开启定时器
				this.ind=setInterval(()=>this.num++,2000);
				// 3.监听事件
				window.addEventListener("resize",this.getWinSize);
			},
			// 挂载前
			beforeMount() {
				console.log("beforeMount组件开始挂载")
			},
			// 挂载完毕（常用） 时经常做的2件事
			mounted(){
				console.log("mounted组件挂载完毕")
				// 1.获取dom节点
				console.log(this.$refs.myref)
				// 2.执行基于dom的插件 swiper,wow
			},
			// 销毁前(常用)
			beforeDestroy() {
				console.log("beforeDestroy组件被卸载前")
				// 停止计时器
				clearInterval(this.ind);
				// 结束监听事件
				window.removeEventListener("resize",this.getWinSize);
			},
			// 销毁后
			destroyed() {
				console.log("destroyed组件被卸载")
			},
			// 更新前
			beforeUpdate() {
				console.log("beforeUpdate组件更新前")
			},
			// 更新后
			updated() {
				console.log("beforeUpdate组件更新完毕")
			}
			
	}
</script>