Vue常问面试题持续更新._vue mixins面试题-CSDN博客

构造函数的prototype和其实例的__proto__是指向同一个地方的，这个地方就叫做原型对象 把这些串联在一起就叫原型链
fn是一个函数.当const f = new fn()的时候.f.__proto__ = fn.prototype  
同时fn = new foo()的时候,则fn.__proto__ = foo.prototype,
此时,f.__proto__ = foo.prototype

02. 响应式的原理

Object.defineProperty   
vue.js采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的seter, getter,在数据发生改变的时候通知订阅者,触发相应的监听回调

03. 什么是高阶函数

1.把函数作为函数的参数,
2.在函数中 return 的是一个函数

04. vue有哪些传值

1. 父传子, 通过属性绑定, 子组件通过props接收
2. 子传父, 通过事件绑定, 子组件使用this.$emit('xxx',参数) / vue3 在setup中(props, context) context.emit('xxx',参数)
3. 跨组件传值 绑定vue.prototype.$eventbus
4. v-modle
5. ref
6. vuex
7. mixins 混入 (涉及到命名的问题, 不推荐使用, 在大型项目中容易出问题)
8. 注入依赖 (provide inject)

05. 常见的HTTP 状态码

200,请求成功
400,请求格式有误, 或请求参数有误
401,token失效
403,禁止访问,
404,请求的数据未在服务器上找到
500,服务器遇到了一个未知的错误,导致它无法对请求处理

06. 哈希路由和history路由的原理

首先 hash路由和history路由 因为是单页应用,在更新数据切换路由都不会导致页面刷新也不会重新发起请求
hash是以#拼接的方式,每次hash发现变化时都会触发hashchange这个事件,通过这个事件我们知道hash发生变化了,通过监听hashchange来事件更新部分内容
history API 是 H5 提供的新特性，通过pushState 和 replaceState 可以改变url地址且不会发起请求,原理上和hash差不多,没有#,
允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求

07. js中的继承

原型链继承 通过prototype上绑定对应的属性和方法
组合继承
借用构造函数继承
原型式继承
寄生式继承
寄生组合式继承
混入方式继承多个对象
ES6类继承extends

08. 什么是闭包

声明一个变量，声明一个函数，在函数内部访问外部的变量，那么这个函数加这个变量叫做闭包

var a = 0
function fn (){
    console.log(a)
}
fn()

09. 什么是递归

递归就是方法自己调用自己，每次调用时传入不同的变量。一直到程序执行到指定的出口时停止调用本身，并将结果层层返回。
在异步任务中使用异步任务, 它需要等待上一个异步任务执行完毕以后才执行,

在函数中调用函数本身, 等待上一个异步任务的结果,

10. 说说你对 SPA 单页面的理解，它的优缺点分别是什么？

优点：
用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
基于上面一点，SPA 相对对服务器压力小；
前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：
初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载
前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能

11. v-show 与 v-if 有什么区别？

他们是用来显示和隐藏页面元素的--( 总 )
但是他们是有区别,

1. 原理不一样.
2. 效率不同
3. 应用场景不同

v-show是隐藏,内容还在dom上
v-if是销毁,显示需要重新渲染dom

频繁切换使用v-show,

12. Class 与 Style 如何动态绑定

通过对象语法和数组语法进行动态绑定  v-bind :class='{}' v-bind:style='{}'

13. 怎样理解 Vue 的单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向绑定：父级 prop 的更新会向下流动到子组件中，但是反
过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

14. 能说说浅拷贝深拷贝么

浅拷贝就是复制一份相同的复杂数据时，有着相同的内存地址，原数据改变，新数据也改变了，深拷贝的就不会影响
怎么用？ 浅拷贝的话，最简单便是直接赋值了，然后是Object.assign，还有利用for in

深拷贝，就我知道的有2种，一种是直接用JSON.parse JSON.stringify 
这种方法缺点比较大，不能拷贝函数和正则

15. new在执行过程中做了什么？

1.创建一个对象；
2.将对象里面的this指向这个新的对象
3.将新对象连接到构造函数的原型；
4.返回这个对象；

16. Js作用域与作用域链

作用域规定了如何设置变量，也就是确定当前执行代码对变量的访问权限

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的

17. 判断一个变量是不是空对象

1.JSON.stringify方式
用JSON.stringify将对象转换为json串，与'{}'做比较
2.Object.keys
用Object.keys获取对象中的key值，如果对象中有key值，将返回一个key值的数组，如果没有数组为空，对数组的长度进行判断就可以

18. 创建对象有几种方法

1.new object 创建
2.字面量创建 
3.工厂函数创建

19. js有几种数据类型

基础 string  number boolean  undefiend bigint symbol null 
复杂 object  function  Array

20. SPA 基础知识

 SPA :Single Page Application 单页面应用程序，整个应用中只有一个页面（index.html）
优势：页面响应速度快，体验好（无刷新），降低了对服务器的压力。
           a，传统的多页面应用程序，每次请求服务器返回的都是一整个完整的页面。
           b，单页面应用程序只有第一次会加载完整的页面，以后每次请求仅仅获取必要的数据。
缺点：不利于 SEO 搜索引擎优化。
           a，因为爬虫只爬取 HTML 页面中的文本内容，不会执行 JS 代码。
           b，可以通过 SSR（服务端渲染 Server Side Rendering）来解决 SEO 问题，即先在服务器端把内容渲染出来，返回给浏览器的就是纯 HTML 内容了。

21.Vue中如何检测数组的变化

push
shift
pop
splice
unshift
sort
reverse

22. 图片懒加载

当载入页面时,首先吧可视区域的img标签里的真正属性赋值给src上, 
然后监听滚动事件,(节流阀)把用户将看到的图片加载出来,节流阀的意义在于避免多次发送请求,

23. location.herf 和 vue.router的区别

location.herf会刷新页面重定向,页面跳转, vue.router不会刷新页面.

24. 路由守卫,路由钩子生命周期

路由钩子分为三种
全局钩子： beforeEach、 afterEach、beforeResolve
单个路由里面的钩子：  beforeEnter(to,from,next)类似全局钩子,但是单独配置
组件路由：beforeRouteEnter(进入前钩子)、 beforeRouteUpdate(不离开当前路由,改变组件内数据后)、 beforeRouteLeave(离开钩子)
beforeEach（to，from， next） 前置守卫
beforeResolve（to，from， next） 解析守卫
afterEach（to，from）后置守卫
简单的来说就是路由与路由之间切换跳转的关系. 
to:意思是要去的地方
from:意思是从什么地方来.
next:开启允许通过.一般next()这样书写可以添加对应的路由名跳转对应的路由next('/')
// 进入路由时   执行规则
// 前置守卫beforeEach  去的路由本身触发独享守卫beforeEnter  进入前beforeRouteEnter  解析守卫beforeResolve 后置守卫afterEach
// 更新路由时   执行规则
// 前置守卫beforeEach   更新路由后beforeRouteUpdate 后置守卫afterEach
// 路由之间跳转   执行规则
// 初始化前(b)beforeCreate 初始化后(b)created  挂载前(b)beforeMount 销毁前(a)beforeDestroy 销毁后(a)destroyed 挂载后(b)mounted

25. for in 与 for of

for in遍历的是数组的索引 (index)   for of遍历的是数组元素值（value）
for in更适合遍历对象，当然也可以遍历数组，但是会存在一些问题
for of遍历的是数组元素值，而且for of遍历的只是数组内的元素

26. Vue的组件data为什么必须是一个函数

如果都是对象的话，会在合并的时候，指向同一个地址。 
而如果是函数的时候，合并的时候调用，会产生两个空间

29. 请说明nextTick的原理

vue本身推荐不修改DOM,但是在某些特殊情况下需要得到更新后得数据则需要使用$nextTick
vue更新DOM是异步任务
等DOM更新后,触发此方法函数体执行
this.$nextTick 返回得是一个promise对象
语法:  this.$nextTick(()=>{})
例子:
<template>
  <div>
      <input type="text" v-if="isShow" ref="i">
      <button v-else @click="btn">点我得永生</button>
  </div>
</template>

<script>
export default {
  data(){
      return{
          isShow:false
      }
  },
  methods:{
      btn(){
          this.isShow=true
          //因为是异步任务.如果需要立刻获取到结果就使用next方法
          this.$nextTick(()=>{
              this.$refs.i.focus()
          })
      }
  }
}
</script>
通过生命周期函数 updated 也可以拿到DOM更新后得数据

30. 数组去重的方法

const a = [1, 2, 32, 1, 2, 3, 4]
const b = new Set(a) 

const c = Array.from(new Set(a))

function fn (a) {
  const b = []
  for (var i = 0; i < a.length; i++) {
    if (b.indexOf(a[i]) === -1) {
      b.push(a[i])
    }
  }
  return b
}
console.log(fn(a))

31. 截取字符串

var a = 'http://www.baidu.com?id=1&name=ls'

function fn (a) {
  var b = a.split('?')
  var c = b[1].split('&')
  var d = {}
  c.forEach((item) => {
    d[item.split('=')[0]] = item.split('=')[1]
  })
  console.log(d)
}
fn(a)

32. replace和push的区别

replace和push都能实现跳转的效果，但是区别在于：
replace不会向history插入记录，而push会向history插入记录

33. 什么是webpack

webpack一款模块加载器兼打包工具,它能把各种资源都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。
将依赖的模块分片化，并且按需加载
解决大型项目初始化加载慢的问题
每一个静态文件都可以看成一个模块
可以整合第三方库
能够在大型项目中运用
可以自定义切割模块的方式

34. 函数柯里化

把一个多参数的函数,return成一个单一参数的函数,

35. template

提供一个模板,但是并不是不可或缺的,
render > template > el 这个都是用来决定页面的样子, 结构

36. 九宫格 wrap换行是关键

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }
    ul {
      display: flex;
      margin: 0 auto;
      width: 96px;
      flex-wrap: wrap;
    }
    li {
      width: 30px;
      height: 30px;
      border: 1px solid #000;
      list-style: none;
    }
  </style>
</head>
<body>
  <div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
</html>

37. 画三角形

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    .box{
      width: 20px;
      height: 20px;
      border: 1px solid #000;
      border-top-left-radius: 50%;
    }
    .boxx{
      border-top:10px solid transparent;
			border-bottom:10px solid transparent;
			border-left:10px solid #000;
      border-right: 10px solid transparent;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="boxx"></div>
</body>
</html>