本文详细介绍了Vue实例的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等各个阶段。重点讨论了在哪个生命周期钩子中适合调用异步请求，并推荐在created钩子中进行。此外，还探讨了Vue中封装Swiper的相关内容。
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">
最低0.47元/天 解锁文章
179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
