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

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

关于数据埋点,你需要了解这些基本知识

产品汪每天都在和数据打交道,你知道数据来自哪里吗? 移动app端内的用户行为数据大多来自埋点,了解一些埋点知识,能和数据分析师、技术侃大山,参与到前期的数据采集,更重要是让最终的埋点数据能为我所用,否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式,可以区分为: 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理:自动程度高的,能解决通用统计,便于统一化管理,但个性化定

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

【数据结构】——原来排序算法搞懂这些就行,轻松拿捏

前言:快速排序的实现最重要的是找基准值,下面让我们来了解如何实现找基准值 基准值的注释:在快排的过程中,每一次我们要取一个元素作为枢纽值,以这个数字来将序列划分为两部分。 在此我们采用三数取中法,也就是取左端、中间、右端三个数,然后进行排序,将中间数作为枢纽值。 快速排序实现主框架: //快速排序 void QuickSort(int* arr, int left, int rig

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo