如何只使用一个promise实例
一直搞不懂vue中的生命周期,怎么才能搞清楚?
一直搞不懂vue中的生命周期,怎么才能搞清楚?
关于Vue的生命周期,怎么样才能搞懂,作为web前端程序员,我也用口语化的方式说一说吧,到底什么是Vue的生命周期吧?我个人觉得可以从一下几个方面说说:
1、什么是生命周期?
这个从字面上理解,大家都应该知道,生命周期,就像人的生命一样,从出生到老去的过程。在这个过程,我们在合适的年龄时段里可以做某一些事情。比如小时候爱尿床,走路,上学,工作,娶老婆等等哈哈,大概就这意思。
那么关于Vue的生命周期也是类似,就是Vue实例从创建到销毁的过程,这就是生命周期。专业点说法,也就是从开始创建、初始化数据、编译模版、挂载 Dom -gt 渲染、更新 -gt 渲染、销毁等一系列过程, 我们称这是 Vue 的生命周期。
2、Vue组件有哪些生命周期钩子?
上面已经说了生命周期是从创建-gt销毁的过程,那么这个过程有几个阶段呢?
主要有8个阶段:
创建前/后, 载入前/后, 更新前/后, 销毁前/销毁后。
也就是:
beforeCreate/created、 beforeMount/mounted、 beforeUpdate/updated、boforeDestroy/destroyed
具体每个生命周期钩子详情,内容过多,可以看官网说明了,有生命周期图。
3、生命周期的作用是什么?
知道了生命周期,那么这些生命周期有什么作用呢?
简单点说就是,有了这些生命周期钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
更简单一点说就是: 让我能更好的做一些事情吧。
从上面,我们知道了生命周期,那么接下来就是,我们要知道一些用法,
比如:
1、第一次页面加载会触发那几个钩子函数?
会触发beforeCreate、created、 beforeMount、 mounted这几个钩子函数
2、DOM渲染在哪个周期中就已经完成?
DOM 渲染在 mounted 中就已经完成了
3、异步请求一般在那个周期中调用?
一般推荐在created中做异步请求,当然 beforeMount、mounted 也是可以的。
为什么呢, 通过源码可以看出,因为在这三个钩子函数中,data 已经创建。
4、Vue中内置的方法属性和Vue生命周期的运行顺序是怎么样的?
props gt methods gtdata gt computed gt watch。
当然我们能看懂源码的话是最好的了,就能知道一些为什么了。
比如: 为什么created钩子函数中可以访问到数据?
简单看下源码中有:
而其中的initState(vm)函数的作用就是初始化 props、methods、data、watch、computed 等属性的,所以created可以访问到数据,而beforeCreate就不行。
举一反三,带着很多问题和为什么去看学习,就可以更好地更深地懂它了。也可以看看别人写的文章,因为网上有很多高手分析的文章很不错。
比如,在 mounted 钩子函数中可以访问到 DOM,在 destroy 钩子函数中,我们可以做一些定时器销毁工作等等。