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

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是不同的源(协议不同)。

什么是跨域问题?

跨域问题是指当一个网页(源 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 应用。跨域问题是浏览器为了安全而施加的限制,但它也给开发者带来了一些挑战。通过理解跨域问题的本质和解决方法,可以更好地设计和开发跨域相关的功能。

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

相关推荐
拉不动的猪3 分钟前
刷刷题49(react中几个常见的性能优化问题)
前端·react.js·面试
qp12 分钟前
21.OpenCV获取图像轮廓信息
javascript·opencv·webpack
snowfoootball33 分钟前
基于 Ollama DeepSeek、Dify RAG 和 Fay 框架的高考咨询 AI 交互系统项目方案
前端·人工智能·后端·python·深度学习·高考
烛阴1 小时前
深入浅出:JavaScript ArrayBuffer 的使用与应用
前端·javascript
zhu12893035561 小时前
用Rust和WebAssembly打造轻量级前端加密工具
前端·rust·wasm
@PHARAOH2 小时前
WHAT - Electron 系列(一)
前端·javascript·electron
loriloy2 小时前
Electron崩溃问题排查指南
javascript·electron
半句唐诗2 小时前
设计与实现高性能安全TOKEN系统
前端·网络·安全
小满zs2 小时前
React-router v7 第二章(路由模式)
前端·react.js
yanxy5123 小时前
【TS学习】(18)分发逆变推断
前端·学习·typescript