Vue 实例从创建到销毁的过程,从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。
-
创建前/后: 在beforeCreate阶段,vue实例的挂载元素el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,el还没有(在 beforeCreate 钩子函数调用的时候,是获取不到 props 或者 data 中的数据的,因为这些数据的初始化都在 initState 中。
然后会执行 created 钩子函数,在这一步的时候已经可以访问到之前不能访问到的数据,但是这时候组件还没被挂载,所以是看不到的。
) -
载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。(接下来会先执行 beforeMount 钩子函数,开始创建 VDOM,最后执行 mounted 钩子,并将 VDOM 渲染为真实 DOM 并且渲染数据。组件中如果有子组件的话,会递归挂载子组件,只有当所有子组件全部挂载完毕,才会执行根组件的挂载钩子。)
-
更新前/后:当data变化时,会触发beforeUpdate和updated方法(数据更新的时候,先调用beforeUpdate,然后数据更新引发视图渲染完成
之后,再会执行updated)(接下来是数据更新时会调用的钩子函数 beforeUpdate 和 updated,就是分别在数据更新前和更新后会调用。避免在updated中操作数据,防止死循环。 -
另外还有 keep-alive 独有的生命周期,分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated 钩子函数,命中缓存渲染后会执行 actived 钩子函数。
) -
销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在(切换路由的时候,组件就会被销毁了,销毁之前执行beforeDestroy
组件销毁后执行destroyed)(最后就是销毁组件的钩子函数 beforeDestroy 和 destroyed。前者适合移除事件、定时器等等,否则可能会引起内存泄露的问题。然后进行一系列的销毁操作,如果有子组件的话,也会递归销毁子组件,所有子组件都销毁完毕后才会执行根组件的 destroyed 钩子函数。)
Vue在哪个生命周期内调用异步请求
可以在钩子函数created、beforeMount、mounted中进行调用,因为在这三个钩子函数中,data已经创建,可以将服务器端返回的数据进行赋值,但是本人推荐在created钩子函数中调用异步请求,因为
能更快获取到服务器端的数据,减少页面加载时间 ,ssr不支持beforeMount和mounted钩子函数,所以放在created中有助于一致性。
vue生命周期swiper
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
<style>
.swiper-container {
width: 500px;
height: 300px;
background: pink;
}
</style>
</head>
<body>
<div id="yxm">
<Banner></Banner>
</div>
<!-- banner -->
<template id='banner'>
<div>
<button @click='add'>增加</button>
<div class="swiper-container">
<div class="swiper-wrapper">