vue面试题整理

mpvue和vue的区别

大的项目用vue还是react好，为什么？

vue与react区别

1、监听数据变化的实现原理不同
Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能

React 默认是通过比较引用的方式（diff）进行的，如果不优化（PureComponent/shouldComponentUpdate）可能导致大量不必要的VDOM的重新渲染

2、数据流的不同
Vue中默认是支持双向绑定的
React 不支持双向绑定，一直提倡的是单向数据流，他称之为 onChange/setState()模式。
3、模板渲染方式的不同
React 是通过JSX渲染模板
而Vue是通过一种拓展的HTML语法进行渲染

对于MVVM的理解

Model 代表数数据层，在Vue中指的是 data属性
View 代表视图层，在Vue中指的是 html
ViewModel 代表视图模型层，ViewModel 通过双向数据绑定把 View 层和 Model层连接了起来，在Vue中指的是vue的实例

mvc和mvvm的区别

1.View传送指令到Controller。
2.Controller完成业务逻辑后改变Model状态。
3.Model将新的数据发送至View,用户得到反馈。

MVVM通过数据来显示视图层而不是节点操作
MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低,加载速度变慢,影响用户体验

数据劫持的优点

无需显式调用。vue利用发布者订阅者模式+数据劫持，可以直接通知变化并更新视图。比如data.name = '渣渣辉‘；后直接触发变更，而比如Angular的脏值检测则需要显式调用markForCheck
可精确得知变化数据：劫持了属性setter之后，当属性值改变，我们可以精确知道变化的内容newVal，因此在这一部分不需要多余的diff操作。否则我们只知道数据变化了，但是不知道具体哪些数据发生变化，所以需要大量的diff来找出变化值。这是额外的性能损耗。

双向数据绑定原理

请详细说下你对vue生命周期的理解

1、初始化显示

• beforeCreate(): 不能通过this读取data中的数据
  在beforeCreate阶段，在实例初始化之后立即同步调用，此时还没有数据代理和数据观察,vue实例的挂载元素el和数据对象data都为undefined

• 实现数据代理与数据监视

• created(): 在此开始可以通过this读取data中的数据
  在created阶段，vue实例的数据对象data有了，el还没有

• 实现在内存中去编译/解析模板

• beforeMount(): 不能通过ref来读取页面中的标签
  vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。

• 将编译的DOM挂载到页面上显示

• mounted(): 在此开始可以通过ref来读取页面中的标签——初始化渲染页面，只会调用一次
  在mounted阶段，vue实例挂载完成,$el 可以访问（ $ el 是虚拟DOM编译之后的真实DOM），data.message成功渲染。

2、更新状态：更新了data中的数据

• beforeUpdate(): 读取界面内容是老的
• 更新界面
• updated(): 读取界面内容是新的

3、销毁vue实例: vm.$destory()

• beforeDestory(): 死亡前调用
• destoryed(): 死亡后调用

---

常用的生命周期方法
* mounted() / created(): 绑定自定义事件监听、发送ajax请求, 启动定时器等异步任务
* beforeDestory(): 做收尾工作, 如: 清除定时器

---

什么是vue生命周期？

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

---

vue生命周期的作用是什么？

答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑

---

vue生命周期总共有几个阶段？

答：它可以总共分为8个阶段：创建前/后、载入前/后、更新前/后、销毁前/销毁后。

---

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

答：会触发下面这几个beforeCreat、created、beforeMount、mounted 。

---

DOM 渲染在哪个周期中就已经完成？

答：DOM 渲染在 mounted 中就已经完成

data为什么是函数

组件会复用
当我们使用组件的时候，虽然data是在原型链上被创建的，所有的实例化的组件都共享一份data；而函数是返回对象的独立拷贝

vuex

vuex是一个专为vue.js应用程序开发的状态管理器，它采用集中式存储管理应用的所有组件的状态，并且以相应的规则保证状态以一种可以预测的方式发生变化。

state: vuex使用单一状态树，用一个对象就包含来全部的应用层级状态

mutation: 更改vuex中state的状态的唯一方法就是提交mutation

action: action提交的是mutation，而不是直接变更状态，action可以包含任意异步操作

getter: 相当于vue中的computed计算属性

vue-router的使用

引入 vueRouter ，声明使用vueRouter插件，new vueRouter并配置路由
在main.js中注册路由

vue-router hash 模式和 history 模式有什么区别？

1、url 展示上，hash 模式有“#”，history 模式没有
2、刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求，没有处理的话，会返回 404，一般需要后端将所有页面都配置重定向到首页路由。
3、兼容性。hash 可以支持低版本浏览器和 IE

vue-router hash 模式和 history 模式是如何实现的

1、hash 模式：
这种 #。后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发hashchange这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作

2、history 模式：
history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和 replaceState，这两个 API 可以改变 url 地址且不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作。

history模式刷新会出现404

hash模式:
路径中带#: http://localhost:8080/#/home/news
发请求的路径: http://localhost:8080 项目根路径 = = > 返回index.html
响应: 返回的总是index页面 = = > path部分(/home/news)被解析为前台路由路径

history模式:
路径中不带#: http://localhost:8080/home/news
发请求的路径: http://localhost:8080/home/news ==> 后台处理不了，返回404
响应: 404错误

解决思路:
需要在服务器配置，如果URL匹配不到任何静态资源，就跳转到默认的index.html。, path部分(/ho