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

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

相关推荐
Filotimo_4 小时前
2.CSS3.(2).html
前端·css
yinuo5 小时前
uniapp微信小程序华为鸿蒙定时器熄屏停止
前端
gnip6 小时前
vite中自动根据约定目录生成路由配置
前端·javascript
前端橙一陈7 小时前
LocalStorage Token vs HttpOnly Cookie 认证方案
前端·spring boot
~无忧花开~7 小时前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
泰迪智能科技017 小时前
图书推荐丨Web数据可视化(ECharts 5)(微课版)
前端·信息可视化·echarts
CodeCraft Studio8 小时前
借助Aspose.Email,使用 Python 读取 Outlook MSG 文件
前端·python·outlook·aspose·email·msg·python读取msg文件
家里有只小肥猫9 小时前
react 初体验2
前端·react.js·前端框架
慧慧吖@9 小时前
前端发送请求时,参数的传递格式
前端
L李什么李9 小时前
HTML——使用表格制作简历
前端·javascript·html