个人主页:前端青山
系列专栏:Vue篇
人终将被年少不可得之物困其一生
依旧青山,本期给大家带来vue篇专栏内容:vue-组件生命周期+网络请求
目录
组件生命周期
1. Vue的生命周期
2. Vue 子组件和父组件执行顺序
3. created和mounted的区别
4. 一般在哪个生命周期请求异步数据
5. keep-alive 中的生命周期哪些
6.vue2的生命周期钩子函数
完整案例 官方解释
网络请求
1.基础语法
2.拦截器
3.取消网络请求
生命周期:指的是Vue组件自其开始创建到其被销毁完毕这段时间范围。
在生命周期的这个范围内,作者将其4个重要阶段,同时作者为了方便开发者指定组件在特定时间做一些特定的操作,对外暴露了一些特定名称的函数,这些函数我们称之为生命周期钩子函数。常用的生命周期钩子函数一共有10个,外加1个不常用的错误边界周期,共11个生命周期函数。本节我们将依据其四个阶段,来学习其中最常见的8个周期函数。
四个阶段
组件创建阶段
beforeCreate
created
组件挂载阶段
beforeMount
mounted
组件更新阶段(如果强制执行该阶段周期,可以this.$forceUpdate())
beforeUpdate
updated
组件销毁阶段(如果期望手动效果组件,可以执行this.$destroy())
beforeDestroy
destroyed
Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。
beforeCreate(创建前):数据观测和初始化事件还未开始,此时 data 的响应式追踪、event/watcher 都还没有被设置,也就是说不能访问到data、computed、watch、methods上的方法和数据。
created(创建后) :实例创建完成,实例上配置的 options 包括 data、computed、watch、methods 等都配置完成,但是此时渲染得节点还未挂载到 DOM,所以不能访问到 $el
属性。
beforeMount(挂载前):在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。此时还没有挂载html到页面上。
mounted(挂载后):在el被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html 页面中。此过程中进行ajax交互。
beforeUpdate(更新前):响应式数据更新时调用,此时虽然响应式数据更新了,但是对应的真实 DOM 还没有被渲染。
updated(更新后) :在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时,组件 DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy(销毁前):实例销毁之前调用。这一步,实例仍然完全可用,this
仍能获取到实例。
destroyed(销毁后):实例销毁后调用,调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。
另外还有 keep-alive
独有的生命周期,分别为 activated
和 deactivated
。用 keep-alive
包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated
钩子函数,命中缓存渲染后会执行 activated
钩子函数。
加载渲染过程:
父组件 beforeCreate
父组件 created
父组件 beforeMount
子组件 beforeCreate
子组件 created
子组件 beforeMount
子组件 mounted
父组件 mounted
更新过程:
父组件 beforeUpdate
子组件 beforeUpdate
子组件 updated
父组件 updated
销毁过程:
父组件 beforeDestroy
子组件 beforeDestroy
子组件 destroyed
父组件 destoryed
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
我们可以在钩子函数 created、beforeMount、mounted 中进行调用,因为在这三个钩子函数中,data 已经创建,可以将服务端端返回的数据进行赋值。
推荐在 created 钩子函数中调用异步请求,因为在 created 钩子函数中调用异步请求有以下优点:
能更快获取到服务端数据,减少页面加载时间,用户体验更好;
SSR不支持 beforeMount 、mounted 钩子函数,放在 created 中有助于一致性。
keep-alive是 Vue 提供的一个内置组件,用来对组件进行缓存——在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
如果为一个组件包裹了 keep-alive,那么它会多出两个生命周期:deactivated、activated。同时,beforeDestroy 和 destroyed 就不会再被触发了,因为组件不会被真正销毁。
当组件被换掉时,会被缓存到内存中、触发 deactivated 生命周期;当组件被切回来时,再去缓存里找这个组件、触发 activated钩子函数。
vue2 生命周期
{{ count }}
xhr xmlHttpRequest
jQuery
$.get
$.post
$.ajax
$.getJSON
fetch,语法:fetch(url,{})
如上一节所说,在Vue组件中如果需要发送网络请求正常需要写在created
生命周期函数中。而之前发送网络请求我们采用的是xhr
或$.ajax()
等较早的技术,Vue的作者推荐开发者在Vue中使用axios
作为网络请求库。axios
具备:
支持Promise
良好的兼容性
支持拦截器 统一处理请求和响应
对json格式的数据处理十分友好
能够根据请求体格式自动设置请求头
当请求体是普通js对象格式时,axios
自动设置请求头为application/json
当请求体是查询字符串时,axios
自动设置请求头为application/x-www-form-urlencoded
支持对请求进行取消
支持restful规范中涉及到的请求动词
axios
是一个第三方库,如果需要在项目中使用则需要先安装:
npm i axios
安装好后即可在项目中的组件里进行使用,例如我们可以按照下面的语法发送一个get请求:
import axios from "axios"
export default {
created(){
axios.get(可带问号参数的请求地址).then(res => {})
// axios的get参数支持与请求地址分离,因此下面的语法也是可以的
// axios.get(不带问号参数的地址,{params: {参数名:值,...}}).then(res => {})
}
}
如果需要使用axios
来发送一个post请求,则:
import axios from "axios"
export default {
created(){
// 请求参数支持:
// - 查询字符串,如:id=1&age=22&name=zhangsan
// - 普通js对象,如:{id: 1,age: 22,name: 'zhangsan'}
// 请求头Content-Type会被根据参数类型自动设置
axios.post(请求地址,参数).then(res => {})
}
}
除了通过axios.*
这种方式进行请求,axios
还支持:
import axios from "axios"
export default {
created(){
axios({
baseURL: 基础地址
url: 请求路径,
method: 请求动词,
data: 参数,
timeout: 超时时间,
headers: {}
// ...
})
}
}
请求的then回调中我们可以获取到结果对象:
{
config:axios请求配置信息
data:响应体
headers:响应头信息
request:xhr请求对象
status:HTTP响应码
statusText: 状态文本信息
}
案例:请使用axios库在组件中访问https://api.i-lynn.cn/college
,并传入参数page
来获取指定页码的数据,随后通过之前学习过的知识点展示在视图上
拦截器主要的作用就是拦截,用于拦截请求和响应:
请求拦截器
用于拦截请求,在请求发出去之前拦截。
响应拦截器
用于拦截响应,在收到响应之后、then之前拦截。
不管是请求拦截器还是响应拦截器,主要的好处体现在后续项目的封装中,到时候我们会对axios进行封装,这样一来,拦截器就成了全局的拦截器了。
在全局的环境下,我们可以通过拦截器做很多有用的操作,例如:
通过请求拦截器去设置统一的请求头
通过响应拦截器中去,可以在这里做错误提示
// 请求拦截器
axios.interceptors.request.use(cfg => {
// 设置请求头
cfg.headers.Abc = "abcdefg"
return cfg
})
// 响应拦截器
axios.interceptors.response.use(res => {
return res.data
})
在开发中还是经常容易遇到的,一般在离开组件的时候可能需要做网络请求的取消操作。在axios中取消网络请求通过cancelToken这个方式进行取消。
获取到source对象,该对象中有俩个成员属性
cancelToken配置项要的值:token
后续取消请求的方法:cancel()
需要将source.token给到后续可能需要取消的网络请求的cancelToken这个配置项
在合适的时机去执行取消网络请求方法source.cancel()
综合案例:通过axios发送一个网络请求,判断本地是否有缓存数据,如果有直接使用缓存并且取消网络请求;如果本地没有这个数据的缓存,则发起请求去获取,请求到后缓存数据。要求使用拦截器