当前位置：首页 > news >正文

vue生命周期、钩子以及跨域问题简介

news 来源：原创 2025/6/27 16:47:55

Vue 的生命周期是指 Vue 实例从创建到销毁的整个过程。在这个过程中，Vue 提供了一系列的生命周期钩子（Lifecycle Hooks），允许开发者在特定的时间点执行代码。以下是 Vue 的生命周期和钩子的简单说明：

Vue 的生命周期阶段

1. 创建阶段：Vue 实例被创建。

2. 挂载阶段：Vue 实例被挂载到 DOM 上。

3. 更新阶段：Vue 实例的数据发生变化，导致 DOM 更新。

4. 销毁阶段：Vue 实例被销毁，从 DOM 中移除。

Vue 的生命周期钩子

以下是 Vue 提供的主要生命周期钩子及其用途：

1. beforeCreate

- 触发时机：Vue 实例刚刚被创建，但尚未初始化数据和事件。

- 用途：通常用于初始化一些不依赖数据或 DOM 的逻辑。

2. created

- 触发时机：Vue 实例创建完成，数据和事件已经初始化，但 DOM 尚未挂载。

- 用途：可以访问数据和方法，但不能操作 DOM。

3. beforeMount

- 触发时机：Vue 实例即将挂载到 DOM 上，模板已经编译完成，但尚未渲染到页面。

- 用途：可以访问编译后的模板，但 DOM 尚未更新。

4. mounted

- 触发时机：Vue 实例已经挂载到 DOM 上，DOM 渲染完成。

- 用途：可以安全地操作 DOM，例如初始化第三方库或进行 DOM 操作。

5. beforeUpdate

- 触发时机：数据发生变化时，Vue 实例即将更新 DOM，但尚未完成更新。

- 用途：可以在 DOM 更新前执行一些逻辑。

6. updated

- 触发时机：Vue 实例的 DOM 已经完成更新。

- 用途：可以访问更新后的 DOM，执行与 DOM 相关的逻辑。

7. beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）

- 触发时机：Vue 实例即将被销毁，但尚未完全销毁。

- 用途：可以执行清理操作，例如取消定时器、解绑事件监听器等。

8. unmounted（Vue 3）或 destroyed（Vue 2）

- 触发时机：Vue 实例已经被完全销毁，从 DOM 中移除。

- 用途：确认实例已经销毁，可以执行一些最终的清理逻辑。

生命周期图示

beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeUnmount → unmounted

Vue 3 的 Composition API 钩子

在 Vue 3 的 Composition API 中，生命周期钩子的名称略有不同，但功能相同：

- onBeforeCreate

- onCreated

- onBeforeMount

- onMounted

- onBeforeUpdate

- onUpdated

- onBeforeUnmount

- onUnmounted

示例代码：

<template><div><p>{{ message }}</p><button @click="updateMessage">Update Message</button></div></template><script>export default {data() {return {message: 'Hello Vue!'};},beforeCreate() {console.log('beforeCreate: 实例刚刚创建');},created() {console.log('created: 实例创建完成');},beforeMount() {console.log('beforeMount: 即将挂载到 DOM');},mounted() {console.log('mounted: 已经挂载到 DOM');},beforeUpdate() {console.log('beforeUpdate: 即将更新 DOM');},updated() {console.log('updated: DOM 已经更新');},beforeUnmount() {console.log('beforeUnmount: 即将销毁实例');},unmounted() {console.log('unmounted: 实例已经销毁');},methods: {updateMessage() {this.message = 'Message updated!';}}};</script>

跨域问题

跨域问题是指在浏览器中，由于安全策略的限制，一个网页的脚本（如 JavaScript）无法访问另一个不同来源（源）的资源。这种限制是由浏览器的同源策略（Same-Origin Policy）引起的。

什么是“源”（Origin）？

源是由以下三个部分组成的：
1. 协议（Protocol）：如 http或 https。
2. 域名（Domain）：如 example.com。
3. 端口（Port）：如 80或 443。

如果两个网页的协议、域名或端口有任何一项不同，它们就被认为是不同的源。例如：
- http://example.com和 https://example.com是不同的源（协议不同）。
- http://example.com和 http://example.org是不同的源（域名不同）。
- http://example.com:8080和 http://example.com:80是不同的源（端口不同）。

什么是跨域问题？

跨域问题是指当一个网页（源 A）尝试通过 JavaScript 访问另一个源（源 B）的资源时，浏览器会阻止这种操作。例如：
- 一个网页从 http://example.com发起 AJAX 请求到 http://api.example.com。
- 一个网页尝试通过 JavaScript 读取另一个源的 <iframe>内容。

浏览器会认为这种跨源操作可能会带来安全风险，因此默认会阻止它。

跨域问题的表现

跨域问题通常会在以下场景中出现：
1. AJAX 请求：通过 XMLHttpRequest或 fetch请求不同源的资源时，浏览器会阻止请求。
2. 图片加载：通过 <img>标签加载不同源的图片时，无法通过 JavaScript 获取图片的像素数据。
3. 链接跳转：通过 <a>标签跳转到不同源的页面时，无法通过 JavaScript 获取跳转后的页面内容。
4. WebSocket 连接：尝试连接不同源的 WebSocket 服务时，可能会被浏览器阻止。

跨域问题的解决方法

1. JSONP（JSON with Padding）
- 适用于简单的 GET 请求。
- 通过 <script>标签动态加载不同源的资源，并通过回调函数处理返回的数据。

2. CORS（Cross-Origin Resource Sharing）
- 服务器端设置响应头（如 Access-Control-Allow-Origin），允许特定的源访问资源。
- 浏览器会根据服务器的响应头决定是否允许跨域请求。

3. 代理服务器
- 在同源的服务器上设置代理，将跨域请求转发到目标服务器，再将结果返回给客户端。

4. WebSocket
- WebSocket 本身不受同源策略限制，可以跨域通信。
- 如果您想对WebSocket做进一步了解，欢迎阅读：WebSocket详细介绍。

5. PostMessage
- 通过 window.postMessage方法在不同源的窗口之间安全地传递消息。

为什么会有跨域限制？
跨域限制的主要目的是为了保护用户的隐私和安全。例如：
- 防止恶意网站窃取用户在其他网站上的敏感数据。
- 防止跨站请求伪造（CSRF）攻击。

总结

Vue 的生命周期和钩子允许开发者在不同的阶段执行特定的逻辑，从而更好地控制应用的行为。理解这些钩子的触发时机和用途，可以帮助你编写更高效和可靠的 Vue 应用。跨域问题是浏览器为了安全而施加的限制，但它也给开发者带来了一些挑战。通过理解跨域问题的本质和解决方法，可以更好地设计和开发跨域相关的功能。

如果文章对您有帮助，还请您点赞支持
感谢您的阅读，欢迎您在评论区留言指正分享