面试常问题(简述)

1.$nextTick()

• dom更新是异步的，$nextTick()中的代码会在dom更新后执行保证执行顺序
• 原理:支持 Promise 的环境中,Promise.then,否则就用setTimeOut 或 setImmediate

2.keep-alive

• 组件缓存,把组件放入内存中避免销毁和重建

3.混入(重点)mixin

• 是一个拥有vue组件所有选项的对象 , 这个对象上的所有选项可以加入到.vue的文件中
• 在组件本身和mixin发生冲突,以组件本身为准
• 想在项目中每个组件上都某些事情的时候就用到混入mixin
• 实际应用: 计算项目中所有组件的数量
  每个组件都有mothen钩子函数,渲染时都会执行
  声明一个变量为0,将
  在main.js中调用vue实例的mixin方法传入一个对象,对象中可以声明mothen钩子函数,让变量++,在打印这个变量

4.v-modle原理(重点)

• 将input标签的value属性动态绑定一个变量,通过input事件拿到输入的内容赋值给变量

5.开发中遇到的困难(重点)

6.数组方法

• arr.map((item,index)=>{ })映射数组
• arr.forEach((item,index)=>{ })遍历数组
• arr.filter((item,index)=>{ })
• arr.sort() 将数组里的项从小到大排序
• arr.reverse() 反转数组项的顺序。
• arr.concat()，合并数组,括号里面写内容 ("字符串要加引号"),
• arr.slice( 1 , 3 )截取数组参数1是开始下标,参数2是结束下标,包括开始不包括结束
• arr.splice( 2,0,4,6 )动态删除添加
• arr.every(item=>{return item>3}) 判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
• arr.some(item=>{return item>3}) 判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

7.computend()

• 一个变量是由另一个变量计算处理后得来就用到计算属性
• 计算属性相比普通函数的优势:计算属性会把计算结果存入内存,依赖项不变直接从内存中取结果,不会重新计算

8.宏任务,微任务

• JSv8引擎是单线程的,所以耗时任务(异步任务)会交给宿主环境去执行,执行结束后会把回调放到任务队列中排队
• 此时就有了微任务和宏任务,异步任务的两种分类

9.this.$set()

• vue2中给data中声明的响应式对象数据添加属性,
  语法: this.$set('对象名','key','value')

10.注册指令

• 在install方法中参数可以获取vue实例.vue实例上有directive方法用来注册自定义指令,
• 第一个参数是指令名,第二个参数是对象对象中有逻辑函数,函数有两个形参el,binding,
• el是绑定的标签,binding是自定义属性值

12.vue3和vue2区别

• 1.vue3中抛出了两个函数 createVNode()创建虚拟Dom 和 render()挂载到真实Dom上
• 2.vue2中响应式依赖ES5 Object.defineproperty() 缺陷不能侦听属性的增加 vue3中依赖ES6 Proxy 14种对象操作方法都可以拦截
• 3.vue2选项式api,vue3组合式api,并且可以混用
• 4.移除了this关键字,新增setup函数,形参props,{emit}
• 5.响应式数据在ref函数中声明
  ...

13.虚拟DOM

• 就是对象,保存了标签名,属性,子节点信息
• vue3中抛出了两个函数 createVNode()创建虚拟Dom 和 render()挂载到真实Dom上
• 语法: 引入 improt {createVNode,render} from 'vue'
  创建虚拟Dom const obj = createVNode('标签或者组件',{属性},[子节点])
  渲染真实Dom render(VNode,真实Dom节点)

14.http状态码

• 200 - 请求成功^^^^
• 201 - 已创建。成功请求并创建了新的资源
• 202 - 已经接受请求，但未处理完成
• 301 - 资源（网页等）被永久转移到其它URL^^^^
• 303 - 请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。
  今后任何新的请求都应使用新的URI代替
• 306 - 已经被废弃的HTTP状态码
• 401 - token过期,请求过期^^^^^
• 404 - 请求的资源（网页等）不存在,请求失败^^^^
• 500 - 内部服务器错误
• 501 - 服务器不支持请求的功能，无法完成请求

15.请求响应拦截器

• axios.interceptors.response.use(因特撒喷特斯)
• 请求拦截器:在请求头上添加token
• 响应拦截器:服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。token过期,token续签

16.路由前置守卫

• router.beforeEach((to, from, next) => {})
• 作用:判断用户是否有权限跳转某些路由,to()到哪里去,from()从哪里来,next()放行,next(false)不放行
• 例如:用户没有登录 而是直接通过修改浏览器 url 来访问网页，这种操作无疑是不安全的。
• 路由导航守卫可以让我们对用户要跳转的路由做一次检查，符合条件后放行，不符合条件则强制用户跳转登录页面。

17.原生js实现轮播图

• 维护一个索引值
• 遍历所有图片 , 把所有图片透明度设置为0 , 在把当前图片根据索引透明度设置为1
• 使用定时器让索引值++,如果大于图片索引长度就设置为0
• 注册鼠标移入事件清除定时器 , 鼠标移入事件重新调用定时器
• 上一张按钮下一页按钮就是注册点击事件让索引++或--

18.输入url地址按下回车发生了什么？

• 1.输入url地址后，首先进行DNS解析，将相应的域名解析为IP地址；
• 2.客户端根据IP地址去寻找相应的服务器；本地缓存,远程服务器
• 3.与服务器进行TCP的三次握手；
• 4.客户端找到相应的资源库；
• 5.根据资源库返回页面信息；
• 6.浏览器根据自身的执行机制解析页面；渲染页面
• 7.最后服务器将解析信息返回给客户端，进行TCP的四次挥手。

19. Object.defineProperty 响应式原理?

• Object.defineProperty() 可以拦截对于对象属性的访问
• 这个方法中第一个参数是拦截对象名,第二个是对象中的key,第三个是对象
• 对象中有get和set两个函数,访问对象的属性值时,获取到的就是get函数的返回值
• 设置对象的属性值时,set函数的参数newvalue就是设置的新值
• 可以再set函数中将新值赋值给input的value值就实现了数据影响视图
• 还可通过监听input事件拿到视图中的值赋值给get函数中return的变量实现视图影响数据