美文网首页
面试常问题(简述)

面试常问题(简述)

作者: 王果果 | 来源:发表于2021-08-15 10:27 被阅读0次

    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 :vaule="msg" @input="msg=$event.terget.value"/>
    • 将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的四次挥手。
    1. Object.defineProperty 响应式原理?
    • Object.defineProperty() 可以拦截对于对象属性的访问
    • 这个方法中第一个参数是拦截对象名,第二个是对象中的key,第三个是对象
    • 对象中有get和set两个函数,访问对象的属性值时,获取到的就是get函数的返回值
    • 设置对象的属性值时,set函数的参数newvalue就是设置的新值
    • 可以再set函数中将新值赋值给input的value值就实现了数据影响视图
    • 还可通过监听input事件拿到视图中的值赋值给get函数中return的变量实现视图影响数据

    相关文章

      网友评论

          本文标题:面试常问题(简述)

          本文链接:https://www.haomeiwen.com/subject/pvqkvltx.html