通过复习面试题目学到的知识点(对自己的查漏补缺)

html篇

一、vue中访问后台所携带的token值为什么会放在cookie中，而不是放在localStorage和sessionStorage中
    cookie采取同源策略，只有相同域名的网页才能获取域名对应的cookie，而别人在其他域名无法获取你的cookie，也就无法获取你的token，所以当别人伪造请求时，token和cookie中的token是绝对不一致的

二、强制缓存、协商缓存
    强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程。
    控制强制缓存字段的分别是Expires和Cache Control，其中Cache Control比Expires优先级高
    强制缓存主要分三种：
    1、不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求（跟第一次请求一致
    2、存在该缓存结果和缓存标识，但结果已经失效，强制缓存失效，则使用协商缓存
    3、存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，则直接返回结果

    协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，同样，协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回浏览器的。
    控制协商缓存的字段分别有：Last-Modified/If-Modified-Since, Etag/If-None-Match,其中Etag/If-None-Match的优先级比Last-Modified/If-Modified-Since高
    协商缓存主要有以下两种情况：
    1、协商缓存生效，返回304（缓存接着用？）
    2、协商缓存失效，返回200和请求结果

三、dom缺点：体积大、速度慢、效率低

css篇

一、伪类和伪元素
    伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。
    例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为 已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为伪类。
    伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。
    例如，我们可以通过:before来在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见 这些文本，但是它实际上并不在DOM文档中。

二、background-image：
    url('URL')    ：图像的URL
    none：无图像背景会显示。这是默认
    linear-gradient()：创建一个线性渐变的 "图像"(从上到下)
    radial-gradient()：用径向渐变创建 "图像"。 (center to edges)
    repeating-linear-gradient()：创建重复的线性渐变 "图像"。
    repeating-radial-gradient()：创建重复的径向渐变 "图像"
    inherit：指定背景图像应该从父元素继承

三、CSS继承性属性分类
    1、字体系列属性
        font、font-size、font-family、font-style、font-variant、font-stretch、font-size-adjust
    2、文本系列属性
        text-algin、text-indent、line-height、word-spacing、letter-spacing、text-transform、color、direction
    3、可见属性
        visiblility
    4、表格布局属性
        caption-side、border-callapse、border-spacing、empty-cells、table-layout
    5、列表属性
        list-style-type、list-style-image、list-style-position、list-style
    6、生成内容属性
        quotes
    7、光标属性
        cursor
    8、页面样式属性
        page、page-break-inside、windows、orphans
    9、声音样式属性
        speak、speak-punctuation、speak-numeral、speak-header、speech-rate、
        volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

四、css溢出部分变成点点
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;

五、z-index
    设置元素的堆叠顺序或者叫做元素层级，z-index的值越大，元素的层级越高。当元素发生重叠时，层级高的元素会覆盖在层级低的元素的上面，使层级低的元素的重叠部分被遮盖住。
 

JavaScript篇

一、判断对象是否为空：
    Object.keys(obj).length == 0 //es6写法
    JSON.stringfy(obj) === "{}"
    Object.getOwnPropertyNames(obj).length == 0
二、query和params传参的区别
    query传递显示参数,params传递不显示参数,params相对于query来说较安全一点
三、route和router的区别
    this.$router是全局路由器对象 this.$route是当前激活的路由对象，包含了当前的路由信息。
    router（router存储的是与路由相关的方法）：
    1.字符串 this.$router.push('/home')
    2.对象  this.$router.push({path:'home'})
    3.命名的路由 this.$router.push({name:'home',params:{id:1}})
    4.带查询参数 this.$router.push({path:'home',query:{id:1}})
    route（route存储的是与路由相关的属性，相当于当前正在跳转的路由对象）：
    console.log(this.$route);
    {    
        fullPath:'/home'       //包含查询参数和 hash 的完整路径
        path:'',               //当前路由路径，绝对路径
        name:'Home',
        meta:{auth:true},      //是否需要登录
        hash:'',
        params:{},
        query:{id:1}               //表示 URL 查询参数,相当于/home?id=1
        matched:??
    }
    
四、web常见的攻击方式
    XSS跨站脚本攻击：盗取存储在客户端的cookie或者其他网站用于识别客户端身份的敏感信息。根据攻击的来源，XSS攻击可以分成：存储型、反射型、DOM型
    XSS的预防：1、对于攻击者提交恶意代码，可以在用户输入的过程中，过滤掉用户输入的恶劣代码，然后提交给后端，但是如果攻击者绕开前端请求，直接构造请求就不能预防了
              2、防止浏览器执行恶意代码
    CSRF跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求
            1、阻止不明外域的访问：同源检测、Samesite Cookie
            2、提交时要求附加本域才能获取的信息：CSRF Token、双重Cookie验证
    SQL注入：通过将恶意的 Sql查询或添加语句插入到应用的输入参数中，再在后台 Sql服务器上解析执行进行的攻击
            1、严格检查输入变量的类型和格式
            2、过滤和转义特殊字符
            3、对访问数据库的Web应用程序采用Web应用防火墙

五、同步和异步的区别
    同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，在相应用户，用户体验不好。
    异步，不用等所有操作等做完，就相应用户请求。即先相应用户请求，然后慢慢去写数据库，用户体验较好。

六、设置cookie后端如何获取
    前端js设置cookie的name、value值，后端利用name获取指定cookie的value值

vue篇

一、子组件修改父组件传递过来的值
    可以通过将父组件传递过来的值拷贝出来使用并修改。

二、路由实现两种方式：hash和history 区别
    hash：url后面会加上#，hash值就是url#号开始到结束的部分。hash值变化浏览器不会重新发起请求，但是会触发window.hashChange事件，获取hash值并根据hash值修改页面内容，达到前端路由目的。
    history：history就是我们平时看到的正常的连接形式。history模式基于window.history对象的方法。
    history.forward()：在历史记录中前进一步
    history.back()：在历史记录中后退一步
    history.go(n)：在历史记录中跳转n步骤，n=0为刷新本页,n=-1为后退一页。
    history.pushState(data[,title][,url])：向历史记录中追加一条记录
    history.replaceState(data[,title][,url])：替换当前页在历史记录中的信息。
    history.state：是一个属性，可以得到当前页的state信息。
    window.onpopstate：是一个事件，在点击浏览器后退按钮或js调用forward()、back()、go()时触发。监听函数中可传入一个event对象，event.state即为通过pushState()或replaceState()方法传入的data参数
    history模式原理可以这样理解，首先我们要改造我们的超链接，给每个超链接增加onclick方法，阻止默认的超链接跳转，改用history.pushState或history.replaceState来更改浏览器中的url，并修改页面内容。由于通过history的api调整，并不会向后端发起请求，所以也就达到了前端路由的目的，点击刷新，会重新向后端服务器发送请求
    如果用户使用浏览器的前进后退按钮，则会触发window.onpopstate事件，监听页面根据路由地址修改页面内容。
    hash 能兼容到IE8， history 只能兼容到 IE10

三、vm.$set(obj, key, val) 做了什么
    vm.set 用于向响应式对象添加一个新的 property，并确保这个新的 property 同样是响应式的，并触发视图更新。

四、vue2和vue3的区别
    速度更快、体积减少、更易维护、更接近原生、更易使用
    vue2：数据劫持以及发布者订阅模式，核心是Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。其中的get和set方法实现响应式，但是对一个对象进行删除与添加属性操作，无法劫持到，所以在Vue2中，增加了set、delete API，并且对数组api方法进行一个重写。vue2存在问题：检测不到对象属性的添加和删除、数组API方法无法监听到，需要对每个属性进行遍历监听，如果嵌套对象，需要深层监听，造成性能问题。
    vue3：核心是Proxy的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作，这就完全可以代理所有属性了。
    区别：Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的，Proxy可以直接监听数组的变化（push、shift、splice），Proxy 不兼容IE
         Object.defineProperty只能遍历对象属性进行劫持，可以兼容IE

五、vue3的组合式（Composition API）和vue2的选项式（Options API）区别
    Options API：过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑。
    Composition API：组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合）
    1、在逻辑组织和逻辑复用方面，Composition API是优于Options API
    2、因为Composition API几乎是函数，会有更好的类型推断。
    3、Composition API中见不到this的使用，减少了this指向不明的情况
    4、如果是小型组件，可以继续使用Options API，也是十分友好的。

自己整理，如有不对的地方请指教！