vue面试题（01）

1.v-show 与 v-if区别

实现本质：

v-show: 通过display: none 和 display: block 之间切换。
v-if: 通过DOM节点的插入，删除来实现切换。

性能对比：

v-if:

• 切换时需要删除、插入节点开销大
• 但是在初始化的时候，如果条件false是不会插入节点渲染的会节约性能
• 总结：如果不是频繁切换只需要，渲染时条件渲染用v-if

v-show：

• 有更高的初始渲染开销。就算是false 也会渲染。
• 但是在切换的时候只是改变样式，消耗少。
• 总结：在频繁切换的时候用v-show。

2.[方法调用，computed，watch的区别]

method：
页面数据每次重新渲染都会重新执行，性能消耗大，除非不希望有缓存的时候用。就是一旦页面重新渲染，所有需要在渲染时调用的方法都会重新调用。

computed：
是计算属性，依赖其他的属性计算值，并且computed 的值有缓存，只有在当前计算值变化才会返回内容。就是当依赖性数值变化时，才重新执行。

watch：
监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。

总结：
除非不希望缓存，一般都不会用方法。
一般来说需要依赖的属性来动态获得值的时候可以使用computed。
对于监听到值的变化需要做异步操作或开销较大的操作时用watch。

3.生命周期函数

4.keep-alive组件有什么作用

如果你需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。

对于 keep-alive 组件来说，它拥有两个独有的生命周期钩子函数，分别为 activated 和 deactivated。

用keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数。

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例。

5.组件中data为什么不用对象

组件复用时所有组件都会共享 data 。如果 data 是对象的话，就会造成组件修改 data 以后会影响其他所有组件，所以需要将data 写成函数， 每次用到就调用一次函数获得新的数据。

当我们使用 new Vue（） 的方式时候，无论我们将 data 设置为对象还是函数都是可以的，因为 new VUe（） 的方式是生成一个根组件，该组件不会复用，也就不存在共享 data 的情况了。