前端常见面试题(一)

1.Vue单向数据流 及VueX数据流向

view通过dispatch派发一个action改变state,state改变之后重新渲染视图。

2.Vue如何实现数据的双向绑定

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,

并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,

这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化,所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

3.v-show和v-if的区别

v-if是满足条件的时候进行页面渲染,v-show会将两者情况都进行渲染,所以刚开始运行的时候花销比较大,

v-if是通过添加或者删除元素来显示或隐藏元素的,v-show是通过display属性来控制元素的显示或隐藏,

当多次使用时,v-if的花销比较大,所以用v-show比较合适。

v-if判断是否加载,可以减轻服务器的压力,在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性,

可以使客户端操作更加流畅,但有更高的初始渲染开销。如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,

则使用 v-if 较好。

4.性能优化及代码优化

尽量减少 HTTP 请求

使用浏览器缓存

使用压缩组件

图片、JS的预载入

将脚本放在底部

将样式文件放在页面顶部

使用外部的JS和CSS

精简代码

5.图片上传

可以使用插件实现图片上传,

如果是自己实现,先请求一个服务器接口,把图片上传过去,利用服务器返回的地址,再在表单中提交,此时提交的图片是一个可以访问图片的路径。

6.深拷贝的实现及适用场景

当拷贝一个对象(引用数据类型)时,不希望原来的数据改变,就需要深拷贝,或者说此时就是深拷贝。

如果是一个数组,arr.splice就可以实现深拷贝。   

如果是一个对象,可以通过JSON.stringify  然后JOSN.parse在转化为对象就可以实现深拷贝了。

还有一个插件loadsh, 

jQuery.extend(,,)可以实现深拷贝和浅拷贝

它接受三+个参数,第一个代表深拷贝(TRUE)还是浅拷贝(FALSE)  默认是浅拷贝,第二个是要合并的目标,后面的代表被合并的对象

静态方法:在构造函数上使用的  $.entend()

实例方法:在构造函数创建出来对象上使用的  $.fn.extend()

7.label标签功能及作用

label标签有一个for属性,当点击label标签时,选中它所关联的输入框,利用这个特点,可以将type='file'的输入框隐藏,当点击label时,触发file框的点击事件。

8.回调函数

回调函数就是一个通过函数指针调用的函数,如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,

我们就说这是回调函数。回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应。

你可能感兴趣的:(前端常见面试题(一))