前段（vue）

目录

跨域是什么？

SprinBoot跨域的三种解决方法

JavaScript 有 8 种数据类型，

金额的用什么类型。

前段 = ==  ===区别

JQuery使用$.ajax()实现异步请求

Vue 父子组件间的三种通信方式

Vue2 和 Vue3 存在多方面的区别。

---

跨域是什么？

跨域是指不同域名之间的相互访问，这是由浏览器的同源策略决定的，

是浏览器对JavaScript施加的安全措施，防止恶意文件破坏。

同源策略：同源策略是一种约定，它是浏览器最核心的也是最基本的安全策略，

如果缺少了同源策略，则浏览器的正常功能可能会受到影响。

所谓同源就是说协议 ，域名，端口号完全一致，有一个不一致就会造成跨域问题。

跨域原理：

跨域请求能正常发出去，服务端能接受到请求并正常返回结果，只是结果被拦截了。

跨域只存在于浏览器，不存在于其他平台，比如安卓/java/ios等平台。

之所以会发生跨域是因为受到了同源策略的限制，同源策略要求源相同才能进行正常通信，
即协议，域名，端口号都完全一致。
 

URL ：统一资源定位符，它是www的统一资源定位标志，也就是我们说的网络地址。

它的一般格式为：协议类型://服务器地址:端口号/路径。

这也就是我们说的跨域中的域

SprinBoot跨域的三种解决方法

跨域技术CORS：

 CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

SpringBoot 就对Cross 做了很好的支持。目前有三种跨域方式。

使用 Spring Boot 框架时，最简单的是通过@CrossOrigin注解。

在控制器类或单个方法上添加此注解，如果在类上添加，该类中的所有方法都适用此跨域规则。

例如，可以指定允许的源，像@CrossOrigin(origins = "http://example.com")，

还能设置允许的请求方法和请求头。

如果需要全局配置跨域，可以创建一个配置类，实现WebMvcConfigurer接口，

在addCorsMappings方法中通过CorsConfiguration来设置跨域规则，

包括允许的源、请求方法、请求头、允许跨域的最大时长等，这种全局配置方式适用于整个应用程序的跨域管理。

SpringBoot解决跨域的三种方式:

1. @CrossOrgin注解 ； 一个类
2. 全局配置Mvc，然后就是利用过滤器配置
3. 有一种是利用servlet的过滤器实现

public class MyWebMvcConfig implements WebMvcConfigurer {

    @Override

    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/testCross/**")

                .allowedHeaders("*")

                .allowedMethods("*")

                .allowCredentials(true)

                .allowedOrigins("http://localhost:8093")

                .maxAge(2000);

    }

}

SpringBoot系列（八）分分钟学会Springboot多种解决跨域方式 - 全栈学习笔记 - 博客园

在 Java 的 Servlet 规范中，可以编写跨域过滤器。在过滤器的doFilter方法中，

手动修改响应头来实现跨域。

例如，设置Access - Control -Allow -Origin为允许的源地址，

Access - Control -Allow -Methods为允许的请求类型，

Access - Control -Allow -Headers为允许的请求头，

这种方式灵活性高，可根据具体的业务逻辑和请求特征来定制跨域策略

JavaScript 有 8 种数据类型，

分为基本数据类型和引用数据类型。

基本数据类型

• 数值型（Number），用于表示数字，包含整数和浮点数；
• 字符串型（String），由字符组成，用于文本表示，需用引号包裹；
• 布尔型（Boolean），只有 true 和 false 两个值，用于逻辑判断；
• 未定义型（Undefined），当变量声明但未赋值时就是此类型；
• 空值型（Null），表示空值；
• 符号型（Symbol），是 ES6 引入的，用于创建唯一的标识符。

引用数据类型

• 对象型（Object），是属性和方法的集合，

比如通过对象可以表示一个用户，包含姓名、年龄等属性和相关操作的方法；

• 数组型（Array），是特殊的对象，用于存储多个元素，可以是不同的数据类型，元素通过索引访问。

金额的用什么类型。

最常见的是 Number 类型，它可以存储整数和浮点数，适合表示金额数值，

不过要注意浮点数运算可能存在精度问题。

例如，0.1 + 0.2 在 JavaScript 中可能不会精确等于 0.3。为解决精度问题，

可以使用专门的第三方库，如 BigNumber.js。

前段 = ==  ===区别

 = 赋值

 == 在判断的时候对数值做了 "隐式转换", 比如 0 ==false

 ===叫做严格相等，是指：左右两边不仅值要相等，类型也要相等

Vue版本2和3

JQuery使用$.ajax()实现异步请求

在这里,async默认的设置值为true，这种情况为异步方式

  $.ajax({

        type: "POST",

        url: "/user/getLoginUser",

        async: true,

        dataType: "json",

        contentType: "application/json; charset=UTF-8",

        data: JSON.stringify(params),

        success: function (result) {

            //绑定数据

            $("#td_userId").html(result.userId);

        }

    });

Vue打包

Vue CLI 是一个基于 Webpack 构建的官方脚手架工具。

在开发好 Vue 项目后，通过在命令行中运行npm run build

（如果是基于 Vue CLI 构建的项目，此命令在 package.json 中有配置），

它会将项目中的代码按照 Webpack 的配置规则进行处理，包括压缩代码、处理样式、拆分代码块等操作，

最后生成适合生产环境部署的静态文件，存放在dist目录下。

Vite 是一个新兴的前端构建工具，用于替代传统的 Webpack。

在 Vue 项目中使用 Vite 打包时，同样在命令行中执行相应的打包命令

（例如在 Vite 构建的项目中，一般使用npm run build），

Vite 会快速地将项目代码进行转换、优化和打包，它的优势在于开发阶段的快速启动和热更新，

打包时也能够高效地处理模块，生成部署文件。

Vue 父子组件间的三种通信方式

原文链接：[Vue框架学习笔记]父子组件间的三种通信方式(有实例，速来！)_我有一种父子组建是如何通信的-CSDN博客

Vue2 和 Vue3 存在多方面的区别。

从性能上看，Vue3 在虚拟 DOM 的更新性能上有优化，渲染速度更快。

其采用了静态标记和基于块的编译，在更新时能更精准地识别出需要重新渲染的组件，

减少不必要的更新操作，而 Vue2 在大型项目中渲染效率相对较低。

在 API 方面，Vue3 有组合式 API，像 setup 函数，可以将逻辑相关的代码放在一起，

使代码组织更清晰，更易于复用和维护。

Vue2 主要使用选项式 API，数据、方法等按固定选项分类，在复杂组件中代码可读性会变差。

在响应式原理上，Vue3 使用 Proxy 替代了 Vue2 的 Object.defineProperty。

Proxy 在处理复杂对象和数组时更灵活，能直接监听整个对象，

而 Object.defineProperty 在某些场景下有局限性，比如无法监听对象属性的新增和删除。

在组件方面，Vue3 支持多个根元素，在模板语法上更加灵活，

Vue2 的模板中要求必须有一个根元素。Vue3 对 TypeScript 的支持也更好，

提供了更方便的类型定义和推导，有助于提高代码质量，

这在大型项目和团队协作中很重要，而 Vue2 对 TypeScript 的支持相对较弱。