Vue的生命周期和axios

YQi
320 阅读1分钟

Vue生命周期

  • Vue的生命周期是什么？

    vue的生命周期是vue实例从创建到销毁的全过程，这个过程可以分为4个阶段：
 第一阶段：初始化阶段--创建Vue实例，准备数据。
 第二阶段：挂载阶段--准备模板，渲染视图。
 第三阶段：数据更新阶段--当数据变化时，会进行新旧DOM的对比，对比出差异化的部分，进行差异化更新。
 第四阶段：实例销毁阶段--当vm.$destroy()被调用，vue实例就会被销毁，释放相关资源，此时再更新数据，也不会再变化。

  • 如何知道Vue生命周期到达什么阶？

    • 使用钩子函数

钩子函数

  • 目标：Vue框架内置函数，随着组件的生命周期阶段，自动执行。

  • 作用：特定的时间点，执行特定的操作。

  • 场景：组件创建完毕后，可以在created生命周期函数中发起Ajax请求，从而初始化data数据。

  • 分类：4大阶段8个方法

    阶段方法名方法名
    初始化beforeCreatecreated
    挂载beforeMountmounted
    更新beforeUpdateupdated
    销毁beforeDestroydestroyed

1655735371277.png

初始化阶段

  • Vue实例从创建到编译模板执行了哪些钩子函数？
    • beforeCreate / created
  • created函数触发能获取data吗？
    • 能获取data，不能获取真实DOM

挂载阶段

  • Vue实例从创建到显示都执行了哪些钩子函数？
    • beforeCreate / created / beforeMount / mounted
  • 在什么钩子函数里可以获取真实DOM？
    • mounted

更新阶段

  • 什么时候执行updated钩子函数？
    • 当数据发生变化并更新页面后
  • 在哪可以获取更新后的DOM？
    • updated

销毁阶段

  • 一般在beforeDestroy / destroy里做什么？

    • 手动消除计时器/定时器/全局事件

axios的介绍

  • ajax：一种前端异步请求后端的技术。

  • ajax原理：浏览器window接口的XMLHttpRequest。

  • axios：基于原生ajax+Promise技术封装通用于前后端的请求库。

  • axios如何配置基地址：axios.defaults.baseURL。

  • axios特点：

    • 支持客户端发送Ajax请求；

    • 支持服务端Node.js发送请求；

    • 支持Promise相关用法；

    • 支持请求和响应的拦截器功能；

    • 自动转换JSON数据；

    • axios底层还是原生js实现，内部通过Promise封装。

ref属性的介绍

  • Vue中如何获取原生DOM？

    • 用id属性或者ref属性。

  • 如何获取组件对象？

    • 先给标签设置一个ref值，再通过this.$refs.domName获取，这个操作要在mounted阶段进行。

nextTick基础使用

  • data改变更新DOM是通过异步实现。

  • 在哪可以访问到更新后的DOM？

    1. this.$nextTick里的函数体。

    2. updated生命周期钩子函数。

  • nextTick的使用场景：

    1. $nextTick函数原地返回的是Promise对象。

    2. 获取到DOM对象，调用事件方法主动触发标签的事件。

  • nextTick的原理：

    1. 为什么需要nextTick：Vue是异步修改DOM的并且不鼓励开发者直接接触DOM，但有时候业务需要必须对数据更改，刷新后的DOM做相应的处理，这个时候就可以使用Vue.nextTick(callback)这个api了。
    2. 事件循环中宏任务和微任务的概念：常见的宏任务有script, setTimeout, setInterval, setImmediate, I/O, UI rendering；常见的微任务有process.nextTick(Nodejs),Promise.then(), MutationObserver。
    3. 理解nextTick的原理正是vue通过异步列队控制DOM更新和nextTick回调函数先后执行的方式。
avatar
文章
阅读
粉丝