您好,今天怡怡来为大家解答以上的问题。vue面试题相信很多小伙伴还不知道,现在让我们一起来看看吧！

vue面试题 面试前端啥也不会尴尬吗

1、原理：在创建Vue实例时，Vue会遍历data选项的属性，利用Object.defineProperty()为属性添加getter和setter对数据的读取进行劫持（getter用来依赖手机，setter用来派发更新），并且在内部追踪依赖，在属性被访问和修改时通知变化。

2、每个组件实例会有相应的watcher实例，会在组件渲染过程中记录依赖的所有数据属性，之后依赖项被改动时，setter方法会通知依赖与此data的watcher实例重新计算（派发更新），从而使它关联的组件重新渲染。

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

4、我的理解：在new Vue的时候，在Observer中通过Object.defineProperty()达到数据劫持，代理所有数据的getter和setter属性，在每次触发setter的时候，都会通过Dep来通知Watcher，Watcher作为Observer数据监听器与Compile模板解析器之间的桥梁，当Observer监听到数据发生改变的时候，通过Updater来通知Compile更新视图。

5、而Compile通过Watcher订阅对应数据，绑定更新函数，通过Dep来添加订阅者，达到双向绑定。

6、Vue实例从创建到销毁的全过程，就是生命周期。

7、也就是从开始创建、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、卸载等一系列过程。

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

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

10、第一次页面加载时会触发beforeCreate、created、beforeMounted、mountedDOM渲染在mounted中就已经完成。

11、1、beforeCreate：可以在这加个loading事件，在加载实例时触发；2、created：初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；3、mounted：挂载元素，获取DOM节点；4、updated：如果对数据统一处理，在这里写上相应函数；5、beforeDestroy：可以放一个确认停止事件的确认框；6、nextTick：更新数据后立即操作DOM。

12、1、对象方法v-bind:class="{'orange': isRipe, 'green': isNotRipe}"2、数组方法v-bind:class="[class1, class2]"3、行内v-bind: 1、router-link标签会渲染为标签，咋填template中的跳转都是这种；2、另一种是编辑式导航，也就是通过js跳转比如router.push('/home')M- model ，model 表示数据模型，也可以在model中定义数据修改和操作的业务逻辑V- view，view表示视图，它负责将数据模型转换为视图展示出来VM- viewmodel，viewmodel是一个同步view和model的对象，连接view和model，用于监听数据模型的改变和控制视图行为computed：computed是计算属性，也就是计算值，更多用于计算值的场景。

13、它具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算。

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

15、它不具有缓存性，页面重新渲染时值不会变化也不会执行。

16、在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的，但是也得慎用，样式不易改变。

本文到这结束，希望上面文章对大家有所帮助。