• 前端面试题:Vue


    1.v-show和v-if的区别

      v-show通过CSS的display控制显示和隐藏

      v-if组件是真正的渲染和销毁,而不是显示和隐藏

      频繁切换显示状态用v-show,否则用v-if

    2.为何在v-for中用key(不用会报错)

      必须用key,且不能是index和random

      diff算法中通过tag和key来判断是不是sameNode(相同节点)

      减少污染次数,提升渲染性能

    3.vue中生命周期

      挂载 beforeCreate created 并没有开始渲染,但vue的实例已经初始化完成了

            beforeMount  mounted 已经开始渲染

      更新 beforeUpdate updated

      销毁 beforeDestroy destroyed 解除绑定的自定义事件 setTimeOut定时任务等

      <父子组件>生命周期

      父created → 子created → 子mounted → 父mounted

      创建初始化Vue的实例是从外到内,渲染是从内到外(只有把子组件渲染完才是父组件)

      父beforeUpdate → 子beforeUpdate → 子updated → 父updated

    4.Vue组件如何通讯/参数传递

      父传子:props;  子传父:this.$emit

      自定义事件:event.$on绑定  event.$emit触发  event.$off解绑

      eventBus创建一个事件中心,相当于中转站,用它来传递事件和接收事件。

      大项目:Vuex

      * 自定义事件要及时在beforeDestroy()中销毁,否则可能造成内存泄漏

    5.双向数据绑定v-model的实现原理

      采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()实现

      一般v-model放在input中,input元素的value=this.name(变量data)

      绑定input事件 this.name = $event.target.value(赋值给this.name)

      data更新会触发re-render

    6.Computed有何特点

      计算结果会被缓存,data不变就不会重新计算;提高性能

    7.ajax请求应放在哪个声明周期

      mounted中,在数组渲染完成之后

      因为JS是单线程,ajax是异步获取数据,放在眸之前没什么用,只会让逻辑更混乱

    8.如何将组件所有的props传递给子组件

      $props <User v-bind=“$props”/>

      * 组件中所有的属性不分大小 不分多少时使用

    9.多个组件有相同逻辑如何抽离

      用mixin

      但有缺点:①变量来源不能明,不利于阅读

                   ②多个mixin可能会造成命名冲突

                  ③mixin和组件可能会出现多对多关系,复杂性较高

    10.何时使用异步组件?

      ①加载大组件时 ②路由异步加载时 组件名: () => import(‘../路径’) 在components中引入

    11.何时需要使用keep-alive

      缓存组件,不需要重复渲染时 如多个静态Tab页切换

    12.何时需要使用beforeDestroy(不用的话可能会造成内存泄漏)

      ①解绑自定义事件 event.$off   ②消除定时器

      ③解绑自定义的DOM事件 如window.scroll等

    13.Vuex中action和mutation有何区别

      action中处理异步,mutation不可以

      mutation做原子操作

      action可以整合多个mutation的集合

    14.如何配置vue-router异步加载

    1 router:[
    2     {
    3         Path:’/’,
    4         Component: () => import (‘../路径’)     
    5     }
    6 ] 

    15.监听data的核心API是什么(vue3.0启用proxy,但有兼容性问题)

      Object.defineProperty

      有缺点: ①无法监听数组变化,需要特殊处理

                ②深度监听需要递归到底,一次性计算量大

                ③无法监听新增属性/删除属性 (vue.set  ver.delete)

    16.Vue为何是异步渲染,$nextTick有什么用

      异步渲染(以及合并data修改)以提高渲染性能

      $nextTick在Dom更新后 触发回调,以获取最新的Dom节点(因为data改变后,Dom不会立刻渲染)

    17.Vue常见性能优化方式

      合理使用v-show v-if keep-alive

      合理使用computed

      v-for时加key,以避免和v-if同时使用

      自定义事件 Dom事件,要及时在beforeDestroy()中销毁,否则可能造成内存泄漏

      合理使用异步组件

     

  • 相关阅读:
    关于JDK中自带的类加载器
    关于Spring框架
    关于Java JUC
    数据库-数据添加与删除-视图-索引-存储过程
    数据库-查询练习
    数据库-数据类型-数据库创建表的 约束以及 DDL操作
    数据库-多表连接查询
    数据库笔记整理-数据库概述-三大范式及数据库基本命令
    JAVA笔记整理-JAVA网络编程-TCP/UDP传输
    JAVA笔记整理-线程二
  • 原文地址:https://www.cnblogs.com/guisenbin/p/12339724.html
Copyright © 2020-2023  润新知