111

vue-router有哪几种模式

• hash模式: 有#的,hash值发生变化时不会发请求

• history模式,地址发生变化时会重新发起请求,所以会出现刷新页面404的情况, 解决方式在后台: 所有的请求都返回index.html(首页资源)

• 路由传参:

  • params:
  • query
  • 区别:
    • query在地址栏可以看到
    • params 在地址栏看不到
    • query页面刷新不会消失
    • params 页面刷新后会丢失

• 路由跳转方法:

  • 编程式导航: router.push ,router.replace(替换到当前的历史记录,eg: 登录跳转到首页,避免点击浏览器后退键又回到登录页面) ,router.go
  • 定义式导航: router-link

• rouer和route

  • route: 当前的路由对象,上面有params,query
  • rouer: 存放路由操作的一些方法,

• cookie (seeeions)

  • 发送请求时候,浏览器默认会带上当前域名下所有的cookie
  • token所有的请求都在请求拦截器里面加入token,

• 浏览器缓存

  • seeeionsStorage/localStorage/cookie
  • 都不能跨域

axios 拦截器

• 响应拦截器:
  • 关闭loading
  • 对后台的错误码做统一处理; eg: 登录超时登录失效后台会返回一个状态码,根据这个状态码做对应交互处理
• 请求拦截器:
  • 发请求时打开loading
  • 添加一些请求固定参数,eg: token,时间戳

this 指向;

• 方法调用,指向调用它的对象
• 函数调用 指向全局对象
• 事件处理函数中this指向绑定事件处理函数的dom对象;

深拷贝

• json.parsej(son.Stringify()) 对象的循环引用会报错,对象里面的方法拷贝后会丢失,对象里面有正则会丢失
• 值类型才可以 ...扩展运算符 对象..assign方法 值类型可以达到深拷贝效果,引用类型则是浅拷贝

怎样合理使用缓存，提高页面性能：

• 减少http请求 eg：联动选择 例如根据第一选择框选定的值然后请求第二选择框的下拉内容 ，每次选择都请求浪费资源，可以在第一次选择后将返回结果存在seeeionsStorage里面（对象形式，对象的key就是第一选择框选定的值）

• 你在工作中是从哪些方面对页面性能做优化

  • 减少http请求，合理使用缓存。（强制缓存，协商缓存） 计算属性和watch的区别：
  • 计算属性只能同步操作，watch 可以同步可以异步，比如什么改变后需要重新发请求就需要用watch,
  • 计算属性支持缓存，只有依赖数据发生改变，才会重新进行计算， 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed 基于它的依赖进行缓存，当依赖变化时才会重新计算，必须有返回值， 主要应用于计算商品总价等
  • watch监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值
  • 什么时候用到watch :父组件传递给子组件 子组件接受到了父组件传过来的 但是如果这个值在父组件变了 dom重新渲染 这个时候要用watch在子组件监听这个值得变化,或者你可以这么理解 跨页面的组件之间数据传递 一般都是需要我们需要我们手动去监听一下数据得变化得 watch是侦听一个特定的值，当值变化时来进行一些函数，例如分页组件中监听 页码变化，获取对应数据，更换显示内容，还有监听$route变化，解决created 生命周期钩子内函数只能执行一次导致的页面数据不刷新的问题。 vue和jquery的区别
  • jquery需要自己操作dom从而更新视图,如后台返回的数据,需要自己拼接html字符串,并添加到页面上去
  • vue 只需要关心数据,数据驱动视图,数据发生变动时,框架会帮你更新视图.

页面性能优化

• 代码层面 :html语义化,书写代码遵循语义化,代码结构更加清晰,便于维护,增加权重,也便于爬虫的爬取,
• 使用cdn 存放静态资源: 用户访问资源时,会根据dns负载均衡,选用最近的缓存服务器返回资源,提高响应速度.
• 图片的优化
  • 精灵图的使用：why ：1. 减少请求，降低服务器压力。2. 浏览器有并发限制（同一个域名下，比如谷歌浏览器一次最多只发6个请求，要等前面结束后后面才能继续发（限小图）
  • 使用懒加载 原因:1.并发限制,页面图片太多的情况下,可能用户还没看到图片那块,却在占用资源加载,影响其他资源的加载2.图片太多,一次全部加载出来会造成页面卡顿,
    1. so 监听图片进入可视区域在进行加载
    2. 如何加载: 预先用一个统一的预览图写在src里面,把图片的真实地址存在data-url自定义属性里面,运用一个方法 获取图片到屏幕左上角的位置,当top距离小于屏幕高度,则图片进入可视区域,把自定义属性里面的真实地址赋值给src.
  • 防抖节流
    • 防抖 :在一定时间内把多次请求减少为一次请求.eg:搜索查询,在输入文字不断的请求,所以在查询方法里面写一个定时器,间隔相应秒数后再进行请求,并且在清除定时器id(之所以清除id是因为,运用定时器只是延迟请求,没有真正减少请求次数,运动定时器清除上一个定时器的id,则达到了真正的请求次数)
    • 节流 :在特定的时间间隔内发一次请求 eg:监听鼠标移动事件,监听页面滚动行为

          methods: { 
            query(){   //防抖
               clearTimeout(this.timeid) //清除上一次定时器
               this.timeid = setTimeout(()=>{
                    
                },500)
                
            },
             move(){   //节流   //假如在鼠标移动时执行打印
             if(this.isSearch){ //可以设置一个条件  isSearch为true
                 console.log('asdfasdf') 
                 this.isSearch = false
             }
          }
          },
          mounted(){  //节流 当1000后才为true
             setInterval(()=>{
               this.isSearch = true
             },1000)
          },
          ```
    
    

  • 浏览器缓存
    • http缓存
      • 协商缓存 客户端询问服务器 本地资源是否过期,如过期,服务器重新返回资源,未过期则服务器返回状态码304,不会返回任何资源 实现:后端在响应头上设置属性写上文件最后一次修改时间,浏览器第二次请求时会带上最后一次修改时间去询问服务器
      • 强制缓存 则没有这个询问过程 后端设置一个有效期,在这个期间内 都会使用本地资源,有效期外重新发请求

跨域问题

• 浏览器同源策略的限制，安全问题（避免一个网站可以调用其他网站的接口引发的安全问题i） 协议域名端口任何一个不同都会引起跨域
• 解决方法：
• 后端配置允许跨域（ Access-Control-Allow-Origin）
• 自己配置反向代理（浏览器有同源策略，服务器之间是不受限制的，请求先发到自己页面所在的服务器，然后由自己页面服务器发给目标服务器，再由目标服务器返回结果）
• jsonp 图片和script的src也是发请求（图片只能发不能收，so只能用script）不受同源策略的限制，不存在跨域问题，利用这一特性，可以创建script标签 把请求地址赋值给src ，把标签添加到页面。因为script标签 把他获取到的资源当作js执行一遍，所以要先在追加到页面之前自己定义一个全局的方法， 后端返回方法调用（方法名和自己定义的方法名相同），要返回的内容当作参数，

rem em px

• rem html的字体大小 em父节点的字体大小 px就是css像素

移动端适配方案

• 淘宝适配方案 监听视口的变动，获取视口的大小（第三方库 ：lib-flexible）原理：window.screen.width /设计稿等分的份数 设置为html的字体大小也就是1rem。 比如750px设计稿等分10份，一份75px；如果在设计稿量取了一个20px的长度，20px/75px 这个长度占了设计稿多少份，用这个值乘以1rem。
• 缺陷：要在页面的顶部放一段监听视口的js代码，js会阻塞页面的渲染（一般js代码放在body的下面，js会阻塞页面的渲染，）
• vw替代rem （把屏幕等分100份，每一份就是1vw）
• keep-alive 缓存组件 打开一个页面 查询列表和详情 点击到相应的页数点击某一条数据进入详情页面，再返回内容清空了,(组件被销毁了)用户体验不好 加上keep-alive标签缓存组件,如果直接加上就会缓存所有组件, 配合全局导航守卫,精细化 控制想要的组件缓存.(路由从a到b设置include属性 存到vuex ,当跳转到其他页面避免直接出现缓存页面,用户体验莫名其妙,设置清除不需要缓存的组件名称. 传送门

  
    <!-- App.vue-->
    <template>
      <div id="app">
        <keep-alive :include="include.join(',')"> //将数组转为字符串
          <router-view/>
        </keep-alive>
        <!-- <router-view/> -->
      </div>
    </template>
    <script>
    export default {
      data(){
        return {
          include:[]
        }
      }
    }
  

客户端和服务端渲染的区别

- 服务端渲染 在服务端已经把页面渲染完毕,给你返回,客户端只需要展示
  - 更利于爬虫爬取,对seo更友好
  - 在服务端生成页面结构 服务器压力更大
- 客户端渲染 服务端返回的只是简单的html结构,具体内容要在在客户端执行js动态生成

vue

为什么data是个函数不是对象

因为对象是引用类型,如果一个组件在页面多次引用,会相互影响,如果是想下拉框,选择一个值,其他下拉框都会变动

所以使用函数每次都会返回一个新的对象