参考地址
1.简述vue优点
- 轻量级框架：大小只有几十kb
- 国人开发：符合语言习惯，中文文档，简单易学
- 组件化：实现了html的封装和重用
- 数据视图分离与数据绑定：使开发者专注于数据处理
2.vue的生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程,同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在
不同阶段添加自己的代码的机会。
第一次页面加载会触发哪几个钩子？
beforeCreate， created， beforeMount， mounted
beforeCreate
实例组件刚创建，元素DOM和数据都还没有初始化，
不能在这个阶段使用data中的数据和methods中的方法
created
数据data已经初始化完成，方法也已经可以调用，但是DOM未渲染
一般在这里请求数据
beforeMount
执行到这个钩子的时候，在内存中已经编译好了模板了，DOM未完成挂载数据的双向绑定还是显示{{}}，这是因为Vue采用了Virtual DOM（虚拟Dom）技术。先占住了一个坑。
mounted
数据和DOM都完成挂载，在上一个周期占位的数据把值给渲染进去。
这个周期适合执行初始化需要操作DOM的方法。
如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeUpdate
数据和DOM都完成挂载，在上一个周期占位的数据把值给渲染进去。
这个周期适合执行初始化需要操作DOM的方法。
updated
只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。beforeUpdate和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和容易死循环。
beforeDestroy
这个周期是在组件销毁之前执行，在我项目开发中，觉得这个其实有点类似路由钩子beforeRouterLeave,都是在路由离开的时候执行，只不过beforeDestroy无法阻止路由跳转，但是可以做一些路由离开的时候操作，因为这个周期里面还可以使用data和method。比如一个倒计时组件，如果在路由跳转的时候没有清除，这个定时器还是在的，这时候就可以在这个里面清除计时器。
Destroyed
说实在的，我还真的不知道这个周期跟beforeDestroy有什么区别，我在这个周期里面调用data的数据和methods的方法都能调用，所以我会觉得跟beforeDestroy是一样的。
3.vue常用指令
- v-model
作用： 双向数据绑定；
说明：
v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
v-bind绑定一个value属性；
v-on指令给当前元素绑定input事件。
示例：
<input type="text" name="" v-model="userInfo.email" placeholder="Email">
- v-for
作用： 实现遍历，循环；
示例：
<div class="pItem" v-for="(item,index) in arrData" :key="idex"></div>
- v-if v-show
作用： 根据绑定的数据控制显示隐藏；
示例：
<div v-if="{{n>2}}"></div>
<div v-show="{{n>2}}""></div>
区别：
v-if是判断是否创建并渲染dom对象，v-show是控制display属性显示隐藏
如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。
- v-on
缩写：@
作用： 绑定事件；
修饰符：
.stop- 调用 event.stopPropagation()。
.prevent- 调用 event.preventDefault()。
.self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.once- 只触发一次回调。
.left- (2.2.0) 只当点击鼠标左键时触发。
.right- (2.2.0) 只当点击鼠标右键时触发。示例：
<button @click.stop="doThis"></button>
<button @click.prevent="doThis"></button>
- v-on
缩写：:
作用： 绑定事件；
修饰符：
.prop- 作为一个 DOM property 绑定而不是作为 attribute 绑定。
.camel- (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。
.sync(2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。示例：
<img v-bind:src="imageSrc">
<div :class="{ red: isRed }"></div>
- v-on 还可同时绑定多个事件
<input type="text" v-on="{ input : onInput , focus : onFocus , blur : onBlur , }">
4.请说出vue.cli项目中src目录每个文件夹和文件的用法？
- assets
文件夹是放静态资源- components
放组件- router
是定义路由相关的配置;- view
项目页面;- store
vuex相关相关的配置;- main.js
文件主入口;- app.vue
应用主组件；
5.mvvm 框架是什么？
vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。
6.vue修改打包后静态资源路径的修改
- cli2版本：
将 config/index.js 里的 assetsPublicPath 的值改为 './' 。
build: {...assetsPublicPath: './',... }- cli3版本：
在根目录下新建vue.config.js 文件，然后加上以下内容：（如果已经有此文件就直接修改）
module.exports = {publicPath: '', // 相对于 HTML 页面（目录相同） }
7.vue的两个核心点
- 数据驱动：
ViewModel，保证数据和视图的一致性。- 组件系统：
应用类UI可以看作全部是由组件树构成的。
8.vue-router 是什么?它有哪些组件
vue用来写路由一个插件。router-link、router-view
- 代码示例：
<router-link tag="li" to="/about">About</router-link>
<router-link tag="li" :to="{name: 'about', query:{ id: 1} }">About</router-link>
9.vue-router 有哪几种导航钩子?
- 全局导航钩子主要有两种钩子：前置守卫、后置钩子
前置守卫：
const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => { // do someting });
- 这三个参数
to 、from 、next分别的作用：
to: Route代表要进入的目标，它是一个路由对象
from: Route代表当前正要离开的路由，同样也是一个路由对象
next: Function这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数- 说明：
next(‘/’) 和 next({path: ‘/’})：在中断掉当前导航的同时，跳转到一个不同的地址
全局后置钩子：
router.afterEach((to, from) => { // do someting });
- 说明：
不同于前置守卫，后置钩子并没有 next 函数，也不会改变导航本身
10.
router 的区别
$router是“路由实例”对象，即使用 new VueRouter创建的实例，包括了路由的跳转方法，钩子函数等。
$route是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。
① $route.path字符串，对应当前路由的路径，总是解析为绝对路径，如 "/order"。
② $route.params一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。
③ $route.query一个 key/value 对象，表示 URL 查询参数。 例如，对于路径 /foo?user=1，则有route.hash
当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。⑤route.matched
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。⑦ $route.name` 当前路径名字
11.vuex是什么？怎么使用？哪种功能场景使用它？
vue框架中状态管理。
新建了一个目录store.js，….. export 。在main.js引入store，注入。
场景有：
单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
12.vuex有哪几种属性？
答：有五种，分别是
State、 Getter、Mutation 、Action、 Module
state=> 基本数据(数据源存放地)
getters=> 从基本数据派生出来的数据
mutations=> 提交更改数据的方法，同步！
actions=> 像一个装饰器，包裹mutations，使之可以异步。
modules=> 模块化Vuex
13.vue父子组件之间的传值
- 如果是比较少的传值，可以用props,$emit
- 如果是比较多的地方要的传值，可以用vuex
14.<keep-alive></keep-alive>的作用是什么?
答:keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
15.如何获取dom?
答：ref="domName" 用法：this.$refs.domName
16.v-for为什么要加key
答： 给dom添加唯一标识,使vue渲染dom可以准确的找到
