前端小白基础面试题

 # Vue路由

分为history和hash

hash路由特点  有#  

hash模式所有的工作都是在前端完成的，不需要后端服务的配合,因此改变 hash 不会重新加载页面。

hash模式的实现方式就是通过监听URL中hash部分的变化，从而做出对应的渲染逻辑

hash模式下，URL中会带有#，看起来不太美观

history的实现，  前端的 URL 必须和实际向后端发起请求的 URL 一致，如 地址后加上/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。

需要服务器做以下简单的配置，通过监听pushState及replaceState事件，处理前端业务逻辑

# vue路由的跳转方式有几种

1、<router-link to="需要跳转到页面的路径">

2、this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面

3、this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面

4、this.$router.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数

router.push、router.replace、router.go、router.back的区别？

router.push：跳转，并向history栈中加一个记录，可以后退到上一个页面

router.replace：跳转，不会向history栈中加一个记录，不可以后退到上一个页面

router.go：传正数向前跳转，传负数向后跳转

router.back 返回到上一级页面

# vue 路由传参数如何实现、query 和 params

主要通过 query 和 params 来实现

(1) query可以使用name和path而params只能使用name

(2) 使用params传参刷新后不会保存，而query传参刷新后可以保存

(3) Params在地址栏中不会显示，query会显示

(4) Params可以和动态路由一起使用，query不可以

5）to=”/goods?id=1001”this.然后在接收的页面通过 $route.query.id 来接收

# 路由对象route和router的区别

route 是“路由信息对象”，包括 path,params,hash,query,fullPath,matched,name 等路由信息参数。

router 是“路由实例对象”，包括了路由的跳转方法(push、go)，钩子函数等。

# 路由懒加载

使用原因：在单页应用中，如果没有应用懒加载，运用 webpack 打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时 原理：vue 异步组件技术：异步加载，vue-router 配置路由 , 使用 vue 的异步组件技术 , 实现按需加载。

# 指令部分进行扩展

vue常用修饰以及常见指令

修饰符

.stop  阻止事件冒泡

.cpture 设置事件捕获

.self  只有当事件作用在元素本身才会触发

.prevent 阻止默认事件，比如超链接跳转

.once 事件只能触发一次

.native 触发js原生的事件

.number 把文本框的内容转换为数字

.trim  去除文本框左右空格

⑴v-bind：给元素绑定属性

⑵v-on：给元素绑定事件

⑶v-html：给元素绑定数据，且该指令可以解析 html 标签

⑷v-text：给元素绑定数据，不解析标签

⑸v-model：数据双向绑定

⑹v-for：遍历数组

⑺v-if：条件渲染指令，动态在 DOM 内添加或删除 DOM 元素

⑻v-else：条件渲染指令，必须跟 v-if 成对使用

⑼v-else-if：判断多层条件，必须跟 v-if 成对使用

⑽v-cloak：解决插值闪烁问题

⑾v-once：只渲染元素或组件一次

⑿v-pre：跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度

⒀v-show：条件渲染指令，将不符合条件的数据隐藏(display:none)

# key值使用id 比index 好

# webpack 打包

说一下模块打包运行原理？

如果面试官问你Webpack是如何把这些模块合并到一起，并且保证其正常工作的，你是否了解呢？

首先我们应该简单了解一下webpack的整个打包流程：

1、读取webpack的配置参数；

2、启动webpack，创建Compiler对象并开始解析项目；

3、从入口文件（entry）开始解析，并且找到其导入的依赖模块，递归遍历分析，形成依赖关系树；

4、对不同文件类型的依赖模块文件使用对应的Loader进行编译输出资源：

根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会。

输出完成：在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。

# 数组去重方法

1 数组排序  前后一个比较 如果相等就不push，不相等就push

2 利用indexof方法， 找不到返回-1      创建一个空数组 空数组.indexof(原数组每一项)    == -1 就 push进空数组里

3  用数组的includes()    创建一个空数组，newArr.includes(arr[i]) 结果是false的push到新数组里，结果是true的不做处理

4 利用 ES6的set 方法  function unique10(arr) {

            //Set数据结构，它类似于数组，其成员的值都是唯一的

            return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组

        }

        console.log(unique10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));

        // 结果是[1, 2, 3, 5, 6, 7, 4]

5 利用for嵌套for，然后splice去重（ES5中最常用）

function unlink(arr) {

    for (var i = 0; i < arr.length; i++) {    // 首次遍历数组

        for (var j = i + 1; j < arr.length; j++) {   // 再次遍历数组

            if (arr[i] == arr[j]) {          // 判断俩个值是否相等

                arr.splice(j, 1);           // 相等删除后者

                j--;

            }

        }

    }

    return arr

}

console.log(unlink(arr));

# 清楚浮动的方法？(多次出现在面试题)

1.父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2，结尾处加空div标签 clear:both

原理：添加一个空div，利用css提供的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

3，父级div定义 伪类:after 和 zoom

原理：IE8