1、vuex和pinia相关
Pinia和Vuex的区别
-
Vuex采用全局单例模式，通过一个store对象来管理所有的状态，组件通过store对象来获取和修改状态。而Pinia则采用了分离模式，每个组件都拥有自己的store实例，通过在组件中创建store实例来管理状态。
-
vuex的5中状态
State(状态)：保存需要管理的数据
Getters(获取器)：获取state中的状态的属性
Mutations(变更)：变更state数据的方法
Actions(动作)：异步修改状态，可以包含多个异步操作，最后由Mutation去更改state
Modules(模块)：将store分隔为多个模块化的一部分，每个模块都有自己的statePinia只有state、getters、actions；Pinia在actions中支持异步操作,因此不需要Mutation；Pinia允许使用多个store实例，所以不需要Module
-
Pinia的特点
支持vue2选项式api和vue3组合式api写法
TypeScript支持很好
Pinia体积更小，只有1kb左右，性能更好
Pinia可以在组件中直接修改state中的数据 -
使用
1、在main.js中引入Pinia
2、使用defineStore方法创建各种store，两个参数name和配置对象（state、getters、actions）；
3、使用store，引入-创建示实例后可以点出属性名（结构赋值会丢失响应式，需要用storeToRefs函数保持响应式）
4、getters获取数据，也可以对数据进行处理类似于计算属性；actions修改数据
2、跨域问题
• 什么是跨域？
跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
~同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；
• 解决跨域问题：
jsonp：利用script标签不受浏览器同源策略的限制，然后和后端一起配合来解决跨域问题的，创建动态script标签。
Nginx反向代理：利用服务器请求服务器不受浏览器同源策略的限制实现；客户端请求Nginx服务器，Nginx服务器再请求真实的服务器。
3、less和scss的区别
Less基于JavaScript，在客户端处理，Sass基于Ruby,在服务端处理
Less定义变量用@，Sass用$
Sass支持条件语句和循环语句和自定义函数，less不支持
4、HTML语义化标签
让标签有自己的含义
article：文章标签
city：城市
address：地址
aside：边沿
footer：尾部
header：头部
section：正体部分
code：代码
br：换行标签
5、CSS新特性
老新特性（选择器、盒模型、背景、边框和阴影、文字效果、动画和过度、颜色渐变）
最近的新特性：
1、媒体查询语法优化
----现在可以使用>=、<=运算符
2、新增容器查询（@container）
----类似于媒体查询，媒体查询依据浏览器视窗大小，容器依据的是元素的父元素或祖先元素的大小。使用container标识被查询的容器
3、级联层（解决样式被覆盖，使用混乱的场景）
----可以利用级联层将 css 进行模块的划分，按照先后顺序，更好的控制样式。
4、颜色函数
color-mix() //给定的色彩空间内将两个颜色混合成一个
color-contrast() //查找颜色列表中与给定的颜色（一般为背景色）相比较，对比度最高的颜色并将其输出
5、伪类选择器has（）
也可以叫父类选择器
a:has(span) //只会匹配包含span子元素的a元素
6、vue2对比vue3
- API不同：vue2使用选项式API；vue3使用合成式API；
- 数据响应式原理不同：vue2通过Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现；vue3使用了 es6 的 ProxyAPI 对数据代理；
- 因为diff算法优化：vue2dom全量对比，vue3对于不参与更新的元素，会做静态提升，只会被创建一次；遂vue3性能比2好；
- 生命周期函数不同
7、TS和JS的区别
- Typescript增加了静态类型、类、接口和接口注解；
- TS 支持静态类型检查，它可以在编译时检查类型错误，从而减少运行时错误和调试时间。而 JS 是动态类型语言，类型检查是在运行时进行的。
8、ES6新特性
- let和const：都是生命静态变量，区别const声明时必须赋初值，let则非必须；
- symbol：表示一个独一无二的值，不能参与运算；
- 模版字符串：反引号``；
- 解构复制-拓展运算符；
- 新增Map和Set对象：Map用来保存键值对，Set集合，元素具有唯一性，可利用此特性去重；
- 数组新增方法：includes()、map()、filter()、forEach()、find()、some()、every()；
- 箭头函数： 箭头函数和普通函数最大的区别在于其内部this永远指向其父级对象的this；
- 运算符：…拓展运算符；?.可算链；函数绑定运算符::
9、修改组件的样式
1.利用参数动态给定class值修改样式
2.样式穿透：deep；
10、获取不到class怎么改变样式（如下拉框会消失）
11、前端权限控制
在store里面保存权限标识，自定义指令v-auth检查是否包含标识，有则显示按钮；
12、PDA相关
利用PDA的系统广播，监听广播动作，获取数据传递出去；
13、页面加载过程中做了哪些事情 ？
1.DNS域名解析
2.建立TCP连接（三次握手）：客户端发送请求报文 -> 服务器收到报文做出应答 -> 客户端收到应答发送确认收到
3.发送HTTP请求
4.服务器处理请求
5.返回响应结果
6.关闭TCP连接（四次挥手）：AB代表任意一方，A第一次挥手告别 -> B回复收到关闭请求 -> B没有要传输的数据后发送关闭请求 ->A收到关闭请求关闭连接，B等待2msl后没有收到回复表示A已经关闭，B也关闭连接
7.浏览器解析HTML
8.浏览器页面渲染
14、创建vue项目
1.搭建vue项目环境
2.整理项目文件
3.在main.js中引入需要的全局文件（ui…）
4.配置组件路由
5.运行
15、什么是插槽，有几种类型
vue中的插槽，指的是子组件中提供给父组件使用的一个占位符；
默认插槽
在封装组件时，可以通过元素定义插槽，从而为用户预留内容占位符。
具名插槽
如果在封装组件时需要预留多个插槽节点，则需要为每个 插槽指定具体的 name 名称。
这种带有具体名称的插槽叫做“具名插槽”。
作用域插槽
作用域插槽，就是带参数（数据）的插槽；
在子组件的插槽中带入参数（数据）提供给父组件使用，该参数（数据）仅在插槽内有效，父组件可以根据子组件中传过来的插槽参数（数据）对展示内容进行定制。
16、捕获和冒泡
捕获
事件从文档的根节点（通常是 元素）向下传播到目标元素。
冒泡
事件从目标元素开始向外传播，逐级冒泡至文档（HTML）的根节点。
先捕获后冒泡，事件一般在冒泡阶段触发
嵌套的div都有click事件，怎么做只触发内层或者外层div的click事件：
addEventListener（）：为元素添加监听事件，3个参数，1.事件名；2.执行函数；3.触发类型：true捕获阶段执行、false冒泡阶段执行。
stopPropagation()：阻止事件传播
只触发里层：为里层的元素添加监听事件，用stopPropagation()方法在冒泡阶（false）段阻止事件冒泡。
只触发外层：同内层，只不过在捕获阶段（true）用stopPropagation()阻止事件捕获。
17、组件间传值
1.props / $emit
2.全局事件总线 $emit / $on： $emit（事件名，数据）触发事件、 $on（事件名，回调函数）监听事件
3.vuex / pinia
4. $attrs / $listeners
5. provide / inject
6. $parent / $children
18、作用域、闭包、原型链
作用域：作用域表示一个变量可以使用的范围，主要分为全局作用域和函数作用域。ES6新增块级作用域
闭包：函数内部可以访问函数外部的变量，函数外部无法访问函数内部的变量。
原型链：对象在创建时会被赋予一个非空的值作为原型对象的引用。原型对象也是一个对象，这个原型对象被创建时也会被赋予一个非空的值作为其原型对象（即原型对象的原型）的引用，如此循环下去是构成一条无限长的访问链路，就是原型链，最后一个特殊的对象在创建时会被赋予一个null值作为其原型对象的引用，这个对象的原型为空。可以把这个对象看做最初原型，也就是原型链的终点。
1945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
