vue在created和mounted发送请求区别

时间: 2023-03-29 10:01:42 浏览: 109

前端大厂最新面试题-lifecycle.docx

Vue 生命周期详解在 Vue 中，生命周期是指从创建到销毁的整个过程，即指从创建、初始化数据、编译模板、挂载 Dom、渲染、更新、卸载等一系列过程。我们可以把组件比喻成工厂里面的一条流水线，每个工人（生命周期）站在各自的岗位，当任务流转到工人身边的时候，工人就开始工作。生命周期钩子会自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法（例如 created: () => this.fetchTodos()）。 Vue 生命周期总共可以分为 8 个阶段：创建前后、载入前后、更新前后、销毁前销毁后，以及一些特殊场景的生命周期。 1. beforeCreate：组件实例被创建之初 2. created：组件实例已经完全创建 3. beforeMount：组件挂载之前 4. mounted：组件挂载到实例上去之后 5. beforeUpdate：组件数据发生变化，更新之前 6. updated：组件数据更新之后 7. beforeDestroy：组件实例销毁之前 8. destroyed：组件实例销毁之后生命周期整体流程： beforeCreate -> created • 初始化 Vue 实例，进行数据观测 created -> beforeMount • 完成数据观测，属性与方法的运算，watch、event 事件回调的配置 • 可调用 methods 中的方法，访问和修改 data 数据触发响应式渲染 DOM，可以通过 computed 和 watch 完成数据计算 • 此时 vm.$el 并没有被创建 created -> beforeMount • 判断是否存在 el 选项，若不存在则停止编译，直到调用 vm.$mount(el) 才会继续编译 • 优先级：render > template > outerHTML • vm.el 获取到的是挂载 DOM 的 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，仅仅销毁实例使用场景分析： beforeCreate 执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务 created 组件初始化完毕，各种数据可以使用，常用于异步数据获取 beforeMount 未执行渲染、更新，DOM 未创建 mounted 初始化结束，DOM 已创建，可用于获取访问数据和 DOM 元素 beforeUpdate 更新前，可用于获取更新前各种状态 updated 更新后，所有状态已是最新 beforeDestroy 销毁前，可用于一些定时器或订阅的取消 destroyed 组件已销毁，作用同上面试官的问题：请描述下你对 Vue 生命周期的理解？在 created 和 mounted 这两个生命周期中请求数据有什么区别呢？ created 是在组件实例一旦创建完成的时候立刻调用，这时候页面 DOM 节点并未生成；mounted 是在页面 DOM 节点渲染完毕之后就立刻执行的。触发时机上 created 是比 mounted 要更早的，两者的相同点：都能拿到实例对象的属性和方法。讨论这个问题本质就是触发的时机，放在 mounted 中的请求有可能导致页面闪动（因为此时页面 DOM 结构已经生成），但如果在页面加载前完成请求，则不会出现此情况。建议对页面内容的改动放在 created 生命周期当中。参考文献： https://juejin.cn/post/6844903811094413320 https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram 本篇文章详细介绍了 Vue 生命周期的概念、生命周期钩子、生命周期整体流程、使用场景分析和面试官的问题讨论。通过本篇文章，您将能够更好地理解 Vue 生命周期，掌握生命周期钩子的使用方法，并能够解决在 created 和 mounted 中请求数据的区别问题。

在Vue中，created和mounted都是生命周期钩子函数，它们都可以用来发送请求。但是它们的执行时机不同。created是在实例创建完成后立即执行的，而mounted是在实例挂载到页面后执行的。因此，如果需要在请求数据后对DOM进行操作，应该在mounted中发送请求。如果不需要对DOM进行操作，可以在created中发送请求。

阅读全文

vue在created和mounted发送请求区别

相关推荐

Vue应用中何时获取数据：created vs mounted

Vue2.0生命周期详解：created到mounted的过程

Vue实例中生命周期created和mounted的区别详解

vue 路由子组件created和mounted不起作用的解决方法

vue 在created和mounted

vue的created和mounted

vue的created和mounted使用

vue created和mounted的区别

vue watch created computed mounted

vue created 和 mounted

vue生命周期中created和mounted区别

vue在created里面请求的数据在mounted显示undefine

vue在created里面请求数据，在mounted里面加载echarts

vue 在create还是mounted进行异步请求

created和mounted请求数据

vue中，在created和mounted钩子函数中，执行一个方法有什么区别

vue created mounted methods

vue如何保证created里面请求的数据在mounted可以获取

Vue.js生命周期：created与mounted的执行顺序及props数据交互

最新推荐

谈一谈vue请求数据放在created好还是mounted里好

在vue中通过axios异步使用echarts的方法

数学建模拟合与插值.ppt

火炬连体网络在MNIST的2D嵌入实现示例

管理建模和仿真的文件

L2正则化的终极指南：从入门到精通，揭秘机器学习中的性能优化技巧

如何构建一个符合GB/T19716和ISO/IEC13335标准的信息安全事件管理框架，并确保业务连续性规划的有效性？

Angular插件增强Application Insights JavaScript SDK功能

"互动学习：行动中的多样性与论文攻读经历"

L1正则化模型诊断指南：如何检查模型假设与识别异常值（诊断流程+案例研究）