vue生命周期钩子函数

#vue生命周期钩子函数| 来源: 网络整理| 查看: 265

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

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

{ {item}} 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");

生命周期函数实例：

{ {item.name}} 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");

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,这样的错误会显得代码非常的冗余。

【本文地址】

vue生命周期钩子函数

vue生命周期钩子函数

今日新闻

推荐新闻