1.为什么要选vue？与其他框架对比的优势和劣势？

 vue是基于数据驱动的框架，不需要操作DOM数结构，只需关注视图的数据渲染。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API；Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。
vue两大特点：响应式编程、组件化
vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快Vue特点(6个)： 
- 渐进式的设计理念(基于数据驱动的)
- 轻量级的框架-压缩版92kb
- 双向数据绑定(MVVM架构)
- 指令系统  v-xxx 搞定一切 
- 单页面应用SPA  组件化  scoped
- 虚拟DOM 借鉴react的概念  

2.mvvm框架是什么？它和其他框架 (jQuery) 的区别是什么？哪些场景最适合？

- M: model 指的就是数据
- V：view  视图
- VM: view-model 
View和Model之间没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的数据交互是双向的;ViewModel保证视图和数据的一致性; 轻量高效的开发。vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷

3.vue等单页应用及其优缺点？

优点
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。
数据驱动
组件化
轻量
简洁
高效
模块友好
页面切换快缺点
不支持低版本的浏览器，最低只支持到IE9；
不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；
首屏加载耗时相对长一些,会有短暂的白屏现象；
不可以使用浏览器的导航按钮需要自行实现前进、后退。

4. 说出至少4种 vue 当中的指令和它的用法？

v-text、v-html：用来展示文本数据，展示包含HTML结构的数据;
v-if：根据if条件的布尔值，决定是否展示DOM元素;
v-else-if：多重if条件嵌套选择;
v-show：判断条件 元素的display 控制 元素是否显示;
v-for（列表渲染）
v-on（绑定事件）
v-bind 动态属性：

5.v-if 和 v-show区别。

答：1、v-if是动态地向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制元素的显示或隐藏；
2、v-if是真实的条件渲染；v-show只是简单的基于css切换；
3、v-if有更高的切换消耗,是惰性；v-show有更高的初始渲染消耗。

6. 说说vue 的双向绑定函数的原理。

view视图通过与viewModle层进行数据交互，将数据更改到model层中，然后将model层的数据通过viewModel来渲染到view层视图上展示;

7. 常用的修饰符有哪些？分别说明它的作用。

1.表单修饰1. .number绑定值强制转换为 number 类型；
2. .trim去除前后部分空格修饰符；
3. .lazy赋值触发事件（oninput） 变成为  onchange2.事件修饰符1. .stop: 阻止事件冒泡；相当于ev.stopPropagation()
2. .prevent: 阻止默认事件， 默认表单提交事件；相当于ev.preventDefault();
3. .capture : 捕获阶段触发;
4. .self:只响应 事件源为自己的事件;
5. .once:只触发 一次;3.键盘修饰符1. 键盘的别名：按下对应的键名触发；
2. 键盘的键值：按下对应的数字键值时触发；4.鼠标修饰符1. .left：鼠标左键；
2. .right：鼠标右键；
3. .middle：鼠标中间滚轮；

8. 什么是 vue 的生命周期？

生命周期：Vue实例在被创建之前都要有一个初始化过程，有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染、更新、卸载等一系列过程，被称为Vue的生命周期。

9. 解析vue 生命周期中各个钩子函数在什么场景下执行。

创建期： 一个周期执行一次 
beforeCreate：创建之前 el,data,methods都为undefined
created：创建完成，data,methods初始化完成，el为undefined，数据添加完毕，还没有编译模板挂载beforeMount：挂载之前，el为挂载标签，但是{{}}还在
mounted：挂载完成，页面完成，数据请求，操作DOM更新期: 数据变化 就会重新渲染DOM 
beforeUpdate：更新之前
updated：更新完成销毁期:中止数据请求，关闭定时器
beforeDestroy：销毁之前
destroyed：销毁完成

10.说明 watch 和 computed 的作用和区别。

相同点：都是以Vue的依赖机制为基础的，都是希望在依赖数据发生变化时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化更新;
不同点：watch擅长处理的场景：一个数据影响多个数据;  computed擅长处理的场景：一个数据受多个数据影响;
虽然计算属性在大多数情况下更适合，但有时也需要一个自定义的侦听器，当需要数据变化时候执行异步或开销大的操作时候，通过侦听器最好;
总结：
当在模板中使用了复杂逻辑的表达式时候，应当使用计算属性;
虽然methods中定义的方法也能实现同样的效果，但是因为计算属性可以基于它们依赖进行缓存，所以选择计算属性会比方法methods更加高效;
当需要在数据变化时执行异步或者开销大的操作时，可以使用watch;

11. 说明 watch 和 method 的作用和区别。

methods里面定义的函数，是需要主动调用的，而watch相关的函数，会自动调用,完成我们希望完成的作用;methods里面定义的是函数，你显然需要像"fuc()"这样去调用它（假设函数为fuc）;watch:类似于监听机制+事件机制：

12. vue中过滤器如何定义和使用？

过滤器的作用: 对数据进行一些加工处理，比如 数字保留几位小数 。局部定义的过滤器：filter**s**:{过滤器名称 : function（参数）{...  return 返回处理结果;	}}	对象的形式全局注册过滤器：Vue.**filter**('过滤器名称',funciton(参数){... return 处理结果});	参数的形式new Vue({el:"#introduce",data:{msg:"hello"},// 局部注册的过滤，只在当前实例起作用filters:{// 	属性的名称就是过滤器的名称//	函数 ：调用过滤器时执行的函数// 	txt : 被过滤的数据//  ind : 过滤器接受的参数UpFilter(txt,ind){// console.log(txt,ind)// return 就是 过滤后的数据return txt.slice(0,ind)+txt.charAt(ind).toUpperCase()+txt.slice(ind+1);}}});//	====================================// 全局注册的 过滤器，所有实例都可以使用Vue.filter("UpFilter", function (txt, ind) {// console.log(txt,ind)// return 就是 过滤后的数据return txt.slice(0, ind) + txt.charAt(ind).toUpperCase() + txt.slice(ind + 1);})new Vue({el: "#introduce",data: {msg: "hello"},});//	使用
{{数据|调用的过滤器函数名称}}

13. 使用计算属性实现日期的格式化，只显示年月日。

<div id="app"><p>{{date}}</p></div><script>let vm = new Vue({el: "#app",data: {},computed: {date() {//	获取年月日let date = new Date();let month = date.getMonth() + 1;date = date.getFullYear() + '年' + month + '月' + date.getDate() + '日';return date;}}})</script>

14. 过渡动画在什么场景下使用？有哪几个内置的类名。

1. 条件渲染 (使用 v-if)
2. 条件展示 (使用 v-show)
3. 动态组件	(is来切换显示)
4. 组件根节点6个：
1)v-enter   定义进入过渡的开始状态
2)v-enter-active  定义进入过渡生效时的状态
3)v-enter-to   2.1.8版及以上 定义进入过渡的结束状态
4)v-leave   定义离开过渡的开始状态
5)v-leave-active  定义离开过渡生效时的状态
6)v-leave-to  2.1.8版及以上 定义离开过渡的结束状态

15. 列举出在vue 中组件的定义方式有哪几种？

两种方式：
1.全局注册：
Vue.component("组件名",{配置项});
2.局部注册：
components:{"组件名",{配置项}}
配置项：{template:`html标签内容`/ template标签的id名称}

16. 组件中的 data 为什么必须是函数？

如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。周考测试答案：to
组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

17. Vue.cli 中怎样定义和使用组件？

定义：
<template> ...
</template><script>
export default {     
};
</script> 
</style>使用： 
<TodoList> 
</TodoList>引入：import TodoList from "./components/TodoList";
注册：
export default {  components: {TodoList,},
}

18. 请说出vue.cli 项目中src 目录每个文件夹和文件的用法？

src  			文件夹：我们将要写的代码放在这里面，打包上线时会进行编译、压缩等
- assets		文件夹：资源目录
- components	文件夹：组件目录
- App.vue		文件：根组件
- main.js		文件：页面入口JS文件

19. Vue 中组件之间如何传值，有哪几种方式？

子组件通过props属性来接收父组件传递的值;
父组件使用子组件的值，通过自定义事件来传递函数，在子组件中通过$emit();函数来触发执行;
通过一个公共的空Vue实例的载体js文件来传递两者之间的数据$emit()发送数据触发函数，$on()接收数据函数;
1.父组件向子组件传值
2.子向父组件传值
3.非父子组件（兄弟）之间传值

20. Vue中的ref 是什么？如何使用ref ？

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例。- ref加在普通的元素上，用this.$refs.自定义名称，获取到的是DOM元素;
- 利用 v-for 和 ref 获取一组数组或者DOM节点;
- ref加在子组件上，用this.$refs.自定义名称，获取到的是组件实例，可以获取或使用组件的所有数据和方法;

21. Vue中如何使用jQuery？

三种方式：
1.通过外部链接引用jQuery文件或本地下载的jQuery文件;
2.使用npm安装依赖包，然后在组件中引入jQuery包; import $ from 'jquery';
3.将jquery包放入vue实例上，然后全局引用;  项目中 可以在main.js文件中绑定;	Vue.prototype.$=$;

22. 说说你对slot的理解有多少？Slot使用场景有哪些？

匿名插槽 ———  
具名插槽 ———  
作用域插槽 ———  
slot 用于决定将所携带的内容，插入到指定的某个位置，从而是模块分块，具有模块化的特质和更大的重用性;

23. Vue的is 这个属性你有用过吗？主要使用在哪些方面。

1.改变默认标签约束:众所周知，有些HTML元素，诸如 <ul>、<ol>、<table>和<select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部，正是因为html模板的限制，于是就诞生了is。
2.动态组件:如果要在Vue中展示不同组件的内容，在没有学到路由的时候，我们可以通过is特性来实现组件的动态切换。<!-- 动态组件 ，is 指明渲染的组件的名称--><div :is="com"></div>

24. Vue-router是什么？有哪些组件？

router-link  router-view
router-link是路由导航组件，会生成a标签，需要设置to属性；
router-view是路由出口，会根据浏览器地址进行匹配路由规则，并将匹配到的路由规则对应的组件展示在router-view处。

25. Active-class是哪个组件的属性？它的作用是什么？

active-class是vue-router模块的router-link组件中的属性，它作用于点击切换组件显示的样式;

26. 怎么定义 vue-router 的动态路由？怎么获取传过来的值。

配置路由格式:/router/:id 
可以通过$route.query.参数名 获取你说传递的值

27. Vue-router 有哪几种导航钩子。

导航钩子：
beforeEach,beforeResolve,afterEach,
beforeEnter,
beforeRouterEnter,beforeRouterLeave,beforeRouterUpdate,导航过程：
导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

28. $route 和 $router 的区别是什么。

$route路由信息;  $router用来做路由跳转 
route是当前跳转路由的局部对象，包含了当前 URL 解析得到的信息。获取到相对应的name，param，path，query。路由信息对象，可读。
router是VueRouter的一个实例，是一个全局的路由对象，有很多对象和属性。路由操作对象，可写。

29. Vuex是什么？怎么使用？那种功能场景使用它。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
[每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。]import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {count: 0},mutations: {increment (state) {state.count++}}
});只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中; getters相当于store的计算属性；
场景有：开发大型单页应用，单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

30. Vuex的store 有几个属性值。

5个。分别是State , Getter , Mutation , Action , Module。state
[Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。]state是存放的数据状态，不可以直接修改里面的数据。mutations
mutations定义的方法动态修改Vuex 的 store 中的状态或数据, 即修改state的值。this.$store.commit('函数名',...)来触发事件;getters
类似vue的计算属性，主要用来过滤一些数据。action 
actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。modules
项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

vue的优点是什么？

1.低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2.可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3.独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
4.可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

vue中如何同时获取事件传入的参数和事件对象？

<button @click="show(11,$events)"></button>methods:{show(x,ev){// x就是参数// ev就是事件对象}
}

组件之间如何通信

父组件向子组件通信：
在子组件的标签上定义一个变量，：变量=‘传的值’，在子级中使用props接收变量子组件向父组件通信：
在子组件中写一个事件，事件中使用this.$emit(‘自定义事件名’，’数据’)；在父级中的子标签上使用@自定义事件 = ‘父级事件’来接收非父子，可以通过EventBus vuex 本地存储

v-model是什么？怎么使用？vue中标签怎么绑定事件？

可以实现表单元素的双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：<input @click=doLog() />

vue中动态样式绑定class的方式都有哪些？

对象方法：:class="{ 'active': isActive }":class="{'active':isActive==-1}"
或者:class="{'active':isActive==index}"
绑定并判断多个:class="{ 'active': isActive, 'sort': isSort }"
第二种（放在data里面）:class="classObject"data() {return {classObject:{ active: true, sort:false }}}
数组方法:class="[isActive,isSort]"data() {return{isActive:'active',isSort:'sort'}}:class="[isActive?'active':'']":class="[isActive==1?'active':'']"

请至少列出4个vue基本指令，并简要说明其作用。

v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
v-for 格式： v-for="字段名 in(of) 数组json"  循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index
v-show 显示内容 （同angular中的ng-show）
v-hide  隐藏内容（同angular中的ng-hide）
v-if    显示与隐藏  （dom元素的删除添加 同angular中的ng-if 默认值为false）
v-else-if  必须和v-if连用
v-else  必须和v-if连用  不能单独使用  否则报错   模板编译错误
v-bind  动态绑定  作用： 及时对页面的数据进行更改
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数  函数必须写在methods里面
v-text  解析文本
v-html   解析html标签
v-bind:class   三种绑定方法  1、对象型  '{red:isred}'  2、三元型   'isred?"red":"blue"'  

什么是vue的计算属性。

在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。
好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名即可；⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

vue中组件的作用是什么，如何定义和使用组件。

组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。
定义组件有两种方式：
(1)全局方式
直接使用Vue.component()创建的组件，所有的Vue实例都可以使用。
(2)局部方式
三部曲1.创建这个组件；2.注册这个组件；3.使用这个组件；

vue实例有哪些常见的配置选项，分别用来干嘛。

el   挂载的节点
data 数据
methods  事件方法
computed 计算属性
watch  监听器
components  局部组件
filters   过滤器
directives  自定义指令
生命周期钩子函数

vue中key的作用

在v-for时使用，标识组件的唯一性，更好的区分组件，高效的更新虚拟DOM

谈谈你对vue生命周期的理解。以及每个阶段是什么？

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，
称之为 Vue 的生命周期。生命周期有：beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed

Vue如何注册一个组件，需要注意哪些点？

全局注册   Vue.component('组件名',{配置对象})
局部注册：   components:{组件名:{ 配置对象  }}
注意点： 组件名注意驼峰命名小坑，不要取html有的标签名；data是一个函数，且必须返回一个对象template   模板 只可以有一个根标签，且 可以简化，通过  选择器绑定body里面的template模板

vue-router基本使用步骤。

//	第1步：引入vue.js 再引入vue-router.js、  vue-router需要引入在vue之后
<script src="vue.js"></script>
<script src="vue-router.js"></script>
//	第2步：设置路由组件
let 组件配置变量 ={template:"#模板id",data(){return{}}...
}
//	第3步：建立映射关系
let routes = [{path:"/地址",component:组件配置变量},{path:"/地址/:id",    // 动态路由component:组件配置变量},{path:"/地址",components:{default:组件配置变量      // <router-view name="default"/>视图的名称:组件配置变量    // <router-view name="视图名称"/>}},{path:"/地址",   // 访问地址的时候回去访问地址2component:组件配置变量,redirect:"/地址2"   },{path:"/地址",    component:组件配置变量A,children:[{path:"地址2",    // 访问  /地址/地址2  //就渲染  组件配置变量 会渲染在组件配置变量A模板里面router-view里面component:组件配置变量}]}]
//	第4步：实例化路由对象
let router = new VueRouter({// routes:routes    // routes 简写routes，linkActiveClass:"active",mode:"hash/history"
})
//	第5步：挂载到Vue实例
new Vue({el:"",data:{},// router:router  // 简写router
})
//	第6步：书写router-view	视图出口
<div  id="app"><router-view/>
</div>
//	第7步：使用router-link 进行跳转
<router-link to="/地址">
// 酌情给分

路由同组件跳转，组件将不会更新，如何解决这个问题。

- 方法1： 利用watch监听$route的变化
- 方法2： 利用路由局部钩子 beforeRouteUpdate  只要路由更新就调用

请写出vue-router中的组件，并说明他们的作用。

router-link  router-view
router-link是路由导航组件，会生成a标签，需要设置to属性；
router-view是路由出口，会根据浏览器地址进行匹配路由规则，并将匹配到的路由规则对应的组件展示在router-view处。

如何定义vue-router的动态路由，怎么获取传递过来的参数。

path:"/foodId/:id" 
获取：this.$route.params.id

Vue的路由实现。hash模式和history模式的区别。

区别：
hash模式：1.采用的是window.onhashchange事件实现。2.可以实现前进 后退 刷新。3.比如这个URL：http://www.abc.com/#/hello, hash 的值为#/hello。它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面
history模式：1.采用的是利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。2.可以前进、后退，但是刷新有可能会出现404的报错3.前端的url必须和实际向后端发起请求的url 一致，如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误。

如何实现路由懒加载

const Index = () => import('../components/index')

Vue有哪些守卫？

1.全局守卫
router.beforeEach((to,from,next)=>{})
router.afterEach((to,from)=>{})2.路由独享守卫beforeEnter(to,from,next){ }3.组件内部守卫 movie.vue
beforeRouteEnter(to,from,next){//不能使用this},
beforeRouteUpdate(to,from,next){},
beforeRouteLeave(to,from,next){}

vuex有哪些模块，并说明它们的作用。

1. state：vuex的基本数据，用来存储变量
2. getter：从基本数据(state)派生的数据，相当于state的计算属性
3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

vuex和本地储存的区别。

1.vuex数据刷新就没有了，本地存储还在
2.vuex中的数据可以实时渲染，本地存储不行

mutations和actions的区别。

mutations是同步的，直接修改state,仓库通过commit调用；
actions可以处理异步，不能修改state,仓库通过dispatch调用

Vue中哪些方式可以实现页面之间传参，且获取到值。

1、search传参<router-link to="/地址?属性名=属性值"></router-link>this.$route.query.属性名
2、动态路由path:"/地址/变量名"<router-link to="/地址/数据值"></router-link>this.$route.params.变量名
3、本地存储setItem()  getItem()

组件中is可以做什么？

1.解决标签固定搭配问题；2.实现动态组件