Vue全家桶:vue2+vue3全部搞懂:第六篇,了解Vue生命周期,如何一进页面就马上发送请求、渲染页面

本文主要是介绍Vue全家桶:vue2+vue3全部搞懂:第六篇,了解Vue生命周期,如何一进页面就马上发送请求、渲染页面,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前提,建议先学会前端几大基础:HTML、CSS、JS、Ajax,不然不好懂

这一专栏知识将一次性将vue、vue2、vue3全部讲明白

一、啥是Vue的生命周期,一个Vue生命周期有哪几个阶段?

简单来说生命周期就是从【你(new)创建一个Vue】到【你关了浏览器】为止就是一个Vue的生命周期,它干完了他该干完的事。

当然Vue也提供了一个命令【你这个Vue的变量名字 . $destory( )】,在浏览器的console控制台输入,就可以不关浏览器但是结束Vue的生命周期了。(不过这个方法你得用一个变量命名去接收这个Vue实例,比如const app = new Vue({...}) ,现在你就可以写【app.$destory()】了)

然后一个生命周期有4个阶段:

1、创建阶段

2、挂载阶段

3、更新阶段

4、销毁阶段

二、然后简单提一下生命钩子

不用认真研究,我也不知道为啥叫这么难听的名字,啥钩八......   

8个生命钩子,就是Vue在他的生命周期里会【自动】执行的8个【函数】

其中每个阶段有1个【预备函数】和1个【正式在阶段短期内的执行函数】,也就是说4个阶段对应了4个【预备函数】和4个【正式在阶段短期内的执行函数】。你不写这几个函数,Vue也会自动执行这些函数,如果你手动写了,就可以在的对应的阶段专门做某些事

在这8个阶段函数里你可以进行各自对应功能的操作,但是因为有4个函数是在阶段准备之前的【预备函数】,没啥用;所以我主要讲另外4个【正式在该阶段执行事情】的函数

【创建阶段】:(Vue对应的执行函数名叫:created( ))负责一进页面就发送请求

【挂载阶段】:(Vue对应的执行函数名叫:mounted( ))负责一进页面、等创建阶段完成后马上渲染DOM页面元素

【更新阶段】:(Vue对应的执行函数名叫:updated( ))没什么特别的,就是正常根据数据更新修改,对应进行DOM元素渲染,更新视图,一直循环直到Vue被销毁结束

【销毁阶段】:(Vue对应的执行函数名叫:destoryed( ))负责在结束Vue的生命之前,把一些留下的定时器啥的“垃圾”给清理掉,再go die

下面我结合代码让各位看一下这8个钩八函数具体有什么用

<div id="app"><h3>{{ title }}</h3><div><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>//这里用一个叫MyVue的变量接收Vue实例,到时候就可以手动【MyVue.$destroy()】销毁它了const MyVue = new Vue({el: '#app',data: {count: 100,},// 1. 创建阶段(准备数据)beforeCreate () {//这个时期是准备数据阶段,我们要使用data里的数据的话就没用的,这个阶段还没有加载好数据console.log('beforeCreate 响应式数据准备好之前', this.count)},// (数据加载完毕,现在可以发送网络请求,也可以开始使用data的数据了)created () {console.log('created 响应式数据准备好之后', this.count)// this.数据名 = 请求回来的数据// 可以开始发送初始化渲染的请求了},// 2. 挂载阶段(准备Vue渲染阶段)beforeMount () {//此时检查会发现,HTML标签里设置的一些v-model、v-for都看不到,因为Vue还没开始渲染console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)},//(Vue开始发挥渲染作用了)mounted () {console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)// 可以Vue开始发挥v-model、v-for这些指令,来渲染、操作dom了},// 3. 更新阶段(修改数据 → 更新视图)beforeUpdate () {console.log('beforeUpdate 数据修改了,视图还没更新', document.querySelector('span').innerHTML)},updated () {console.log('updated 数据修改了,视图已经更新', document.querySelector('span').innerHTML)},// 4. 卸载阶段beforeDestroy () {console.log('beforeDestroy, 卸载前')console.log('清除掉一些Vue以外的资源占用,定时器,延时器...')},destroyed () {console.log('destroyed,卸载后')}})
</script>

三、结合实例看看有啥用

1、created( ),已创建阶段的执行函数

比如我们想要页面一进入,马上发送一个新闻服务器的网络请求,并根据网络返回的新闻数据马上显示在页面

那么只要用到【网络请求】、【网络请求返回的数据】、【调用data的数据】,就用created( )

然后我们的思路:

1、在HTML标签设置好对应一个新闻数据的容器布局和样式,然后用【v-for】循环Vue里的data数组,来达到动态显示多个类似容器的效果

2、在Vue的data里设置一个【数组】,用来接收【网络返回的数据】,并【渲染在DOM元素上】

3、在Vue里手动写上【created( )函数】,然后就可以在里面发送网络数据请求,并进行数据操作、并把数据绑定到DOM元素上了

<!-- HTML部分 -->
<div id="app"><ul><li v-for="(item, index) in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul>
</div>//JavaScript部分
<script>// 接口地址:http://hmajax.itheima.net/api/news// 请求方式:getconst app = new Vue({el: '#app',data: {//list来装网络返回的数据,并渲染到页面list: []},//第一次看到这个async和await不懂的可以去看我的关于Peomise的文章//其实就是等于axios().then().catch(),一样的效果//既然是发送网络数据,并且要用【网络返回的数据】和【data的数据】,那就用created函数async created () {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')// 2. 更新到 list 中,用于页面渲染 v-forthis.list = res.data.data}})
</script>

2、mounted( ),已可以渲染阶段的执行函数

比如,正常的输入框要我们点一下才会有光标;现在我们想要页面一进入,搜索输入框就自动有“聚焦效果”,也就是有光标显示,这是就要用到mounted( )函数

只要想一进页面就操作、渲染某个DOM元素,就用mounted( )函数

思路(这里只考虑渲染的效果,不考虑输入框输入的内容传给Vue这些操作):

1、第一步就是在Vue手动设置mounted( )函数,在里面进行渲染操作就好了

2、想要他被【聚焦】只需要:【DOM元素.focus( )】即可

<div id="app"><input type="text" v-model="words" id="inp">
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {},// 核心思路:// 1. 等input框渲染出来 mounted 钩子// 2. 让input框获取焦点 inp.focus()mounted () {document.querySelector('#inp').focus()}})
</script>

这篇关于Vue全家桶:vue2+vue3全部搞懂:第六篇,了解Vue生命周期,如何一进页面就马上发送请求、渲染页面的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/768231

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

SpringBoot使用OkHttp完成高效网络请求详解

《SpringBoot使用OkHttp完成高效网络请求详解》OkHttp是一个高效的HTTP客户端,支持同步和异步请求,且具备自动处理cookie、缓存和连接池等高级功能,下面我们来看看SpringB... 目录一、OkHttp 简介二、在 Spring Boot 中集成 OkHttp三、封装 OkHttp

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

一文带你了解SpringBoot中启动参数的各种用法

《一文带你了解SpringBoot中启动参数的各种用法》在使用SpringBoot开发应用时,我们通常需要根据不同的环境或特定需求调整启动参数,那么,SpringBoot提供了哪些方式来配置这些启动参... 目录一、启动参数的常见传递方式二、通过命令行参数传递启动参数三、使用 application.pro

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

一文带你深入了解Python中的GeneratorExit异常处理

《一文带你深入了解Python中的GeneratorExit异常处理》GeneratorExit是Python内置的异常,当生成器或协程被强制关闭时,Python解释器会向其发送这个异常,下面我们来看... 目录GeneratorExit:协程世界的死亡通知书什么是GeneratorExit实际中的问题案例