前端面试要点

Vue面试题，React面试题，JS面试题，HTTP面试题，工程化面试题，CSS面试题，算法面试题，大厂面试题，高频面试题都需要刷刷。

v-if和v-show区别

• 当条件不成立时，v-if不会渲染DOM元素，v-show操作的是样式(display)

• v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；

• v-show 则适用于需要非常频繁切换条件的场景。

为什么 v-for 和 v-if 不建议用在一起

当 v-for 和 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费

虚拟DOM树

组件中的data为什么是一个函数

• 一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。

• 如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。

事件 事件冒泡

性能优化

vue和小程序区别

null和undefined

1.null 表示一个值被定义了，定义为“空值”；undefined 表示根本不存在定义。
2.设置一个值为 null 是合理的；设置一个值为 null 是合理的。

Vue事件绑定原理是什么

原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的。

route 和router的区别

• router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样

• route相当于当前正在跳转的路由对象，可以从里面获取name,path,params,query等

父子传参的方式

• 父向子传值props

• 子向父传参 emitemitemiton

v-model 双向数据绑定原理

• v-model是用来在表单控件或者组件上创建双向绑定的

• 他的本质是v-bind和v-on的语法糖

• 在一个组件上使用v-model，默认会为组件绑定名为value的prop和名为input的事件

cookies，sessionStorage和localStorage的区别？

• 共同点：都是保存在浏览器端，且是同源的。

• 区别：cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。

存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。
数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。
作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享.

响应式/兼容

• 对响应式布局的看法

• 响应式布局有缺点也有优点。



•     优点：面对不同分辨率设备，灵活性强，能够快捷地解决设备显示适应问题。



•     缺点：兼容各种设备时所需工作量大、效率低下、代码累赘，会隐藏无用的元素，加载时间延长，


•     其实这是一种折中性质的十设计解决方案，由于多方面元素影响而达不到最佳效果，


•     在一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。复制代码



• PC端页面需要兼容那些浏览器

•  浏览器不断更新，人们所熟知所使用的浏览器已不再是电脑自带的浏览器，


•  所以在设计并完成PC端的页面时，要尽可能考虑更多的浏览器兼容性问题。


•  那浏览器大致可以分为IE内核浏览器和非IE内核浏览器。



•    



•     IE内核浏览器：360，傲游、搜狗、世界之窗、腾讯TT



•     非IE内核浏览器：Firefox、Opera、Safari、Chrome



• 一般情况下主要考虑兼容性问题的浏览器是：IE6、IE7、IE8、Firefox5+、Safari、Chrome等浏览器



vuex

关于vuex的面试题网上的比较多，仅作参考

1、有哪几种属性

有 5 种，分别是 state、getter、mutation、action、module
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

2、vuex 的 store 特性是什么

(1) vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data

(2) state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新

(3) 它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

3、 vuex 的 getter 特性是什么

(1) getter 可以对 state 进行计算操作，它就是 store 的计算属性

(2) 虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用

(3) 如果一个状态只在一个组件内使用，是可以不用 getters

4、vuex 的 mutation 特性是什么

action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态

action 可以包含任意异步操作

5、vue 中 ajax 请求代码应该写在组件的methods中还是vuex 的action中

如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里

如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回

6、不用 vuex 会带来什么问题

可维护性会下降，你要修改数据，你得维护3个地方

可读性下降，因为一个组件里的数据，你根本就看不出来是从哪里来的

增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背
复制代码