session和cookie的区别

1. 什么是Cookie？

属性

Cookie是一种在客户端存储数据的机制，它将数据以键值对的形式存储在用户的浏览器中。Cookie具有以下属性：

• 名称和值：每个Cookie都有一个名称和对应的值，以键值对的形式表示。
• 域（Domain）：Cookie的域属性指定了可以访问Cookie的域名。默认情况下，Cookie的域属性设置为创建Cookie的页面的域名。
• 路径（Path）：Cookie的路径属性指定了可以访问Cookie的路径。默认情况下，Cookie的路径属性设置为创建Cookie的页面的路径。
• 过期时间（Expires/Max-Age）：Cookie的过期时间属性指定了Cookie的有效期限。可以通过设置Expires或Max-Age属性来定义过期时间。过期时间可以是一个具体的日期和时间，也可以是一个从当前时间开始的时间段。
• 安全标志（Secure）：Cookie的安全标志属性指定了是否只在通过HTTPS协议发送请求时才发送Cookie。
• 同站点标志（SameSite）：Cookie的同站点标志属性指定了是否限制Cookie只能在同一站点发送。可以设置为Strict（仅允许来自当前站点的请求携带Cookie）或Lax（允许部分跨站点请求携带Cookie）。

应用场景

Cookie在Web开发中有多种应用场景，包括：

• 会话管理：Cookie常用于存储会话标识符，以便在用户访问不同页面时保持会话状态。
• 身份验证：Cookie可以用于存储用户的身份验证凭证或令牌，以便在用户下次访问时自动登录。
• 个性化设置：Cookie可以用于存储用户的个性化首选项，例如语言偏好、主题设置等。
• 追踪和分析：Cookie可以

用于追踪用户的行为和进行网站分析，例如记录用户访问的页面、点击的链接等。
以下是一个使用JavaScript创建和读取Cookie的示例：

// 设置Cookie
document.cookie = "username=John Doe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/; secure; SameSite=Strict";

// 读取Cookie
const cookies = document.cookie.split("; ");
for (let i = 0; i < cookies.length; i++) {
  const cookie = cookies[i].split("=");
  const name = cookie[0];
  const value = cookie[1];
  console.log(name + ": " + value);
}

2. 什么是Session？

属性

Session是一种在服务器端存储和跟踪用户会话状态的机制。Session具有以下属性：

• 存储位置：Session数据存储在服务器端的内存或持久化介质中，而不是存储在客户端。
• 会话ID：每个会话都有一个唯一的会话ID，用于标识该会话。会话ID通常通过Cookie或URL参数发送给客户端，并在后续请求中用于识别会话。
• 过期时间：Session可以设置过期时间，以控制会话的有效期。过期时间可以是一个具体的日期和时间，也可以是一个从会话创建时开始的时间段。
• 安全性：Session的会话ID需要进行保护，以防止会话劫持和其他安全问题。

应用场景

Session在Web开发中有多种应用场景，包括：

• 用户身份验证：Session用于存储用户的身份验证状态，以便在用户访问需要验证的资源时进行验证。
• 购物车：Session用于存储用户的购物车内容，以便在用户进行结账或继续购物时保持购物车状态。
• 个性化设置：Session可以用于存储用户的个性化首选项，例如语言偏好、主题设置等。

以下是一个使用Express.js处理Session的示例：

const express = require("express");
const session = require("express-session");

const app = express();

app.use(session({
  secret: "mysecret",
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true, sameSite: "strict", httpOnly: true }
}));

app.get("/", (req, res) => {
  req.session.username = "John Doe";
  res.send("Session is set.");
});

app.get("/profile", (req, res) => {
  const username = req.session.username;
  res.send("Welcome, " + username);
});

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

vue和jQuery的区别与优势

Vue更注重组件化和数据驱动的开发思想，提供了更加优雅的解决方案。 而jQuery则更注重DOM操作和事件处理，适用于简单的交互效果和兼容性要求较低的项目
- 更现代的开发体验：Vue 提供了一种更现代、更优雅的开发方式，允许您构建可维护和可测试的应用程序。

• 更好的性能：Vue 通过虚拟 DOM 和渐进式框架的概念提供了出色的性能。这意味着您可以更快地更新用户界面，而不会引发性能问题。

• 组件化：Vue 的组件化方法使得开发更具可扩展性和可重用性。这有助于构建大型应用程序。

• 社区和生态系统：Vue 生态系统非常庞大，有大量的插件和库可供选择。Vue 社区也非常活跃，提供了大量的支持和教程。

• 响应式数据绑定：Vue 提供了强大的响应式数据绑定，使得状态管理更容易。

单页面应用（SPA）与多页面应用（MPA）的区别

单页面应用的优点有：

• 用户体验好：内容的改变不需要重新加载整个页面，基于这一点SPA对服务器压力较小。
• 前后端分离。
• 页面效果炫酷：比如切换页面内容时的专场动画。

单页面应用的缺点有：

• 不利于SEO：因为单页面应用不利于搜索引擎优化，搜索引擎可能无法有效地抓取和索引网站内容。
• 导航不可用：如果一定要导航需要自行实现前进、后退。 （由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）。
• 初次加载时耗时多。
• 页面复杂度提高很多。

多页面应用的优点有：

• 多个页面：每个页面可以有自己的独立性，可以单独设计和实现。
• 适用于大型应用：对于大型应用，使用多页面可以更好地组织和管理内容，提高用户体验。

多页面应用的缺点有：

• 开发难度高：多页面应用需要更多的开发时间和资源，因为每个页面都需要单独设计和实现。
• 页面跳转慢：多页面应用需要进行页面跳转，这可能会导致加载速度慢和用户体验不佳。
• 维护难度大：多页面应用需要更多的维护和管理，因为每个页面都有自己的独立性，需要单独进行更新和维护。

单页面应用的组成主要是由一个主页面的HTML、CSS和JavaScript代码组成，而多页面应用则是由多个HTML、CSS和JavaScript代码组成，每个页面都有自己的独立性。例如，一个电商网站可能会有一个首页、产品页面、购物车页面和订单页面等多个页面，每个页面都有自己的内容和功能。

This是什么 vue

• 在Vue中，this 是指Vue 实例对象。 Vue 实例是一个通过new Vue() 创建的对象，它用于管理整个Vue 应用程序的状态和行为。 在Vue 的生命周期中，this 代表当前Vue 实例
• 在Vue组件中，this 指向当前组件的实例。可以通过 this 访问组件的属性和方法。

深拷贝和浅拷贝

浅拷贝（Shallow Copy）

浅拷贝是指创建一个新对象，然后将原对象的属性值逐一复制到新对象中。但是，如果原对象的属性值是引用类型（如数组、对象等），那么浅拷贝只会复制引用地址，而不会复制引用类型的值。因此，当修改新对象中的引用类型值时，原对象中的引用类型值也会被修改，它们之间仍然存在相互影响的问题。

深拷贝（Deep Copy）

深拷贝是指创建一个新对象，然后递归地将原对象的属性值复制到新对象中。对于引用类型的属性值，深拷贝会创建一个新的引用类型并将其值复制过来，而不是简单地复制引用地址。因此，修改新对象中的引用类型值时，原对象中的引用类型值不会受到影响，它们之间不存在相互影响的问题。

Vue2和Vue3响应式原理实现的核心

vue2的响应式原理

Vue2的响应式原理是通过数据劫持和发布-订阅模式实现的。 当我们将一个普通的JavaScript对象传递给Vue实例的data选项时，Vue将遍历这个对象的所有属性，并使用Object. defineProperty方法将它们转换为getter和setter，从而实现对数据的劫持

vue3的响应式原理

vue3的响应式原理，主要是利用Proxy 来代理目标数据对象。 通过代理，我们可以在对目标数据对象操作前做一些事情，例如：在获取对象的某个属性值的时候，把相应的函数存放起来，这个被保存起来的函数，我们不妨称之为“依赖函数”；然后，在更新对象的这个属性值的之后，我们可以触发之前保存起来的“依赖函数”。

vue为什么是渐进式框架

Vue.js之所以被称为渐进式的框架，是因为它可以逐步引入到现有项目中，支持组件化开发，采用数据驱动和响应式的设计，同时拥有丰富的插件生态系统，使得开发者可以根据项目需求来选择使用Vue.js的功能。 Vue是一种渐进式JavaScript框架，这意味着可以根据项目的需求，逐步引入和使用Vue的功能和特性。

webpack工作原理

Webpack的工作原理是将各种资源文件看作模块，建立依赖树，将模块编译成浏览器能够识别的格式，然后根据依赖树将模块组合成一个bundle文件，最后将bundle文件发布到网站上
深入理解Webpack原理

webpack常用的配置

项目有45个地址的时候怎么取相应的地址

使用.env文件配置多个地址
VUE项目使用.env配置多种环境以及如何加载环境

vuex刷新数据丢失最好的解决办法

计算属性和监听的区别，以及案例

Js和ts的区别

祖孙组件怎么传输数据vue2

通过事件传递：

• 使用事件总线（Event Bus）
• 使用 this.$emit 和 this.$on 进行事件的触发和监听

通过 Vuex 状态管理：

• 使用 Vuex 进行全局状态管理，在祖父组件和孙组件之间共享状态

通过 props 和 $attrs/$listeners：

使用 props 将数据从祖父组件传递到父组件，再从父组件传递到孙组件
使用 $attrs 和 $listeners 将父组件接收到的属性和事件直接传递给孙组件

父子组件的生命周期调用顺序

主要分为渲染、更新、销毁三个部分

渲染顺序 （先父后子，完成顺序：先子后父）

子组件先挂载，然后到父组件
父 beforeCreate->父 created->父 beforeMount->子 beforeCreate->子 created->子 beforeMount->子 mounted->父 mounted

更新顺序 （父更新导致子更新，子更新完成后父）

子组件更新过程

父 beforeUpdate->子 beforeUpdate->子 updated->父 updated

父组件更新过程

父 beforeUpdate->父 updated

销毁顺序（ 先父后子，完成顺序：先子后父）

父 beforeDestroy->子 beforeDestroy->子 destroyed->父 destroyed