关于vue2 哆啦A梦

1.什么是MVVM？
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View代表UI组件，它负责将数据模型转化成UI展现出来，ViewModel是一个同步View和Model的对象
在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互的，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会反应到View上
ViewModel通过双向数据绑定把View和Model层连接了起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需要关注业务逻辑，不需要手动操作DOM，不需要数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理

2.MVVM和MVC区别？它和其他框架(jQuery)的区别是什么？哪些场景适合？
MVC和MVVM其实区别并不大。都是一种设计思想。主要就是MVC中Controller演变成的ViewModel。MVVM主要解决了MVC中大量的DOM操作使页面渲染性能降低，加载速度变慢，影响用户体验
区别：vue数据驱动，通过数据来显示图层而不是节点操作
场景：数据操作比较多的场景，更加便捷

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

4.组件之间的传值？
①父组件 -> 子组件
父组件给子组件绑定属性，子组件通过props属性来接收传递的数据
②子组件 -> 父组件
方式：在父组件中声明一个接收数据的函数，父组件给子组件绑定事件，子组件通过$emit触发事件，并且可在此时传递参数，父组件通过定义好的监听事件接收参数 ③兄弟组件 创建一个新的vue实例，让各个兄弟组件共用一个事件机制，通过事件触发$emit(方法名，传递的数据)，在mounted()钩子函数中，触发事件$on(方法名，callback(接收数据))，
此时callback函数中的this已经发生了改变，可以使用箭头函数

5.路由之间的跳转
声明方式(标签跳转) 编程式(js跳转)

6.vue.cli怎样使用自定义的组件？有遇到过哪些问题吗？
第一步：在components目录新中新建你的组件文件(indexPage.vue)，script一定要export default{}
第二步：在需要用的页面(组件)中导入：import indexPage from ‘@/components/indexPage.vue’
第三步：注入到vue中的子组件的components属性上面，components: {indexPage}
第四步：在template视图view中使用，例如有indexPage命名，使用的时候则index-page

7.vue如何实现按需加载配合webpack配置
webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import这样的方式引入，改为const定义的方式进行引入
不进行页面按需加载引入方式：import home from ‘../../common.home.vue’
进行页面按需加载的引入方式：const home = r => require.ensure([],() => r(require(‘../../common/home.vue’))

8.vuex是什么？怎么使用？哪种功能场景使用它？
vue框架中状态管理。在main.js引入store，注入。新建一个目录store，….export。场景有：单页面应用中，组件之间的状态。音乐播放器、登录状态、加入购物车

9.vuex有哪几种属性？
有五种，分别是State、Getter、Mutation、Action、Module

10.vuex的State特性？
A.Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应一般Vue对象里面的data
B.state里面存放的数据是响应式的，Vue组件从state中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生 更新
C.它通过mapState把全局的state和getters映射到当前组件的computed计算属性中

11.vuex的Getter特性
A.getter可以对State进行计算操作，它就是Store的计算属性
B.虽然在组件内也可以做计算属性，但是getter可以在多组件之间复用
C.如果一个状态只在一个组件内使用，是可以不用geters

12.vuex的Mutation特性
Action类似于mutation，不同在于：Action提交的是mutation，而不是直接变更状态；Action可以包含任意异步操作

13.不用vuex带来什么问题？
可维护性下降，想修改数据要维护三个地方；
可读性下降，因为一个组件里的数据，根本就看不出来从哪来的
增加耦合，大量的上传派发，会让耦合大大增加，本来Vue用Component就是为了减少耦合，现在这么用，就违背了组件化的初衷。

14.v-show和v-if指令的共同点和不同点
v-show指令是通过修改元素的display的CSS属性让其显示或隐藏
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

15.如何让CSS只在当前组件中起作用
将当前组件的修改为

16.的作用是什么？
包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

17.vue中引入组件的步骤？
（1）采用ES6的import…from…语法或Common.js的require()方法引入组件
（2）对组件进行注册，代码如下
（3）使用组件

18.指令v-el的作用是什么？
提供一个在页面中已存在的DOM元素作为vue实例的挂载目标，可以是css选择器，也可以是一个HTMLElement实例

19.在vue中使用插件的步骤
采用ES6的import…form…语法或CommonJS的require()方法引入插件
使用全局方法Vue.use(plugin)使用插件，可以传入一个选项对象vue.use(MyPlugin,{someOption: true})

20.请列举出3个Vue中常用的声明周期钩子函数？
created：实例已经创建完成之后调用，在这一步，实例已经完成数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没有开始，$el属性目前还不可见 mounted：el被新创建的vm.$el替换，并且挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内
activated：keep-alive组件激活时调用

21.active-class是哪个组件的属性？
vue-router模块的router-link组件

22.怎么定义vue-router的动态路由以及如何获取传过来的动态参数？
在router目录下的index.js文件中，对path属性加上/:id。使用router对象的params.id

23.vue-router有哪几种导航钩子？
有三种
第一种：全局导航钩子，router-beforeEach(to,from,next)，作用：跳转前进行判断拦截
第二种：组件内的钩子
第三种：单独路由独享组件

24.生命周期的八个阶段？
创建前/后：在beforeCreate阶段，vue实例挂载元素el和数据对象data都为undefined，还未初始化。在create阶段，vue实例的数据对象data有了，el还没有
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的DOM节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染
更新前/后：当data变化时，会触发beforeUpdate和updated方法
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和DOM的绑定，但是DOM结构依然存在

25.什么是vue生命周期？
vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是vue的声明周期

26.vue生命周期的作用是什么？
它的生命周期有多个事件钩子，让我们控制整个vue实例的过程时更容易形成好的逻辑

27.vue声明周期总共有几个阶段？
可以总共分为8个阶段：创建前/后、载入前/后、更新前/后、销毁前/后

28.第一次页面加载会触发哪几个钩子？
第一次页面加载时会触发beforeCreate、create、beforeMount、mounted这几个钩子

29.DOM渲染在哪个周期中就已经完成？
DOM渲染在mounted中就已经完成了

30.简单描述每个周期具体适合哪些场景？
beforeCreate：可以在加个loading事件，在加载实例时触发
created：初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted：挂载元素，获取DOM节点
updated：如果对数据统一处理，在这里写相应函数
beforeDestroy：可以做一个停止事件的确认框
nextTick：更新数据后立即操作DOM

31.说出至少4中vue当中的指令和它的用法？
v-if：判断是否隐藏； v-for：数据循环； v-bind: class； 绑定一个属性； v-model：实现双向数据绑定

32.v-loader是什么？使用它的用途有哪些？
解析：vue文件的一个加载器。
用途：js可以写ES6、style样式，可以scss或less、template可以加jade等

33.scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？
css的预编译
第一步：安装css-loader、node-loader、sass-loader等加载器模块
第二步：在build目录中找到webpack.bace.config.js，在那个extends属性中加一个扩展.scss
第三步：在同一个文件，配置一个module属性
第四步：然后在组件的style标签上lang属性，例如：lang=”scss”

34.为什么使用key？
当有相同标签名的元素切换时，需要通过key特性设置唯一的值来标记让vue区分它们，否则vue为了效率只会替换相同标签内部的内容。

35.为什么避免v-if和v-for用在一起？
当vue处理指令时，v-for比v-if具有更高的优先级，通过v-if移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会再v-if为否的时候运算v-for

36.VNode是什么？虚拟DOM是什么？
vue在页面渲染的节点，及其子节点称为”虚拟节点(virtual Node)”，简写为”VNode”。”虚拟DOM”是由vue组件树建立起来的整个VNode树的称呼。

37.vue-router是什么？它有哪些组件？
vue用来写路由的一个插件。router-link、router-view

38.路由导航钩子有哪些？它们有哪些参数？
导航钩子有：全局钩子和组件内独享的钩子。beforeRouterEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
参数有：有to(去的那个路由)、from(离开的路由)、next(一定要在这个函数才能去到下一个路由，如果不用就拦截)最常用的就这几种

39.vue的双向数据绑定原理是什么？
vue.js是采用数据劫持结合发布者-订阅者模式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调

40.vue的计算属性，什么情况下要用计算属性？
计算属性：computed
需要计算某个数据，这个数据依赖其他的数据，其他数据的变化，会引起它的变化

41.axios的优点？（为啥是两次请求）
可以设置拦截请求和响应
自动转换json请求和响应
支持promise的api