小朋友面试历险记2

本来第一篇结束之后，我是没有打算继续往下写的，感觉也没啥人想知道，但是，我有了一个粉丝在等着我，还催更，我居然也享受到了催更的待遇，瞬间

我是一个有粉丝的人了，我要有点自我要求，所以有了这篇面试记录，感谢我唯一的催更粉花花同学。感谢你一路的支持，我会不忘初心砥砺前行的。

字节不跳动面试背景

刚开始面试的时候对面试题不是很熟悉，所以决定先面外包公司。经过考虑决定试一试字节的外包岗位，倒不是真的想进字节，而是想看看我们的差距到底有多大，于是在boss直聘上找到了某动力公司，投递了简历，说一下，虽然是外包岗但是是先验学历的，需要先提供学信网截图然后再给你推荐简历的，经过这么折腾差不多第二天就告诉我简历筛过了，后面就是面试，面试的话，字节不是现场面，是线上面，在面试之前hr会先跟你确认一下你的学历信息，技术栈，工资要求等等。第一面约在了晚上，用字节的产品飞书进行视频面试，我之前是没有过视频面试的，所以其实很不自在，就是会感觉有个人盯着我，一开始就是简单自我介绍然后就开始正式问面试题目。

box-sizing后面值得区别

box-sizing:默认值是content-box，如果你设置一个元素得宽度是100px,那么这个元素 的内容宽度就是100px,但是任何边框和内边距的宽度都会背增加到最后绘制的元素宽度中去 border-box告诉浏览器，如果你想设置的边框和内边距是包含在width之内的，也就是说 如果你将一个元素的width设为100px,那么他是包含border和padding的，内容区域的 实际宽度是width-(border+padding),大多数情况下，这更有利于我们这计算一个元素的宽度

vue的指令以及v-show和v-if的区别？

1. v-text v-text主要是用来更新textContent,可以等同于JS的text属性
2. v-html 双大括号的方式会将数据解释为纯文本，而非HTML，为了输出真正的HTML， 可以用v-html指令，，它等同于js的innerHtml属性。
3. v-pre v-pre主要是用来跳过这个元素和他的子元素的编译过程，可以用来显示原始的 mustache，跳过大量没有指令的节点加快编译。
4. v-clock,这个指令是用来保持元素上直到关联实例结束时进行编译
5. v-once v-once关联的实例值会渲染一次，之后的重新渲染，实例及其所有的子节点 将被视为静态内容跳过，这可以用于优化更新性能。
6. v-if 实现条件渲染，vue会根据表达式的值的真假条件来渲染元素
7. v-else v-else时紧跟着v-if使用的不然也没啥效果
8. v-else-if v-else-if充当v-if的else-if块，可以链式的使用多次，可以 更加方便的实现switch语句。
9. v-show 也是用于根据条件展示元素，和v-if不同的是，如果v-if的值时false,则 这个元素被销毁，不在dom中展示，但是v-show的元素会始终被渲染并保存在dom中， 它只是简单的切换css的dispaly属性。 注意：v-if有更高的切换开销， v-show有更高的初始渲染开销 因此如果要非常频繁的切换，则使用v-show比较好，如果在运行时条件不太可能改变则v-if 较好
10. v-for 用v-for来循环遍历数组进行渲染 注意当，v-for和v-if处于一个节点的时候，v-for的优先级比v-if更高，着意味着v-if 将运行在每一个v-for的循环中。
11. v-bind 用来动态的绑定一个或多个特性，没有参数时，可以绑定到一个包喊键值对 的对象，常用于动态绑定class和style，以及href等，简写为：
12. v-model 这个指令用于在表单上创建双向数据绑定，v-model会忽略表单元素的value, checked，selected特性的初始值，因为它选择vue实例数据作为具体的值。
13. v-model的修饰符，
14. lazy 默认情况下，v-model会同步输入框的值和数据，可以通过这个修饰符， 转变为在change事件再同步，
15. number 自动将用户的输入值转为数值类型
16. trim自动过滤用户输入的首尾空格
17. v-on 主要用来监听dom事件，以便于执行一些代码块，，表达式只一个方法名

vue的修饰符的区别?

事件修饰符 .stop 阻止事件继续传播 .prevent 事件不再重载页面 .capture 使用事件捕获模式，即元素自身触发的事件先在此处理，然后才交由内部元素 进行处理 .self 只当在event.target是当前元素自身时触发函数 .once 事件将只会触发一次 .passive 告诉浏览器你不想阻止事件的默认行为 使用修饰符的时候，顺序很重要，相应的代码会以同样的顺序产生，因此，用v-on:click. prevent.self会组织所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击

路由守卫beforEach的用法比如next()里面放参数？

路由分为三种: 
    1.全局路由守卫 
    2.单个路由独享 
    3.组件内部路由 
这三种路由对应的时三种状态，但是每一个路由守卫的钩子函数都有三个参数 
    to：进入目标路由 
    from：离开的路由 
    next：控制路由再跳转时进行的操作，一定要执行。 
    next有四种行为： 
        1.next() 工资都执行完毕了，可以进入到下一个路由中去了。 
        2.next(false) 中断路由进入下一个路由 
        3.next("/") 根据你路由的跳转判断条件来进入对应的路由，/为路由的path 
        4.next(new Error) 终端路由的跳转，并且错误回备传递给router.onError() 注册过的回调。 
全局路由守卫： 
    1.beforeEach(to,from,next) 
    2.beforeResolve(to,from,next) 
    3.afterEach(to,from) 全局路由是直接挂载到实例上去的。 
 //全局验证路由 const router = createRouter({ history: createWebHashHistory(), routes }); 
 // 白名单， 不需要验证的路由 const whiteList = ['/','/register'] router.beforeEach((to,from,next)=>{ if(whiteList.indexOf(to.path) === 0) { 
 // 放行，进入下一个路由 next() } else if(!(sessionStorage.getItem('token'))){ next('/'); } else { next() } }) 
 beforeEach一般使用的场景是路由跳转前触发，常用于校验登录验证 
 beforeResolve在beforeEach和组件内的beforeRouteEnter只有，afterEach 之前调用。 
 使用场景： 
 1.发生在beforeEach和beforeRouteEnter之前 
 2.路由在出发后执行 单个路由独享 
 1.它只有一个钩子函数beforeEnter(to,from,next) 使用场景，在beforeEach之后执行，和他功能一样，不怎么常用 { path:'/superior', component: Superior, meta:{ icon:'el-icon-s-check', title:'上级文件' }, beforeEnter:(to,form,next) =>{ } } 组件路由守卫： 特点：组件内执行的钩子函数 钩子函数： 
 1.beforeRouteEnter(to,from,next) 2.beforeRouteUpdate(to,from,next) 3.beforeRouteLeave(to,from,next) beforeRouteEnter 
 使用场景: 
 1.路由进入之前调用 
 2.不能获取组件的this实例，因为路由在进入到组件之前，组件实例 还没有被创建。 执行顺序： beforeEach和独享守卫beforeEnter之后，全局beforeResolve和全局 afterEach之前调用 
 使用场景： 
 1.在当前路由改变时，并且该组件被复用时调用，可以通过this的访问实例 
 2.当前路由的query变更时，该守卫会被调用。 
 beforeRouteLeave： 使用场景： 
 1.导航离开该组件的对应路由时调用。可以访问组件实例的this 
 路由守卫执行的完整过程 
 1.导航被触发 
 2.执行组件内部路由守卫，beforeRouteLeave
 3.执行全局路由守卫beforEach
 4.在重用组件内部路由守卫钩子beforeRouteUpdate
 5.执行路由中的beforeEnter
 6.在被激活的组件中调用beforeRouteEnter 
 7.执行全局的beforeResolve守卫 
 8.执行全局的afterEach钩子 
 9.beforeCreate 
 10.created 
 11.beforeMonut 
 12.mounted 
 13.执行beforeRouteEnter的next回调，创建好的组件实例，会作为回调 函数的参数传入。

v-if和v-for为什么不能一起用？

注意当，v-for和v-if处于一个节点的时候，v-for的优先级比v-if更高，着意味着v-if 将运行在每一个v-for的循环中。

最后的时候还有一段手写去重就是共享自己的桌面，然后他开始盯着我写，说实在的如果之前没有这样的经验，真的会很紧张，我当时就是，直接不知道怎么敲代码了，我就说我放弃，那个面试官就安慰我说没关系，让我先说自己的思路，我说了四五种去重，这个我之前有文章写过，就不赘述去重的方法了，然后他就鼓励我继续写，不要慌，真的超级暖心了，最后，他跟我说遇到问题不要紧张，慢慢写，总是会出来的，怎么会有这么好的面试官，结束的时候他问我我有没有问题，我说没有，他笑着说，你对自己将来要工作的地方一点都不好奇么？至此，我的一面通过，下一篇讲下我的字节二面，不要错过哦。