前端面试：关注Vue.js常见问题及解答，高手Vue基本过关

v-show和v-if区别第一题应该是最简单的。好紧张，因为用过Vue.js的人都知道v-show和v-if的区别，不然就没什么好说的了。不过这是最简单的问题，一共有三个层次，我会一一问的。首先，基本上大家都会说：最后，如果你自学遇到困难，想找个前端学习环境，可以加入我们的前端学习圈，点我加入，会省很多的时间，减少了很多学习中遇到的问题。v-show只是显示之间的切换：无；并显示：块；在CSS级别，而v-if决定是否选择代码块的内容（或组件）。回答完这些，你已经可以打50分了，然后我再问，什么时候用v-show，什么时候用v-if？有的人在这里会比较犹豫，也许他们知道，但是就是表达不出来。我的首选答案是：频繁操作用v-show，一次性渲染用v-if，只要意思正确即可。第二题能打80分，最后一题很少有人能答对：你在使用v-if时对性能优化有什么体会？这是一个加分项，需要对Vue.js组件编译有一定的了解。先说一下预期的答案：因为当v-if="false"时，内部组件不会被渲染，所以当某些组件（或内容）在某些条件下渲染时，可以先将条件设置为false，当需要的（或者异步的，比如$nextTick）然后设置为true，这样其他重要的内容就可以优先渲染，可以合理的使用来优化性能。绑定类数组用法动态绑定类应该很熟悉，这也是最基本的，但是这个问题有点迷惑，绑定类数组的用法是什么？下面来看看最常用的绑定类是怎么写的：前端面试：关注Vue。在某些场景下，会用到数组，看一个例子：prefixCls},${prefixCls}-${this.type},{}];}}}}}}}}}}}}前端面试：关注Vue.js常见问题及解答，精通Vue，过关。从iViewButton组件的例子，可以看出在数组中，可以混合使用固定值和动态值（对象）。computedproperties和watches的区别在回答这个问题之前，你通常会想一下。很多人会跑题直接回答如何使用calculatedattributes和watches。这不计分，因为问题是关于差异，而不是用法。计算属性自动监视依赖值的变化，从而动态返回内容。监控是一个过程。当监听值发生变化时，可以触发回调，做一些事情。所以区别来自于用法。如果你只需要动态值，那么使用计算属性；如果需要了解值的变化并执行业务逻辑，可以使用watch。虽然反向或混合使用是可行的，但它们都是不正确的用法。这个问题引出了几个问题：当computed是一个对象时，它有哪些选项？计算和方法之间有什么区别？可以计算依赖于来自其他组件的数据吗？当watch是一个对象时，它有哪些选项？问题1，有两个选项get和set。问题2，methods是可以接受参数的method，但是computed不能；computed可以被缓存，但是methods不能；一般在v-for中，需要根据当前item动态绑定值时，只能使用methods，不能使用computed，因为computed不能传参。问题3，computed可以依赖其他computed，甚至是其他组件的数据。问题4，常用的配置有以下几种：handler执行的函数是否deep，事件修饰符是否立即执行。我会先写一段代码：content然后问：如何给这个Custom组件custom-component绑定一个原生的点击事件？一开始没问事件修饰符是什么，但是如果考生说，就已经错了，说明没有这个概念。这里@click是自定义事件点击，不是原生事件点击。绑定nativeclick是这样的：content这个问题会延伸很多，比如常见的事件修饰符有哪些？如果你能说.exact，说明你是一个热爱探索的人，会给你加分不少。.exact是Vue.js2.5.0中的新功能，它允许您控制由精确的系统修饰符组合触发的事件，例如：AA>A你可能还需要了解几个常用的事件修饰符：.stop.prevent.capture.self而且，当事件修饰符一起使用时，是有顺序的。为什么组件中的数据是一个函数？为什么组件中的数据必须是一个函数，然后返回一个对象，而在新的Vue实例中，数据可以直接是一个对象呢？因为组件是用来复用的，JS中的对象是引用关系，所以作用域是不隔离的，newVue的实例不会被复用，所以不存在引用对象的问题。keep-alive的理解是一道概念题，主要考察考生是否知道这个用法。简单的说就是缓存一个组件的编译。递归组件的要求要回答这个问题，首先您必须知道什么是递归组件。不到10%的人了解递归组件。其实在实际业务中用的并不多，多用于独立组件中。递归组件的要求是什么？主要有两个：为组件设置名称；有一个明确的结束条件。自定义组件的语法糖v-model是如何实现的？这里的v-model不是用在普通输入框上的v-model，而是用在自定义组件上。既然是语法糖，是可以还原的。先还原一下：前端面试：关注Vue。Vue通过了。在这个组件中，只有一个props，但是名字是value，里面有一个currentValue。当currentValue改变时，会触发自定义事件@input，返回currentValue的值。这是v-model的一个语法糖，要求props有一个item叫value，同时触发的自定义事件必须叫input。这样就可以在自定义组件上使用v-model了：Vuex中mutations和action的区别主要区别在于action可以异步执行。操作调用突变，突变修改商店。Render函数这是一道很难的题，因为很少有人会理解Vue.js的Render函数，因为基本不用。遇到这个问题，一般可以从这几个方面来回答：什么是Render函数，它的使用场景是什么。什么是创建元素？Render函数常用的参数有哪些？说到Render功能，就不得不说到虚拟DOM（VirtualDOM）。虚拟DOM不是真正的DOM，而是一个轻量级的JavaScript对象。当状态发生变化时，VirtualDOM将执行Diff操作以更新只需要替换DOM，而不是完全重绘。它的使用场景是为了充分发挥JavaScript的编程能力，有时需要结合JSX使用。createElement是Render函数的核心，它构成了VueVirtualDOM的模板，它有3个参数：前端面试：关注Vue。第二个参数的值太多了，得看Vue.js的文档。如何理解组件通信中出现的单向数据流的概念。父组件通过prop给子组件传递数据，但是这个prop只能被父组件修改，子组件不能修改，否则会报错。子组件要修改时，只能通过$emit发送自定义事件，父组件收到后修改。一般来说，对于子组件想要改变父组件状态的场景，有两种选择：在子组件的数据中复制一个prop，数据可以修改，prop不能：前端面试：关注Vue.js常见问题及解答，如果掌握了Vue的基础知识，就可以通过考试提一下v-model实现数据的双向绑定以及使用。同步。生命周期Vue.js生命周期主要有8个阶段：1.创建前/创建后（beforeCreate/created）：在beforeCreate阶段，挂载元素el和Vue实例的数据对象data都是undefined，还没有被创建初始化。在created阶段，vue实例的data对象数据可用，el还没有。2.加载前/加载后（beforeMount/mounted）：在beforeMount阶段，初始化了Vue实例的$el和data，但仍然是挂载前的虚拟DOM节点，数据没有被替换。挂载阶段，挂载Vue实例，数据渲染成功。3.更新前/更新后（beforeUpdate/updated）：当数据发生变化时，会触发beforeUpdate和updated方法。这两个不常用，不推荐。4.销毁前/销毁后（beforeDestroy/destroyed）：beforeDestroy在Vue实例被销毁之前触发。一般使用removeEventListener手动解绑事件。实例销毁后，触发destroyed。组件之间的通信问题看似简单，其实比较大。在回答的时候，可以分为几种场景：1.父子通信：parent通过props向child传递数据，child通过events（emit）向parent传递数据；通过父链和链也可以通信（parent/$children）；ref也可以访问组件实例；提供/注入API。2.兄弟通信：BusVuex3.跨层通信：Bus；浏览器；提供/注入API。除了常规的通信方式，最近文章中提到的dispatch/broadcast和findComponents系列方法也可以说。如果你能说出这些，说明你已经对Vue.js组件进行了深入的研究。路由跳转一般有两种方式：通过，将router-link标签渲染为标签，用于模板中的跳转；另一种是程序化导航，即通过JS跳转，如router.push('/home')。Vue.js2.x双向绑定原理这个问题几乎是面试必问的问题，答案也是有深有浅。基本上你要知道核心API就是通过Object.defineProperty()劫持每个属性的setter/getter，当数据发生变化时向订阅者发布消息，并触发相应的监听回调，这就是为什么Vue.js2.xdoesnotsupportIE8的原因（IE8不支持该API，无法通过polyfill实现）。什么是MVVM，与MVC有什么区别？MVVM模式源于经典的软件架构MVC。当View（视图层）发生变化时，会自动更新到ViewModel（视图模型），反之亦然。View和ViewModel之间的关系是通过双向绑定（data-binding）建立的。与MVC不同的是，它没有Controller层，而是演化成了ViewModel。ViewModel通过双向数据绑定连接View层和Model层，View和Model之间的同步由Vue.js完成。我们不需要手动操作DOM，只需要维护数据状态。感知事物由简单到复杂再到简单，技术是无止境的，接触的越多，感觉自己懂的越少。所谓敬畏，让我们互相鼓励吧！