常见问题的解答
vue的状态管理机制
用于不同组件间共享和获取数据
数据统一性：可以通过同一处获取数据
方便调试
- vuex（大型项目）：state（状态），mutations（修改），getter（获取数据），action（动作），modules（模块【每个模块有自己的state，mutation等】）。组件触发Action，Action调用mutations，mutations改变state，Vue会响应state的变化，更新页面
- pinia（中小型项目）
vue的渲染过程
- 初始化Vue实例
- 初始化响应式数据
- 生成虚拟DOM
- html生成DOM树，css生成css树
- 渲染可视化元素（除了script，metria标签和display:none元素）
- 找到css树中对应的规则
- 生命周期钩子触发
- 浏览器渲染
虚拟DOM
- 更高效的更新页面：页面更新时，会重新生成一个虚拟DOM，会通过diff算法对比得到更新的地方，然后将其对应到真实dom上，就只需要更新更改的部分
- 虚拟dom需要消耗内存空间，页面越复杂，消耗内存越多
vue3的父子组件传值
父传子：
父组件在标签上加入:message="数据"，子组件用defineProps接收props
<template>
<Child :message="ma"></Child>
</template>
<script setup>
let ma="我是传的值"
</script>
<template>
<p>{{ma}}</p>
</template>
<script setup>
defineProps['ma']
</script>
子传父：
子组件通过defineEmit方法创建一个emit对象，然后用emit对象传变量名和值，父组件在标签上用：@变量名="方法a"，接着在a方法中写对应的逻辑：例如function a(message){m=message}
<script setup>
let emit=defineEmits()
emit("name","我是传的值")
</script>
<template>
<div @name="k"></div>
</template>
<scrip setup>
let val=ref('')
function k(message){
val.value=message
}
</scrip>
如何解决跨域问题
这个就算存在跨域问题，前端发送的请求会正常发送给后端，后端会将数据发送给前端浏览器，但是会由于跨域会报错，不能正常将数据返回给页面
- jsonp
利用了script标签不遵循同源策略实现的，在前端可以创建一个script标签，将请求的url设置为script标签的src属性，并且这个url需要加上callback函数，然后将这个script标签插入到页面，就会发送请求给后端，后端将callback的参数作为函数名，带上返回给前端的参数返回给前端。前端收到后，会执行回调函数
缺点：只能支持get类型的请求
- 跨域资源共享（CORS）
前端进行请求拦截时，在请求头中加入Origin字段，内容是（当前的协议+域名+端口），后端接收到这个请求时，会在头部信息中加入几个信息（Access-Control-Allow-Origin和Access-Control-Allow-Credentials【是否运行携带cookie】），前端浏览器收到数据后，判断头部信息，如果是同源信息就会将浏览器的数据返回到页面上，正常展示
