前端面试必会面试题

1、箭头函数和普通函数的区别

    1.箭头函数是匿名函数，不能作为构造函数，不能使用new

    2.箭头函数不绑定arguments，取而代之用rest参数...解决

    3.箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值

    4.箭头函数不能改变this指向

    5.箭头函数没有原型属性

    6.箭头函数不能当做Generator函数,不能使用yield关键字

2、vuex刷新数据页面会丢失吗？咋解决的？

会！！！

        因为vuex里的 数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里 面的数据就会被重新赋值。

用vuex-persistedstate插件可以解决

在vuex配置项中配置 plugins: [createPersistedState()],默认存储在localStorage

传参方式：createPersistedState({ storage: window.sessionStorage})

将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）

缺点是不安全，不适用大数据量的存储；

3、说说你对H5语义化标签的理解

      用正确的标签做正确的事情。

        html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；即使在没有css样式的情况下，也以一种文档格式显示，并且是容易阅读的；搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

尽可能少的使用无语义的标签div和span在语义不明显时，既可以使用div或者时，尽量用p，因为p在默认情况下有上下间距，对兼容特殊终端有利。

不要使用纯样式的标签，如：b，font，u等，改用css设置。

表单域要用fieldset标签包起来，并用legend标签说明标签的用途。

每个input标签对应的文本框都需要使用label标签，并且通过为input设置id属性，在label标签中设置for=someID来说明文本和相对应的input关联起来

4、 vue.nextTick()

定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；

理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，

注意：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，

5、react中 (组件的)状态(state)和属性(props)之间有何不同

  State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。

  Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能改变自身的props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据--回调函数也可以通过 props 传递。

6、V-if和v-show的区别，应用场景

v-show 只是在 display: none 和 display: block 之间切换。无论初始条件是什么都会被渲染出来，后面只需要切换 CSS，DOM 还是一直保留着的。所以总的来说 v-show 在初始渲染时有更高的开销，但是切换开销很小，更适合于频繁切换的场景。

v-if 的话就得说到 Vue 底层的编译了。当属性初始为 false 时，组件就不会被渲染，直到条件为 true，并且切换条件时会触发销毁/挂载组件，所以总的来说在切换时开销更高，更适合不经常切换的场景。

并且基于 v-if 的这种惰性渲染机制，可以在必要的时候才去渲染组件，减少整个页面的初始渲染开销。