vue生命周期钩子函数

钩子函数：在特定的生命周期会被执行的函数。

生命周期：
             四个生命阶段：
             1.创建阶段    数据劫持/代理     钩子函数：beforeCreate  created
             2.挂载阶段   模板编译成标准的html结构，并且挂载到页面上  beforeMount   mounted
             3.更新阶段    状态的改变  引起   视图的改变  beforeUpdate  updated(可以多次触发  其他只触发一次)
             4.卸载/销毁阶段  app的销毁 beforeUnmout  unmouted

<div id="app">
			<div>
				<ul>
					<li v-for="(item,index) in arr">{{item}}</li>
				</ul>
			</div>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js"></script>
		<script>
			var app=Vue.createApp({
				data:function(){
					return{
						arr:[]
					}
				},
				methods: {
				},
				beforeCreate(){
					//基本上不用  this指向不清晰   数据也没有劫持
					console.log("创建前");
				},
				created(){
					//当created执行时创建阶段已经完成  data中的数据已经被劫持了
					console.log("创建完成");
					this.arr=[1,2,3,4,5,6];
				},
				beforeMount(){
					console.log("挂载前");
					//挂载前  $el还是null 因此还没有把template渲染成DOM
					console.log(this.$el);//null
				},
				mounted(){
					console.log("挂载完成");
					//可以用于获取vue渲染出来的dom节点
					console.log(this.$el);
				},
				beforeUnmout(){
					console.log("销毁前");
				}
				
			});
			app.mount("#app");
		</script>

生命周期函数实例：

<div id="app">
			<ul>
				<li v-for="(item,index) in productList">{{item.name}}</li>
			</ul>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
		<script>
			var app=Vue.createApp({
				data:function(){
					return{
						productList:[]
					}
				},
				methods: {
					
				},
				beforeCreate(){
					//基本上不用  this指向不清晰   数据也没有劫持
					console.log("创建前");
				},
				async created(){
					//当created执行时创建阶段已经完成  data中的数据已经被劫持了
					console.log("创建完成");
                    //同时也可以使用async 和await  简化promise的使用
			        //async 修饰符  配合await
					const res=await axios.get("http://www.xxx.top:8090/product/");
					this.productList=res.data.results;
				}
			});
			app.mount("#app");
		</script>

async函数定义

async函数是使用关键字声明的函数。async 是“异步”的简写，所以应该很好理解 async 用于申明一个 function 是异步的。

async函数一定会返回一个promise对象。如果一个async函数的返回值看起来不是promise，那么它将会被隐式地包装在一个promise中。

async 本身是一个语法糖—>语法糖：带有一定功能的关键字

• 语法糖的作用：能够减少代码量、增加程序的可读性，从而减少程序代码出错的机会

await定义

await 的意思是等待，所以应该很好理解，await 等待某个操作完成。

作用

await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值（await 作用是获取promise.[[promiseValue]]的值）

关于await的注意点

• await 必须写在 async 中

• await 后是一个promise实例对象

三者的区别
promise和 async/await都是解决异步编程的一种方式，但是async/await使得异步代码看起来像同步代码。
函数前面多了一个async关键字。await关键字只能用于async定于的函数内。async函数会隐式地返回一个Promise,该promise的resolve值就是return的值。
为什么async/await更好？
使用async函数可以让代码简洁很多，不需要像Promise一样需要then,不需要写匿名函数处理Promise的resolve的值，也不需要定义多余的data变量，还避免了嵌套代码。

async/await 让 try/catch可以同时处理同步和异步的错误。在下面的示例中，try/catch不能处理JSON.parse的错误，因为它在Promise中,我们需要使用.catch,这样的错误会显得代码非常的冗余。