目前在准备面试，VUE篇

1.MVVM和MVC

MVC：

Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。
View（视图）是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。视图层，前端。
Controller（控制器）是应用程序中处理用户交互的部分。一般包括业务处理模块和router路由模块
通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

MVVM：

将双向绑定作为核心思想，View层和Model层没有联系，通过ViewModel进行交互，View层的变化会同步到Model，Model层的变化也会反映到View上。

2.双向绑定原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者，触发相应的监听回调。

3.vue的生命周期，mounted和created的区别，父子组件的生命周期

created：dom渲染前调用，即通常初始化某些属性值

mounted：在dom渲染后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作

加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程
父 beforeUpdate -> 父 updated

销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

4.computed和watch的区别

computed是计算属性，更多用于计算值的场景，并具有缓存，依赖于其他属性值，当其他属性改变的时候下一次获取computed值时也会改变，适用于计算比较消耗性能的场景。

watch类似于某些数据的监听回调，用于观察props、$emit或者本组件的值，当数据变化时执行回调进行后续操作

5.v-show和v-if

共同点：都是动态显示 DOM 元素

区别：

v-if 是动态的向 DOM 树内添加或者删除 DOM 元素，v-show 是通过设置 DOM 元素的 display 样式属性控制显隐，v-show 有更高的初始渲染消耗，v-if 有更高的切换消耗。

6.为什么data必须是函数

组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，他们只负责各自维护数据，不会造成混乱。而单纯的写成对象形式，就是所有组件实例共用了一个data，这样改一个全部都会修改。

7.Keep-alive

主要是用于需要频繁切换的组件时进行缓存，不需要重新渲染页面。

8.Vue的优化方式

图片懒加载，路由懒加载，v-if和v-show，当一个组件销毁的时候需要手动去removeEventListener

使用Object.freeze()方式冻结data中的属性，从而阻止数据劫持。

9.Vue 项目中为什么要在列表组件中写 key，其作用是什么？

key主要用在虚拟Dom算法中，每个虚拟节点VNode有一个唯一标识Key，通过对比新旧节点的key来判断节点是否改变，用key就可以大大提高渲染效率，这个key类似于缓存中的etag。

10.vue路由的跳转方式有几种

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

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

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

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

11.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 来接收

12.路由对象route和router的区别

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

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

13.第一次页面加载会触发哪几个钩子？

beforeCreate， created， beforeMount， mounted

14.为什么 v-for 会要有key？

因为在 vue 中会有一个 diff 算法，假如子节点 AB 调换了位置，它会比较 key 值，会直接调换，而不是一个销毁重新生成的过程。

15.vue-loader是什么？它的用途是什么？

vue文件的一个加载器，将template/js/style转换为js模块

用途:js可以写es6、style样式

16.$nextTick的使用

在data()中的修改后，页面中无法获取data修改后的数据，使用$nextTick时，当data中的数据修改后，可以实时的渲染页面

17.VUEX

vuex是一个状态管理工具，所谓状态的是就是数据，采用集中式存储管所有组件的状态，是为了结局中大型项目一个数据共享的问题。vuex 他可以将数据保存到本地，数据是响应式的，能够保持数据页面的共享，提高开发效率。

state：vuex的基本数据，数据源存放地，用于定义共享的数据。

getters：从基本数据派生的数据，相当于state的计算属性，this.$store.getters.xxx

mutation：提交更新数据的方法，唯一 一个可以操作state 中数据的方法，必须是同步的，第一个参数是state，第二个参数是cmmi传过来的数据，this.$store.commit(“方法名”,数据)

action：action是用来做异步操作的，一般用来发请求，在 action 中写入函数，然后在页面中用dispatch调用，然后在 action 中通过commit 去调用 mutation 通过 mutation 去操作state。this.$store.dispatch(“方法名”,数据)

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

18.路由对象route和router的区别

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

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

---

未完待续