Vue

watch

1.

跨域

1. 协议、域名、端口号相同才算在同一个域
2. 只发生在浏览器的请求，不会发生在浏览器请求服务器

解决

1. 在响应头添加允许跨域字段

   Access-Control-Allow-Origin

2. JSONP只支持get请求，不支持post请求

3. 反向代理

   在浏览器与服务器通信之间增加一个反向代理（与浏览器在同一个域中），这样一来就能解决跨域问题

SSR | 服务端渲染

JWT

1. JSON Web Token，通过数字签名的方式，以JSON对象为载体，在不同的服务中断之间安全的传输信息。

2. JWT最常见的应用场景时 授权认证，一旦用户登录，后续每个请求都会包含JWT，系统在每次处理用户请求之前，都要先进行JWT安全校验，通过之后在处理。

3. 三部分组成，用.拼接

   header （算法 + 加密方式）

   payload （载荷，存放有效信息的地方），加密

   Signature （签名），对上诉两部分使用.拼接再次进行加密操作

keep-alive

1. 不设置keep-alive的话组件在进行切换的过程中会不断的进行创建和销毁。
2. keep-alive可以实现保存组件的状态(譬如组件在切换之前是黄色，当用户进行页面切换时，再次回到页面可以保留黄色状态)
3. 内置组件，包裹路由跳转，保留组件状态，防止重复渲染DOM

nextTick

1. this.$nextTick() 会在dom渲染完毕后执行该函数，就可以获取到dom渲染完毕之后的数值
2. Vue进行异步渲染是批量的

SPA

1. 单页面应用，切换快，用户体验好
2. 首屏加载慢，毕竟首次加载会将资源统一加载
3. 不利于搜索引擎优化

双向绑定原理

1. 利用Object.defineProperty(,,{})进行数据劫持，get、set数据监听

vite目录

vite为什么能执行这么快的原因

模板语法和vue指令

v-text v-once v-bind v-on

diff算法和虚拟节点

ref

支持所有类型

reactive

支支持引用类型

取值和赋值都需要.value

toRef

他是 可以修改非响应对象的值，但不会驱使视图发生变化，一般不使用；一般只针对响应式对象

Vue3响应式原理

Proxy

组件

父子组件通信

// Parent.vue

//这是将父组件数据传递给子组件
//:data=data 其中:data是任意名称都可
<child :data=data></child>
// 需要传递数据
const data = '传给子组件数据'

// 父组件接收子组件传递过来的参数
<child @onClick='getName'><child>
const getName = (name:string) => {
	console.log(name)
}

// Child.vue

// 子组件接收父组件传递过来的数据
<div>{{data}}<div>
const props = defineProps(['data']) || const props = defineProps({
	data: {
		type: string,
		default: '默认值'
	}
})

// 子组件向父组件传递参数
<div @click='sendToParent'></div>
const emit = defineEmits(['onClick'])
const sendToParent = () => {
	// 派发事件
	emit('onClick', '后面可以传递多个参数，逗号隔开即可')
}

生命周期

优化首屏加载时间

异步组件

• 按需引入
• 配合v-if使用，否则没啥效果
• 可以进行import懒加载，这样在打包的时候能够进行分包处理，减少主包体积，可以做个骨架屏
• https://www.bilibili.com/video/BV1dS4y1y7vd?p=20&spm_id_from=pageDriver&vd_source=e813124b498aed9a53d61aa054a14f06

普通加载组件

路由懒加载

动态组件

减少if啥的条件判断使用

进行tab切换，组件会被频繁的挂载卸载，可以使用keepalive对组件进行保持

依赖注入

点对点传递

provide提供数据，inject注入数据