vue面试题完整详细.pdf

vue⾯试题 1. Vue 的最⼤的优势是什么？ 简化：Vue的最⼤的优势有以下⼏点;组件化开发，双向数据绑定，基于虚拟DOM，单页⾯应⽤，轻量级，⽣态丰富 2. Vue和jQuery两者之间的区别是什么 jQuery： 曾经是前端最流⾏的js库。 Vue： 是⼀个轻量级框架，是⼀个精简的MVVM。从技术⾓度讲。Vue.js专注于MVVM模型的ViewModel层，它通过双向数据绑定把 view和Model层连接起来，通过对数据的操作完成对页⾯视图的渲染。 ⼆者的区别是： ⼀、Vue 和 jQuery 对⽐ jquery是使⽤选择器（）选取DOM对象，对其进⾏赋值、取值、事件绑定等操作，和原⽣的HTML的区别只在于 可以更⽅便的选取和操作DOM对象，⽽数据和界⾯是在⼀起的。 ⼆、Vue 则是通过Vue对象将数据和View完全分离开来了。对数据进⾏操作不再需要引⽤相应的 DOM 对象，他们通过 Vue 对象这个 vm 实现相互的绑定。这就是传说中的 MVVM。 3.mvvm 和 mvc 区别是什么？哪些场景适合? mvc和mvvm都是⼀种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中⼤量的DOM 操作使 页⾯渲染性能降低，加载速度变慢，影响⽤户体验。 区别 :数据驱动，通过数据来显⽰视图层⽽不是节点操作。 4.Vue 数据双向绑定的原理是什么? （必会） vue数据双向绑定是通过数据劫持结合发布者-订阅者模式来实现的，具体来说主要有两 点： 1.通过object.defineproperty这个api在vue实例上添加属性,当我们修改数据时,就会触发相应的setter⾥⾯的回调函数,来实现页⾯的更新 2.使⽤观察者模式设计，实现了指令和数据的依赖关系，以及触发更新 建议 ：*Vue.js 是采⽤数据劫持结合发布者-订阅者模式的⽅式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据 变动时 发布消息给订阅者，触发相应的监听回调。** 5.object.defineproperty与proxy的区别? 共同点:都可以访问与修改⼀个对象上的属性 区别:1.Proxy 可以直接监听对象⽽⾮属性；2.Proxy 可以直接监听数组的变化 ；3.Proxy 有多达 13 种拦截⽅法 4.Proxy 返回的是⼀个新对象,我们可以只操作新的对象达到⽬的,⽽ Object.defineProperty 只能遍历对象属性直接修改； 这些都是 Object.defineProperty不具备的；但是Object.defineProperty的兼容性较好,Proxy 的存在浏览器兼容性问题 Object.defineProperty的 优势如下: 兼容性好,proxy有兼容性问题,也⽆法⽤ployfill磨平 6.Vue ⽣命周期总共分为⼏个阶段？(必会) Vue 实例从创建到销毁的过程，就是⽣命周期 常⽤的有8种: 1 ） beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配 置之前被调⽤。 2 ） created 在实例创建完成后被⽴即调⽤。在这⼀步，实例已完成以下的配置：数据观测 (data observer)， 属性和⽅法的运 算，watch/event 事件回调。然⽽，挂 载阶段还没开始，$el 属性⽬前不可见。 3 ） beforeMount 在挂载开始之前被调⽤：相关的 render 函数⾸次被调⽤。 4 ） mounted el 被新创建的 vm.$el 替换，并挂载到实例 上去之后调⽤该钩⼦。如果 root 实例挂载了⼀个⽂档内元素，当 mounted 被调⽤时 vm.$el 也在⽂档内。 5 ） beforeUpdate 数据更新时调⽤，发⽣在虚拟 DOM 打补丁之前。这⾥适合在更新之前访问 现有的 DOM，⽐如⼿动移除已添加的事 件监听器。该钩⼦在服务器端渲染期间不 被调⽤，因为只有初次渲染会在服务端进⾏。 6 ） updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调⽤该钩⼦。 7 ） beforeDestroy 实例销毁之前调⽤。在这⼀步，实例仍然完全可⽤。该钩⼦在服务器端渲染 期间不被调⽤。 8 ） destroyed Vue 实例销毁后调⽤。调⽤后，Vue 实例指⽰的所有东西都会解绑定，所有 的事件监听器会被移除，所有的⼦实例也会 被销毁