vue面试题（个人总结）

一、v-if和v-show

• v-show和v-if都是动态的控制元素的隐藏和显示
• v-show是同过css中display设置为none进行隐藏和显示，v-if则是将dom元素整个的删除和添加，同时v-if是惰性的，也就是说如果初始条件是fasle，那么页面是不会编译这个元素节点的。
• v-if具有较高的切换消耗，而v-show具有较高的初始渲染消耗
• 所以v-show适合频繁的切换，而v-if适合运营条件不大可能改变的情况。

二、什么是MVVM

mvvm是Model-view-viewModel的缩写，mvvm是一种设计思想，Model是代表数据模型：可在model中定义数据修改和操作的业务逻辑，view负责将数据模型转化ui展示，而viewmodel是view和Model之间的桥梁，

在mvvm的架构下，view和model之间没有直接的联系，而是通过viewmodel进行交互，而model和viewModel之间的交互是双向，viewMOdel通过双向数据绑定把View层和Model层连接起来，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

优点：mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

三、双向数据绑定原理

vue实例通过数据劫持和发布订阅者模式的方式来实现双向数据绑定，主要通过object.defineprototype来动态的劫持getters和setter来实现双向数据绑定

四、vue的优点

• 低耦合， 视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
• 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
• 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
• 轻量级框架。只关注视图层,是一个构建数据的视图集合,大小只有几十kb
• 运行速度更快
• 虚拟DOM

五、为什么vue中data必须是一个函数

因为对象是引用类型，当重组组件时，由于数据对象都指向同一个data 对象，所以修改一个组件的data 对象时，所有的都会修改，如果返回的是一个对象函数，那么就是一个新的对象，因为引用地址不同，所以修改一处时，其他组件的data不会改变。

六、vue路由守卫

一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子；beforeRouteEnter、beforeRouteUpdate(2.2新增)、beforeRouteLeave
第三种：单独路由独享组件（beforeEnter）

七、组件传值方法

• props/$emit,父传子使用props，而emit是子传父
• emit/emit/emit/on,这种方法是通过一个空的vue实例作为中央事件总线，用它来出发事件和监听事件，巧妙实现的数据的传递，
• vuex(状态管理器)，vuex实现了一个单向数据流，在全局拥有一个state存放数据，当组件需要更改state在中的数据时，需要通过mutation进行，mutation提供了订阅者模式供外部插件调用获取state数据。而当所有异步操作或批量的同步操作走action时，任然需要通过mutation来修改state数据，最后会更具state的数据变化，渲染到视图上。
• attrs/attrs/attrs/listeners,适用于多级嵌套传参；attrs包含了父作用域中不被prop所识别的特定属性，attrs包含了父作用域中不被prop所识别的特定属性，attrs包含了父作用域中不被prop所识别的特定属性，listeners:包含了父作用域中的v-on事件监听器

八、computed和watch的区别

• computed用声明式的方式描述一个值依赖其他的值，当模板上的属性绑定到计算属性中市，vue会在其他依赖值发生改变导致该计算属性发生改变的时候更新DOM

计算属性computed : （多个属性影响一个属性）

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
   3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
3. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
   5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

• watch监听的是你定义的变量，当你定义的变量的值发生变化时，调用对应的方法（一个数据影响多个数据）
  侦听属性watch：

1. 不支持缓存，数据变，直接会触发相应的操作；
   2.watch支持异步；
   3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
2. 当一个属性发生变化时，需要执行对应的操作；一对多；
3. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
   　　immediate：组件加载立即触发回调函数执行，
   　　deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

九、keep-alive

keep-alive是Vue的内置组件，包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

十、key

当有相同标签名的元素切换时，需要通过key特效来设置唯一的值来标记这个标签，防止vue为了效率替换掉同名标签内的内容

十一、.$nextTick是什么

vue实现响应式并不是数据发生变化后dom立即变化，而是按照一定的策略来进行dom更新。
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

十二、directive自定义指令

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

十三、hash和history

• hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取； 特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。 hash 模式下:仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
• history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

十四、route和route和route和router的区别

• $route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
• $router是’路由实例’对象包括了路由的跳转方法，钩子函数等。

十四、vue响应式原理

有一个数据a.b,在vue对象实例化过程中，会给a,b通过ES5的defineProperty()方法，添加getter和setter方法，同时vue.js会对模板做编译，解析生成一个指令对象，比如v-text指令，每个指令对象都会关联一个watcher，当对指令对象求值时，就会触发getter，并将依赖收集到watcher中；当再次改变a.b值时，就会触发setter方法，会通知到对应关联的watcher,watcher则再次对a.b求值，计算对比新旧值，当值改变时，watcher会通知到指令，调用指令的update方法，由于指令是对dom的封装，所以会调用原生dom的方法，去更新视图。

十五、babel工作原理

babel是一个转译器，因为它只是把同种语言的高版本规则翻译成低版本规则
babel的转译过程也分为三个阶段：parsing、transforming、generating
ES6代码输入 ==》 babylon进行解析 ==》 得到AST
==》 plugin用babel-traverse对AST树进行遍历转译 ==》 得到新的AST树
==》 用babel-generator通过AST树生成ES5代码