zoukankan      html  css  js  c++  java
  • 前端面试题整理——VUE相关题目与回答

    1、v-if与v-show的区别?

    v-if的原理是根据判断条件来动态的进行增删DOM元素,

    v-show是根据判断条件来动态的进行显示和隐藏元素,频繁的进行增删DOM操作会影响页面加载速度和性能所以此时使用v-show更合理。

    只有v-if能和v-else连用进行分支判断,v-show是不能和v-else连用的。

    2、生命周期有哪些?分别表示意义是什么?

    beforeCreate():在实例生成之前

    created():在实例生成之后

    beforeMount():在模板已经被编译成函数之后,组件内容被渲染到页面之前

    mounted():在组件内容被渲染到页面之后

    beforeUpdate():当data中的数据发生变化时

    updated():当data中的数据完成变化,同时页面完成更新后

    VUE2:beforeDestroy()/VUE3:beforeUnmount():当Vue应用失效时

    VUE2:Destroyed()/VUE3:unmounted():当Vue应用失效时,且dom完全销毁之后

    3、nextTick的用途?

    官方文档解释:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

    应用场景:需要在视图更新之后,基于新的视图进行操作。

    原因是Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。

    官方提示:注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted。

    4、key的作用?

    key的作用主要是为了高效的更新虚拟DOM。

    另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们。

    5、组件通信有哪些方式?

    组件通信方式有8种:

    1、props / $emit

    2、$children / $parent

    3、provide / inject

    4、ref / refs

    5、eventBus

    6、Vuex

    7、localStorage / sessionStorage

    8、$attrs / $listenes

    通信形式可归类为两类:父子组件之间的通信、非父子之间的通信(兄弟组件,隔代关系组件)

    父子组件通信方式可用:1、2、3、4、8

    兄弟组件通信方式可用:5、6

    跨级组件通信可用:3、5、6、8

    6、单页应用有哪些优缺点?

    优点:
    1、具有桌面应用的即时性、网站的可移植性和可访问性。
    2、用户体验好、快,内容的改变不需要重新加载整个页面,web应用更具响应性和更令人着迷。
    3、基于上面一点,SPA相对对服务器压力小。
    4、良好的前后端分离。SPA和RESTful架构一起使用,后端不再负责模板渲染、输出页面工作,web前端和各种移动终端地位对等,后端API通用化。
    5、对前端人员javascript技能要求更高,促使团队技能提升。
    缺点:
    1、分功能模块的鉴权不好实现。
    2、不利于SEO。
    3、初次加载耗时相对增多。
    4、导航不可用,如果一定要导航需要自行实现前进、后退。
    5、对开发人员技能水平、开发成本高。

    7、watch、computed有什么区别?

    watch:

    不支持缓存

    支持异步

    只可以设置一个函数,可以带有两个参数

    监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作

    不仅可以监听data中的数据,还可以监听路由的变化,

    同时,在对于操作比较耗时的操作也是可以使用 watch 监听。例如用户注册时,检测账号是否可用。

    watch对于引用类型是拿不到oldVal值,如果要深度监听需要添加deep:true属性。

    computed:

    支持数据的缓存。

    函数内部的数据改变也会触发。

    不支持异步,当computed内部有异步操作时computed无效

    如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,一般用computed

    computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

    8、路由模式有哪些?区别是什么?

    有两种模式:hash哈希模式、history模式

    hash哈希模式:#值后面哈希发生变化,不会导致浏览器向服务器发送请求,也就不会发生刷新页面。

    history模式:则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理,则会返回404错误

    9、vuex有哪些基本概念?

    state:用于数据的存储,是store中的唯一数据源

    getters:如vue中的计算属性一样,基于state数据的二次包装,常用于数据的筛选和多个数据的相关性计算

    mutations:类似函数,改变state数据的唯一途径,且不能用于处理异步事件

    actions:类似于mutation,用于提交mutation来改变状态,而不直接变更状态,可以包含任意异步操作

    modules:类似于命名空间,用于项目中将各个模块的状态分开定义和操作,便于维护

    10、$router与$route的区别

    1. $route从当前router跳转对象里面可以获取name、path、query、params等(<router-link>传的参数由 this.$route.query或者 this.$route.params 接收)

    2. $router为VueRouter实例。想要导航到不同URL,则使用$router.push方法;返回上一个history也是使用$router.go方法

    放弃安逸,持续努力——成长
  • 相关阅读:
    Hibernate
    Mysql
    JavaWeb
    Springboot
    spring MVC
    spring
    mybatis学习
    ftp客户端封装
    win10子系统 wsl开机启动ssh服务
    eclipse 终于官方支持代码模糊提示了
  • 原文地址:https://www.cnblogs.com/MarsPGY/p/14852894.html
Copyright © 2011-2022 走看看