• vue面试题(01)


    1.v-show 与 v-if区别

    实现本质:

    v-show: 通过display: nonedisplay: 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 组件来说,它拥有两个独有的生命周期钩子函数,分别为 activateddeactivated

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

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

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

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

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

  • 相关阅读:
    元素和容器, Model and View
    KeyboardHook in C#
    项目步骤
    对编程的思考
    Web开发中使用数据库的3种方式
    动态得到属性的名字
    WPF Databinding examples
    【SPOJ】220 Relevant Phrases of Annihilation
    【FOJ】2075 Substring
    【UVa】760 DNA Sequencing
  • 原文地址:https://www.cnblogs.com/jackson1/p/13894811.html
Copyright © 2020-2023  润新知