1.MVVM的概念MVVM是Model-View-ViewModel的缩写。MVVM是一种设计理念。模型层代表数据模型;View代表UI组件;ViewModel是连接View和Model的桥梁。MVVM架构下,View和Model没有直接联系,而是通过ViewModel进行交互,所以View和Model的交互是双向的,所以View数据的变化会同步到Model,而Model数据的变化也会立即发生变化反映在视图上。ViewModel通过双向数据绑定连接View层和Model层,View和Model之间的同步是完全自动的,不需要人为干预,所以开发者只需要关注业务逻辑,不需要手动操作DOM。需要注意数据状态的同步,复杂数据状态的维护完全由MVVM管理。MVVM框架理解及其原理实现2.生命周期的概念一个Vue实例从创建到销毁的过程就是生命周期。即从开始创建、初始化数据、编译模板、挂载DOM->render、update->render、unload等一系列过程,我们称之为Vue的生命周期。vue生命周期详解3.computed和watch有什么区别和应用场景?computed和computed属性的区别:依赖于其他属性值,而computed是惰性求值,只有它依赖的属性值发生变化,下次拿到computed的值才会重新计算computed的值。watchlistener:更多的是一个“观察”的功能,没有缓存,类似于一些数据的监听回调,每当监听到的数据发生变化时,就会执行回调进行后续操作。应用场景:当我们需要进行数值计算,依赖其他数据时,应该使用computed,因为可以利用computed的缓存特性,避免每次取到一个值都重新计算。当我们需要在数据变化时执行异步或昂贵的操作时,应该使用watch。使用watch选项允许我们执行异步操作(访问API),限制我们的操作频率,并在我们获得最终结果之前设置中间状态。这些是计算属性不能做的事情。4、vue中的key有什么用?关键是每个vnode的唯一ID。根据密钥的不同,我们的diff操作可以更准确、更快。Vue2.0v-for中的:key有什么用?5.说说nextTick异步更新队列的原理可能你没有注意到Vue在更新DOM时是异步执行的。只要检测到数据变化,Vue就会打开一个队列,缓冲所有发生在同一个事件循环中的数据变化。如果同一个观察者被多次触发,它只会被推入队列一次。这种缓冲时的重复数据删除对于避免不必要的计算和DOM操作非常重要。然后,在下一个事件循环“tick”中,Vue刷新队列并执行实际(去重)工作。Vue内部尝试使用原生的Promise.then、MutationObserver和setImmediate来实现异步队列。如果执行环境不支持,它将使用setTimeout(fn,0)代替。在vue2.5的源码中,macrotask降级的方案是:setImmediate,MessageChannel,setTimeoutvue的nextTick方法的实现原理:vue由于优先级高,使用异步队列控制DOM更新,nextTick回调依次执行microtaskfeature,可以保证队列中的microtasks在一个eventcycle之前执行。考虑到兼容性问题,Vue做了从microtask到macrotask的降级方案6.为什么Vue组件数据一定要是函数?因为组件是可复用的,JS中的对象是引用关系,如果组件数据是一个对象,那么子组件中的数据属性值会互相污染,产生副作用。所以一个组件的数据选项必须是一个函数,这样每个实例都可以维护一个返回对象的独立副本。newVue的实例不会被复用,所以不存在上面的问题。7.v-if和v-show有什么区别?v-show只控制元素的显示方式,在block和none之间切换display属性;而v-if控制着这个DOM节点的存在与否。当我们需要频繁切换某个元素的显示/隐藏时,使用v-show会节省更多的性能开销;当我们只需要显示或隐藏一次时,使用v-if更合理。8、delete和Vue.delete删除数组的区别在于删除的元素变为空/未定义,其他元素的键值不变。vue.delete直接删除数组,改变数组的键值。vara=[1,2,3,4]varb=[1,2,3,4]deletea[1]console.log(a)this.$delete(b,1)console.log(b)9、Vue中data中的object属性添加新的属性会发生什么,如何解决?点击按钮,会发现obj.b已经添加成功,但是视图hasnotbeenrefreshed:原因在创建Vue实例时,没有声明obj.b,所以没有被Vue转化为响应式属性,自然不会触发视图的更新。这时候就需要用到Vue的全局api$set():addObjB(){//this.obj.b='obj.b'this.$set(this.obj,'b','obj.b')console.log(this.obj)}$set()方法是等价的如果你手动将obj.b处理成响应式属性,view会相应改变:10.vue.js的两大核心是什么?数据驱动,组件系统。11、vue如何变异数组方法?简单的说,Vue通过原型拦截重写了数组的7个方法。首先,它获取数组的ob,也就是它的Observer对象。如果有新的Value,调用observeArray监听新的value,然后手动调用notify,通知renderwatcher,执行update12。v-modelis:syntacticsugarofvalue@input13.如何理解组件通信中出现的单向数据流的概念。父组件通过prop给子组件传递数据,但是这个prop只能被父组件修改,子组件不能修改,否则会报错。子组件要修改时,只能通过$emit发送自定义事件,父组件收到后修改。14、vue中不建议同时使用v-if和v-for。这个坑v-for的优先级高于v-if,所以如果使用的话,每次v-for都会执行v-if,造成不必要的计算,影响Performance,所以我们可以选择使用computed来过滤items不需要显示在列表中。15.@click="function"和@click="function()"有什么区别总结就是括号会间接触发,所以不带括号是不会有事件传递的,如果有则有事件传递不使用括号。括号如果你还想要事件,你需要在括号中手动添加$eventvue。用单个元素绑定多个事件,比如点击绑定多个事件。方法十六、组件间通信vue组件间通信的六种方式(完整版)十七、性能尽可能优化减少data中的数据,data中的数据会增加getter和setterv-if和v-for不能一起使用如果需要使用v-for给每个元素绑定事件,使用事件代理
//vuemeths(e){if(e.target.nodeName.toLowerCase()==='li'){控制台.log(e.target.dataset.index)}}问题94:Vue在v-for时给每个元素绑定事件需要使用事件代理吗?为什么?SPA页面使用keep-alive缓存组件合理使用v-if和v-showkey保证唯一路由懒加载,异步组件防抖,节流第三方模块按需导入长列表滚动到可见区域动态加载图片懒加载揭示了Vue.js的九种性能优化技术vue性能优化动态组件&异步组件vue-lazy-componentvue-lazy-render18。高阶组件函数接受组件作为参数并返回包装组件。Vue进阶必学的高级组件HOC技巧——VueMixins高级组件与VueHOC高级组件实践19.Vue的History模式和Hash模式的区别理解hash锚点跳转History浏览历史Vue的History模式的区别哈希模式了解历史和哈希,vue-router20。你的接口请求一般放在哪个生命周期?因为request是异步的,即使放在created也不会耗很长时间,所以个人更喜欢放在mounted,这样更清晰。.但是params会丢失参数。params和path不能共存,所以只能用nameparams来传递参数。需要在路由中配置path/:id这样才不会丢失参数。最重要的一点是params刷新会消失。..query不会,只要在路由中声明了params参数,它就不会消失。是在路由中声明的,跟query有什么区别,为什么不直接query,params不会出现在地址栏,这样更美观。在路由声明路径中添加参数(冒号加参数名),比如/article/:articleId/:articleType,这样你通过params传递的articleId和articleType就会在路由路径中。$router是路由对象,是只写对象。$route为当前路由的信息对象,为只读对象。vue路由传递参数的四种方式vue路由传递参数的三种基本方式22.Vue事件绑定原理先说下原生事件绑定是通过addEventListener绑定到真实元素上,而组件事件绑定是通过Vue的自定义实现的$上。23、Vue中组件生命周期的调用顺序先说说组件的调用顺序是先父后子,渲染完成的顺序是先子后父。组件的销毁操作是先父后子,销毁顺序是先子后父。加载渲染进程parentbeforeCreate->parentcreated->parentbeforeMount->childbeforeCreate->childcreated->childbeforeMount->childmounted->parentmounted子组件更新流程parentbeforeUpdate->childbeforeUpdate->childupdated->parentupdatedDestructionprocessparentbeforeDestroy->childbeforeDestroy->childdestroyed->parentdestroyed以上是从别人文章里搜集的一些个人觉得还不错的面试题,以后会继续更新。