vue基础知识五:请描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?

这篇具有很好参考价值的文章主要介绍了vue基础知识五:请描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue基础知识五:请描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?,vue.js,javascript,前端
一、生命周期是什么

生命周期(Life Cycle)的概念应用很广泛,特别是在政治、经济、环境、技术、社会等诸多领域经常出现,其基本涵义可以通俗地理解为“从摇篮到坟墓”(Cradle-to-Grave)的整个过程在Vue中实例从创建到销毁的过程就是生命周期,即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线,每个工人(生命周期)站在各自的岗位,当任务流转到工人身边的时候,工人就开始工作PS:在Vue生命周期钩子会自动绑定 this 上下文到实例中,因此你可以访问数据,对 property 和方法进行运算这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())

二、生命周期有哪些

Vue生命周期总共可以分为8个阶段:创建前后, 载入前后,更新前后,销毁前销毁后,以及一些特殊场景的生命周期
vue基础知识五:请描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?,vue.js,javascript,前端
三、生命周期整体流程

Vue生命周期流程图

vue基础知识五:请描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?,vue.js,javascript,前端
具体分析

beforeCreate -> created

初始化vue实例,进行数据观测

created

完成数据观测,属性与方法的运算,watch、event事件回调的配置

可调用methods中的方法,访问和修改data数据触发响应式渲染dom,可通过computed和watch完成数据计算

此时vm.$el 并没有被创建

created -> beforeMount

判断是否存在el选项,若不存在则停止编译,直到调用vm.$mount(el)才会继续编译

优先级:render > template > outerHTML

vm.el获取到的是挂载DOM的

beforeMount

在此阶段可获取到vm.el

此阶段vm.el虽已完成DOM初始化,但并未挂载在el选项上

beforeMount -> mounted

此阶段vm.el完成挂载,vm.$el生成的DOM替换了el选项所对应的DOM

mounted

vm.el已完成DOM的挂载与渲染,此刻打印vm.$el,发现之前的挂载点及内容已被替换成新的DOM

beforeUpdate

更新的数据必须是被渲染在模板上的(el、template、render之一)

此时view层还未更新

若在beforeUpdate中再次修改数据,不会再次触发更新方法

updated

完成view层的更新

若在updated中再次修改数据,会再次触发更新方法(beforeUpdate、updated)

beforeDestroy

实例被销毁前调用,此时实例属性与方法仍可访问

destroyed

完全销毁一个实例。可清理它与其它实例的连接,解绑它的全部指令及事件监听器

并不能清除DOM,仅仅销毁实例

使用场景分析

vue基础知识五:请描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?,vue.js,javascript,前端
四、题外话:数据请求在created和mouted的区别

created是在组件实例一旦创建完成的时候立刻调用,这时候页面dom节点并未生成;mounted是在页面dom节点渲染完毕之后就立刻执行的。触发时机上created是比mounted要更早的,两者的相同点:都能拿到实例对象的属性和方法。 讨论这个问题本质就是触发的时机,放在mounted中的请求有可能导致页面闪动(因为此时页面dom结构已经生成),但如果在页面加载前完成请求,则不会出现此情况。建议对页面内容的改动放在created生命周期当中。文章来源地址https://www.toymoban.com/news/detail-653380.html

到了这里,关于vue基础知识五:请描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue基本知识:methods,computed,watch,生命周期

    (Ⅰ)重点知识目标 2.1 Methods选项 使用场景 : 在开发中,我们经常需要用到函数, 通过将一些需要复用的逻辑封装在函数里,多次调用这个函数来增强逻辑代码复用性,在vue中,函数被定义在methods选项里来使用,定义完后就可以在vue 表达式中调用函数 2.2.1 基本用法 语法结构:

    2024年01月22日
    浏览(48)
  • Vue2基础四、生命周期

    1、生命周期 Vue生命周期:一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个阶段:① 创建 ② 挂载 ③ 更新 ④ 销毁 创建阶段:创建响应式数据 挂载阶段:渲染模板 更新阶段:修改数据,更新视图 销毁阶段:销毁Vue实例 2、生命周期钩子 Vue生命周期过程中,会 自动运

    2024年02月15日
    浏览(78)
  • Vue基础入门(2)- Vue的生命周期、Vue的工程化开发和脚手架、Vue项目目录介绍和运行流程

    Vue生命周期:就是一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个阶段: ① 创建 ② 挂载 ③ 更新 ④ 销毁 1.创建阶段:创建响应式数据 2.挂载阶段:渲染模板 3.更新阶段:修改数据,更新视图 watch 是监听的数据修改就触发, updated 是整个组件的dom更新才触发 4.销毁

    2024年03月10日
    浏览(61)
  • vue基础知识

    1、只要data里面的数据发生变化,vue模板就重新执行。 在这个例子中,vue模板中的 change() 会首先得到执行,然后调用methods中的 定时器 ,定时器发生变化,修改了 opacity ,data里面的数据发生了变化,然后就重新解析vue模板,就又重新生成了一个定时器,导致一个循环,会不

    2023年04月12日
    浏览(47)
  • vue3 基础知识

    vue3创建一个项目 1.模板语法 数据绑定最常见的形式就是使用“双大括号” 语法在HTML中插入文本: {{msg}}将被替代对应组件实例中msg属性的值。无论何时,绑定的组件实例上msg属性发 生改变,插值处内容都会更新 2.Vue 常用指令 • 指令介绍 • v-text • v-html • v-bind • v-on •

    2024年02月12日
    浏览(42)
  • vue3基础知识

    1.setup函数 在vue2中数据放在data中、方法放在method中等等。在vue3中统一放在了setup函数中。 代码如下:APP.vue 在setup中一定要有return函数,将 “所有数据(变量,函数等)” 返回在能在视图中返回 2.ref和reactive函数 reative函数和ref的功能式一样的。主要是\\\"响应式数据\\\"函数。在

    2024年02月05日
    浏览(49)
  • 面试官:服务器最大可以创建多少个tcp连接以及端口并解释下你对文件句柄的理解

    转载请注明出处: 服务器最大可以创建多少个TCP连接取决于多个因素,例如服务器的硬件配置、网络带宽、操作系统设置等。 一般来说,现代服务器的硬件资源和网络带宽都比较充足,因此可以创建大量的TCP连接。然而,服务器在创建TCP连接时也会有一些限制,例如操作系

    2023年04月12日
    浏览(44)
  • VUE3基础知识梳理

    官方文档:https://cn.vuejs.org/guide/essentials/event-handling.html Vue(发音为 vju:/,类似 view) 是一款用于构建用户界面的JavaScript 框架。 它基于标准 HTML、CSS 和JavaScript 构建,并提供了一套声明式的、 组件化的编程模型,帮助你高效地开发用户界面。 无论是简单还是复杂的界面,Vue 都

    2024年02月07日
    浏览(59)
  • VUE基础知识——过渡与动画

    目录 官网图示 过渡动画 过渡中的6个切换 具体操作 元素进入的样式 元素离开的样式 如何使用 示例 html代码 js代码 css代码 他是用来在我们对页面进行插入、移除或者更新DOM元素的时候,为我们添加一下动画效果的样式。 下面是官网对于过渡6个类的定义: 在进入/离开的过

    2024年02月01日
    浏览(54)
  • vue基础知识四:Vue实例挂载的过程

    一、思考 我们都听过知其然知其所以然这句话 那么不知道大家是否思考过new Vue()这个过程中究竟做了些什么? 过程中是如何完成数据的绑定,又是如何将数据渲染到视图的等等 一、分析 首先找到vue的构造函数 源码位置:srccoreinstanceindex.js options是用户传递过来的配置项,

    2024年02月12日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包