vue 面试题 2019

爱被打了一巴掌 2023-05-30 08:59 48阅读 0赞

### vue核心知识点 ###

1、对于Vue是一套渐进式框架的理解

渐进式代表的含义是：主张最少。

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和 [设计模式][Link 1]的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。 渐进式的含义，我的理解是：没有多做职责之外的事。

2、vue.js的两个核心是什么？

数据驱动和组件化

3、请问 `v-if` 和 `v-show` 有什么区别？

相同点： 两者都是在判断DOM节点是否要显示

不同点：

a.实现方式： v\-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。 v\-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。

b.编译过程：v\-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； v\-show只是简单的基于css切换；

c.编译条件：v\-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译； v\-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；

d.性能消耗：v\-if有更高的切换消耗，不适合做频繁的切换； v\-show有更高的初始渲染消耗，适合做频繁的额切换；

4、vue常用的修饰符

a、按键修饰符

如：.delete（捕获“删除”和”退格“键） 用法上和事件修饰符一样，挂载在v-on:后面，语法：`v-on:keyup.xxx=’yyy’``<input class = 'aaa' v-model="inputValue" @keyup.delete="onKey"/>`

b、系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器

*  .ctrl
 *  .alt
 *  .shift
 *  .meta

c、鼠标按钮修饰符

*  .left
 *  .right
 *  .middle  
    这些修饰符会限制处理函数仅响应特定的鼠标按钮。如：`<button @click.middle ="onClick">A</button>`鼠标滚轮单击触发 *Click默认是鼠标左键单击*

d、其他修饰符

*  .lazy  
    在默认情况下，`v-model` 在每次 `input` 事件触发后将输入框的值与数据进行同步 ，我们可以添加 `lazy` 修饰符，从而转变为使用 `change`事件进行同步：

<input v-model.lazy="msg" >

*  .number  
    如果想自动将用户的输入值转为数值类型，可以给 `v-model` 添加 `.number`修饰符：

这通常很有用，因为即使在`type="number"`时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 `parseFloat()`解析，则会返回原始的值。

*  .trim  
    如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

![www.wityx.com][]

同样前面都有空格加上.trim后 将前后空格都去掉了

5、v-on可以监听多个方法吗？

可以

6、vue中 `key` 值的作用

使用key来给每个节点做一个唯一标识

**key的作用主要是为了高效的更新虚拟DOM**。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，

否则vue只会替换其内部属性而不会触发过渡效果。

7、Vue 组件中 data 为什么必须是函数

在 `new Vue()` 中，`data` 是可以作为一个对象进行操作的，然而在 `component` 中，`data` 只能以函数的形式存在，不能直接将对象赋值给它。

当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的

8、v-for 与 v-if 的优先级

v-for的优先级比v-if高

9、vue中子组件调用父组件的方法

参考： [https://www.cnblogs.com/jin-zhe/p/9523782.html][https_www.cnblogs.com_jin-zhe_p_9523782.html]

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

第二种方法是在子组件里用`$emit`向父组件触发一个事件，父组件监听这个事件就行了。

第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法

10、vue生命周期钩子函数有哪些？

参考： [https://www.jianshu.com/p/8b7373362b4c][https_www.jianshu.com_p_8b7373362b4c]

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后

在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。

在created阶段，vue实例的数据对象data有了，$el还没有。

载入前/后

在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。

在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后

当data变化时，会触发beforeUpdate和updated方法。

销毁前/后

在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

11、说出至少 4 种 vue 当中的指令和它的用法

v-if(判断是否隐藏)、v-for(把数据遍历出来)、v-bind(绑定属性)、v-model(实现双向绑定)

12、vue 的双向绑定的原理是什么

参考：[https://www.cnblogs.com/libin-1/p/6893712.html][https_www.cnblogs.com_libin-1_p_6893712.html]

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。

还有其他vue相关 [面试题][Link 2]参考：

[https://blog.csdn.net/liangjielaoshi/article/details/84064095][https_blog.csdn.net_liangjielaoshi_article_details_84064095]

[https://segmentfault.com/a/1190000016351284][https_segmentfault.com_a_1190000016351284]

##  ##

[Link 1]: http://www.wityx.com/post/240_1_1.html
[www.wityx.com]: 
[https_www.cnblogs.com_jin-zhe_p_9523782.html]: https://www.cnblogs.com/jin-zhe/p/9523782.html
[https_www.jianshu.com_p_8b7373362b4c]: https://www.jianshu.com/p/8b7373362b4c
[https_www.cnblogs.com_libin-1_p_6893712.html]: https://www.cnblogs.com/libin-1/p/6893712.html
[Link 2]: http://www.wityx.com
[https_blog.csdn.net_liangjielaoshi_article_details_84064095]: https://blog.csdn.net/liangjielaoshi/article/details/84064095
[https_segmentfault.com_a_1190000016351284]: https://segmentfault.com/a/1190000016351284