面试总结(二)

水晶大葡萄
389 阅读3分钟

1. 跨域

  • JSONP为什么能解决跨域问题: script标签的src属性并不被同源策略所约束。通过script标签引入js文件，这个js文件又会返回一个js函数调用，也就是请求后通过callback的方式回传结果。不受同源策略的限制；兼容性更好；支持老版本浏览器；只支持get请求；
  • jsonp返回的内容和json有什么不同:json是理想的数据交换格式，但没办法跨域直接获取，于是就将json包裹(padding)在一个合法的js语句中作为js文件传过去。这就是json和jsonp的区别，json是想要的东西，jsonp是达到这个目的而普遍采用的一种方法，当然最终获得和处理的还是json。所以说json是目的，jsonp只是手段。json总会用到，而jsonp只有在跨域获取数据才会用到。
  • CORS 跨域: 普通跨域请求：只需服务器端设置Access-Control-Allow-Origin;带cookie跨域请求：前后端都需要进行设置,根据xhr.withCredentials字段判断是否带有cookie
  • vue-jsonp: vue中使用jsonp方式跨域
  • 反向代理
module.exports = {
  devServer: {
    open: true,
    proxy: {
      "/api": {
        target: "http://192.168.0.17:8088",
        changeOrigin: true, //允许跨域
        pathRewrite: {
          "^/api": "",
          //会将请求/api/xuanke/index.php替换为/xuanke/index.php
        },
      },
    },
  },
};

2. CSS选择器( 三大特性 )

常用选择器：

  1. 标签选择器： span { color: red }
  2. 通用选择器: * {color: red }
  3. 类选择器: .className: { color: red}
  4. id选择器: #idName: {color: red}
  5. 后代选择器: .parent .child {}
  6. 子选择器: div > span {}
  7. 相邻兄弟选择器: .parent + .child {}
  8. 通用兄弟选择器: .parent ~ .child {}
  9. 并集选择器: .parent ,.child {}
  10. 交集选择器: div.className（#id） css三大特性：
    1、继承：父级文本样式被子级继承
    2、层叠：当样式发生冲突时，权重低的样式会被覆盖
    3、优先级：
    ！important > 行内样式 > id > 类 > 标签 > * > 继承
    遵循就近原则

3. 请求方式(常见)

  1. get请求: 地址栏传参，用于查找
  2. post请求：请求体传参，用于新增
  3. put请求：类似post请求，用于更新
  4. delete请求： 用于删除
  5. options请求：请求预检，判断请求是否安全

4. Vue全家桶

  1. vue-cli,vue脚手架
  2. vueRouter
  3. vuex
  4. Axios
  5. UI框架

5. 多维数组转一维var arr = [1,[2,[3,[4,[5,6]]]]]

  1. arr.join().split(',').map(Number)

  2. arr.toString().split(',').map(Number)

  3. arr.flat(Infinity)

  4. JSON.stringify(arr).replace(/(\[)|(\])/g, '').split(',').map(Number)

  5.  function toOneArray(arr) {
     for(var i = 0; i< arr.length;i++){
         if(Array.isArray(arr[i])){
             toOneArray(arr[i])
         }else{
             newArr.push(arr[i])
         }
     }
 }

    6.获取对象中的key,value

    1. object.keys()
    2. object.values()

    7. 箭头函数和匿名函数的区别

    1. 箭头函数的this指向是根据上下文
    2. 匿名函数的this指向window，么有函数名，需要赋值个一个变量来调用

    8. 函数名前加*代表什么？

    • 说明函数的参数不确定

    9. 闭包

    有权访问另一个函数作用域找那个的变量的函数，闭包可能会导致内存泄漏，造成网页的性问题，解决方法是将用不到的局部变量删除或赋值未null

    10. 怎样实现伪登录

    1. 添加白名单路由并加入到总路由中
    2. 白名单页面设置登录显示的内容如，登录中，请稍后
    3. 点击登录事件加载白名单页面，后传值调后台接口

    11. 项目中的优化

    1. 层级不要过深
    2. 重复取值可以使用缓存
    3. v-for使用key
    4. v-if和v-show(频繁切换)根据情境使用
    5. 使用keep-alive缓存组件

    12. vuex相关问题

    13. MVC和MVVM区别

    14. 双向绑定原理

    采用数据劫持和发布者模式，对象使用object.defineProperty将属性进行劫持，数组通过重组数组的方法，在数据变动时发布消息给订阅者，触发相应的监听来渲染视图。

    15. 两种情况下不会触发视图的更新

    1. 实例创建后添加新的属性到实例上
    2. 直接更改数组下标来修改数组中的值 以上两种不会更新，可以使用vue.set更新

16. vue生命周期以及父子组件的加载顺序

  • 加载渲染过程

父 beforeCreate->父 created->父 beforeMount->子 beforeCreate->子 created->子 beforeMount->子 mounted->父 mounted

  • 子组件更新过程

父 beforeUpdate->子 beforeUpdate->子 updated->父 updated

  • 父组件更新过程

父 beforeUpdate->父 updated

  • 销毁过程

父 beforeDestroy->子 beforeDestroy->子 destroyed->父 destroyed

17. 宏任务和微任务

18. vue是对视图的修改，不会直接操纵DOM,而是修改数据；jq是直接操纵DOM

19. vue和react的区别

20. hash和history的区别

  1. hash路由中带有#，不包含在请求中，对后端无影响，#之后的地址在请求中
  2. history 历史记录栈，不会立即发送请求，所有URL都会传给后台，所以缺少参数会报404，应默认一个404展示的页面

21. 事件绑定原理

原生事件绑定是通过addeventLinstener,组件中是通过vue自定义的$on绑定，如果要在组件上使用原生事件，需要加.native 修饰符，这样就相当于在父组件中把子组件当做普通 html 标签，然后加上原生事件。

22. 动态路由？路由复用会导致什么问题，怎么解决？

有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果。

问题:vue-router 组件复用导致路由参数失效怎么办？

解决方法：

1.通过 watch 监听路由参数再发请求

watch: { //通过watch来监听路由变化

 "$route": function(){
 this.getData(this.$route.params.xxx);
 }
}
复制代码

2.用 :key 来阻止“复用”

<router-view :key="$route.fullPath" />

23. 防抖和节流

  1. 防抖： 事件被触发n秒后执行，如果在n秒内再次触发，重新计时
  2. 节流： 规定时间内只触发一次，时间内多次触发只执行一次

24. props中有哪些类型 详情查看官网 vuejs.bootcss.com/api/#props

  1. type
  2. default
  3. required 是否必传
  4. validate 自定义验证函数

25. keep-alive参数有哪些，详情查看官网vuejs.bootcss.com/api/#keep-a…

  1. include / exclude 允许有条件的缓存
  2. max 最多可以缓存多少组件

26. 路由相关 router.vuejs.org/zh/guide/

avatar
文章
阅读
粉丝