Vue.js 前端开发及应用试题

一、翻译题

beforeCreated 生命周期创建后
function 函数
extend 扩展
bind 绑定
NaN 非数值
undefined 未定义
attribute 属性
export 输出
component 组件
property 性质

二、简答题

1、 Vuex中有哪些属性分别声明作用？

Vuex的五个属性

state, getters, mutations, actions, modules

state：vuex的基本数据,用来存储变量。

geeter：从基本数据(state)派生的数据,相当于store的计算属性;getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

mutation：提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

action：和mutation的功能大致相同,不同之处在于:

① Action 提交的是 mutation,而不是直接变更状态;

② Action 可以包含任意异步操作。

modules：模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,管理更为方便。

2、 在Vue中事件修饰符和按键修饰符有哪些？它们分别代表的含义是什么？

事件修饰符：

.stop - 阻止事件冒泡，等同于JavaScript中的event.stopPropagation()
.prevent - 阻止默认事件，等同于JavaScript中的event.preventDefault()
.capture - 阻止捕获，捕获冒泡
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件
.passive：不阻止事件的默认行为

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按键修饰符：

按键符别名：

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

3、 简述Vue 中虚拟Dom和diff算法

虚拟DOM和diff算法

虚拟DOM是在DOM的基础上在内存建立了一个抽象层，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到DOM中，简单来说虚拟DOM就是用JS来模拟DOM结构。

diff算法

diff算法的本质是找出两个对象之间的差异，目的是尽可能复用节点。

diff 算法的核心是子节点数组对比,思路是通过 首尾两端对比

优点：最终表现在DOM上的修改只是部分的变更，可以保证高效的渲染，提高网页的性能

缺点：首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHtml慢一点

4、 前端路由和后端路由的区别？

1.什么是路由

路由是浏览器根据不同的 url 地址展示不同的内容或页面；

2、什么是前端路由？

很重要的一点是页面不刷新，前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，每跳转到不同的URL都是使用前端的锚点路由. 随着（SPA）单页应用的不断普及，前后端开发分离，目前项目基本都使用前端路由，在项目使用期间页面不会重新加载。

3、什么是后端路由？

   浏览器在地址栏中切换不同的url时，每次都向后台服务器发出请求，服务器响应请求，在后台拼接html文件传给前端显示, 返回不同的页面, 意味着浏览器会刷新页面，网速慢的话说不定屏幕全白再有新内容。后端路由的另外一个极大的问题就是 前后端不分离。
   优点：分担了前端的压力，html和数据的拼接都是由服务器完成。
   缺点：当项目十分庞大时，加大了服务器端的压力，同时在浏览器端不能输入制定的url路径进行指定模块的访问。另外一个就是如果当前网速过慢，那将会延迟页面的加载，对用户体验不是很友好。

4，什么时候使用前端路由？

   在单页面应用，大部分页面结构不变，只改变部分内容的使用

5，前端路由有什么优点和缺点？

优点:

    1.用户体验好，和后台网速没有关系，不需要每次都从服务器全部获取，快速展现给用户
    2.可以再浏览器中输入指定想要访问的url路径地址。
    3.实现了前后端的分离，方便开发。有很多框架都带有路由功能模块。

缺点:

    1.使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
    2.单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

5、 Vue中路由的两种模式，以及实现原理？

vue路由的两种模式：

hash与history

hash与history实现原理

1、hash ——即地址栏URL中的#符号（此hsah 不是密码学里的散列运算）。比如这个URL：http://www.abc.com/#/hello, hash 的值为#/hello。它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
2、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改是，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。history模式，会出现404 的情况，需要后台配置