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 的情况了。