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

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

相关推荐
YONG823_API1 分钟前
深度探究获取淘宝商品数据的途径|API接口|批量自动化采集商品数据
java·前端·自动化
鱼樱前端2 分钟前
前端必知必会:JavaScript 对象与数组克隆的 7 种姿势,从浅入深一网打尽!
前端·javascript
yzhSWJ17 分钟前
Spring Boot中自定义404异常处理问题学习笔记
java·javascript
小希爸爸27 分钟前
1、中医基础入门和养生
前端·后端
神仙别闹2 小时前
基于VUE+Node.JS实现(Web)学生组队网站
前端·vue.js·node.js
下雨的Jim2 小时前
前端速成之——Script
前端·笔记
Captaincc2 小时前
使用 Copilot 代理模式构建着陆页
前端·ai编程·github copilot
zyk_5202 小时前
前端渲染pdf文件解决方案-pdf.js
前端·javascript·pdf
Apifox.2 小时前
Apifox 4月更新|Apifox在线文档支持LLMs.txt、评论支持使用@提及成员、支持为团队配置「IP 允许访问名单」
前端·人工智能·后端·ai·ai编程
划水不带桨3 小时前
大数据去重
前端