Ajax 请求到底应该放在 created 里还是 mounted 里???

示例代码

Ajax 请求到底应该放在 created 里还是 mounted 里???_第1张图片
定义了一个数据 list,默认是空数组
定义了一个 API 请求,getDat
还定义了两个生命周期钩子 created 和 mounted

分析在 created 里的情况

Ajax 请求到底应该放在 created 里还是 mounted 里???_第2张图片
这个时候,我们是能够成功发送 API 请求获取到数据的,控制台会打印 created,mounte

首先我们晓得:created和mounted都是同步的,api请求是异步的
Ajax 请求到底应该放在 created 里还是 mounted 里???_第3张图片

所以 最后的过程是这样:

created -- api请求 -- 获取数据 -- 组件重新渲染
        -- mounted -- 组件首次渲染

也就是说,在发送API请求以后, 会产生两个分支, 代码逻辑比较混乱

再来分析 mounted 里的情况

Ajax 请求到底应该放在 created 里还是 mounted 里???_第4张图片

是这样的过程:
created – mounted – 组件首次渲染 – api请求 – 获取到数据 – 组件重新渲染

总结

我是倾向于放在mounted里,其实差别不大,但是在mounted里整体逻辑会更清晰

但是也看到有人说 应该放在created 有助于一致性 ssr不支持beforemount mounted

你可能感兴趣的:(VUE,vue.js,前端)