Vue高频面试题

一、Vue 常用的事件修饰符都有哪些？（必会）

    .prevent: 提交事件不再重载页面；

	.stop: 阻止单击事件冒泡；

	.self: 当事件发生在该元素本身而不是子元素的时候会触发；

	.capture: 事件侦听，事件发生的时候会调用

二、$route 和 $router 的区别

$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。
$router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象，经常用的跳转链接就可以用this.router.push会往history栈中添加一个新的记录。返回上一个history也是使用$router.go 方法

三、mvvm 和 mvc 区别是什么？哪些场景适合？

1）MVVM 基本定义

MVVM 即 Model-View-ViewModel 的简写。即模型-视图-视图模型。模型（Model）指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型(ViewModel)是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向：一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

2） MVC 基本定义

MVC 是 Model-View- Controller 的简写。即模型-视图-控制器。M 和 V指的意思和 MVVM 中的 M 和 V 意思一样。C 即 Controller 指的是页面业务逻辑。使用 MVC 的目的就是将 M 和 V 的代码分离。MVC 是单向通信。也就是 View 跟Model，必须通过 Controller 来承上启下。MVC 和 MVVM 的区别并不是 VM 完全取代了 C，只是在 MVC 的基础上增加了一层 VM，只不过是弱化了 C 的概念，ViewModel存在目的在于抽离 Controller 中展示的业务逻辑，而不是替代 Controller，其它视图操作业务等还是应该放在 Controller 中实现。也就是说 MVVM 实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。

3）使用场景

MVC 和 MVVM 其实区别并不大。都是一种设计思想。主要就是 MVC 中Controller 演变成 MVVM 中的 viewModel，MVVM 主要解决了 MVC 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。区别：Vue 数据驱动，通过数据来显示视图层而不是节点操作。 场景：数据操作比较多的场景，需要大量操作 DOM 元素时，采用 MVVM 的开发方式，会更加便捷，让开发者更多的精力放在数据的变化上，解放繁琐的操作 DOM 元素。

四、watch、methods 和 computed 的区别?（必会）

1．computed：
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
2．methods：
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
3．watch：
观察和响应 Vue 实例上的数据变动，一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象，Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
2）三者的加载顺序

1. computed 是在 HTML DOM 加载后马上执行的，如赋值；（属性将被混入到Vue 实例）
2. methods 则必须要有一定的触发条件才能执行，如点击事件
3. watch 呢？它用于观察 Vue 实例上的数据变动。
   3）默认加载的时候
   先 computed 再 watch，不执行 methods；
   4）触发某一事件后
   先 computed 再 methods 再到 watch
   computed 属性 vs method 方法
   computed 计算属性是基于它们的依赖进行缓存的。
   5）总结
   计算属性 computed 只有在它的相关依赖发生改变时才会重新求值，当有一个性能开销比较大的的计算属性 A ，它需要遍历一个极大的数组和做大量的计算，然后我们可能有其他的计算属性依赖于 A ，这时候，我们就需要缓存，每次确实需要重新加载，不需要缓存时用 methods
   watch和computed各自处理的数据关系场景不同
   1.watch擅长处理的场景：一个数据影响多个数据
   2.computed擅长处理的场景：一个数据受多个数据影响
   computed适用于需要根据已知数据计算出新值的情况，而watch适用于需要监听和响应数据变化的情况。

五、Vue2数据双向绑定的原理是什么?

Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化
第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个 update()方法
3、待属性变动 dep.notice()通知时，能调用自身的 update()方法，并触发Compile 中绑定的回调，则功成身退。
第四步：MVVM 作为数据绑定的入口，整合Observer、Compile和Watcher 三者，通过Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。

六、Vue 中 key 值的作用是什么？

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key 的作用主要是为了高效的更新虚拟 DOM。
列表渲染时的唯一性页面上标签都对应具体的虚拟dom对象（JS对象），循环中，如果没有唯一的key，页面上删除一条标签，由于不知道删除的是哪一条，需要吧全部的虚拟dom重新渲染，如果知道key，为标签被删除掉，只需要吧渲染的dom为标签删除即可

七、在 Vue 中使用插件的步骤（必会）

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

八、Vue-Router 怎么配置路由（必会）

在 Vue 中配置路由分为 5 个步骤，分别是：
1, 安装
npm install --save Vue-Router
2, 引用
import VueRouter from ‘Vue-Router’
3, 配置路由文件
var router = new VueRouter({
routes:[
{
path:“/hello”,
component:HelloWorld
},
{
path:“/wen”,
component:HelloWen
}]
new Vue({
el: ‘#app’,
components: { App },
router,
template: ‘’
})
4, 视图加载的位置
默认 App.Vue 文件中加
5，跳转导航
helloword（渲染出来的是 a 标签）

九、Vuex 的出现解决了什么问题?（必会）

主要解决了以下两个问题:

1, 多个组件依赖于同一状态时，对于多层嵌套的组件的传参将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
2, 来自不同组件的行为需要变更同一状态。以往采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

十、vue路由之间是怎么跳转的？有哪些方式？（必会）

    1、<router-link to="需要跳转到页面的路径">
	2、this.$router.push()跳转到指定的 url，并在 history 中添加记录，点击回退返回到上一个页面
	3、this.$router.replace()跳转到指定的 url，但是 history 中不会添加记录，点击回退到上上个页面
	4、this.$touter.go(n)向前或者后跳转 n 个页面，n 可以是正数也可以是负数