初级vue面试题

用户4089131117621
129 阅读4分钟

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

  • v-if每次切换都是从dom树上移除和重建
  • v-show隐藏是是style=display:none,适用于频繁切换的场景

2.v-for中key的作用

  • vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去
  • 提升渲染效率
  • 在开发中有id用id没id用索引

3.vue中data为什么是function

  • data为函数，通过return 返回对象的拷贝，致使每个实例都有自己独立的对象，实例之间可以互不影响的改变data属性值。 如果data值为对象，对象是引用类型,将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

4.vue中双向绑定的原理

数据层（Mode),视图层（View）,业务逻辑层（ViewModel）--它负责将数据与视图关联起来 简称mvvm

  • 数据变化后更新视图
  • 视图变化后更新数据

5.keep-alive的作用和keep-alive声明的组件的生命周期

  • -keep-alive作用: keep-alive包裹的组件,不会因为频繁切换一直销毁再创建,而是从换从中取出来,没有重新去创建新组件但同时也有不好的地方，就是当组件里面包含大量的内容的时候会占用更多的内存空间，keep-alive相当于是空间换时间的做法。
  • keep-alive声明周期:当引入keep-live的时候,页面第一次进入,钩子的触发顺序created->mounted->actived,退出时触发deactived.当再次进入或者后时,只触发actived activated是激活状态,deactivated是失去激活状态

6.Vue生命周期,以及生命周期都了什么事情

    • vue生命周期分为四个阶段8个方法
  • 初始化之前beforeCreated -> 初始化之后(created)--创建之后也可以发起Ajax请求获取数据,可以访问到data里面的数据,beforeCreated 拿不到data里面的数据
  • 挂载之前beforeMounted -> 挂载之后(mounted)--挂载之前获取不到真实的dom,挂载之后可以获取真实的dom.beforeMounted拿不到挂载真实dom返回null
  • 更新之前beforeUpdated -> 更新之后(updated)--更新之后,当data里数据改变,会触发beforeUpdated,updated钩子函数,在updated钩子函数里可以拿到更新之后的数据,beforeUpdated钩子函数里拿不到更新之后的数据,更新之后又会重新挂载到dom上
  • 销毁之前beforeDestroy -> 销毁之后(destroyed)--销毁之前,beforeDestroy钩子函数里,移除数据监视器,子组件和事件侦听器,此时再改变数据页面又不会更新了

7.Vue什么时候操作dom比较合适?操作时发现的有的组件获取不到真实的dom怎么办?

  • vue在挂载之后比较适合操作dom,
  • 操作时获取不到真实的dom:可以使用$nextText函数,获取获取到更新之后的dom

8.发送网络请求在哪个函数中?

  • 发送网络请求在credted()函数中

9.vue组件键传值有哪些方式

  • 有三种方式:
  • 父向子传值:子组件通过props属性来接收父组件传过来的值,props可以是数组来定义变量来接收,也可以是对象,来定义父组件传过来数据对象的类型,或是否必传
  • 子向父传值:在父组件中定义自定义事件,在子组件中通过$emit来触发父组件中的自定义事件,触发时可以传递值
  • 兄弟间传值:通过enventBus实现兄弟组件传值.eventBus.emit("事件名",值)触发事件,eventBus.emit("事件名",值)触发事件,eventBus.on("事件名",函数体)接收组件的值

10.Vue中改变数组内索引的值,数据不更新,如何处理

  • this.$set(参数一,参数二,参数三)
  • 参数一:要更新那个目标(那个数组或对象)
  • 参数二:更新位置的索引
  • 参数三:要更新的值

11.Vuex

  • Vuex可以实现数据的共享,完成非关系型组件的数据传递
  • State:用来存储变量,要修改state里面的数据需要通过mutarions
  • Mutations:通过commit触发mutatios里面的函数修改state的值,是同步代码
  • Actions:处理异步代码,比如Ajax请求,得到结果修改state的变量时也需要通过Mutations来修改

12.什么是_diff算法

  • 同一级开始比较新旧虚拟dom如果根元素变化,整个dom数删除重建
  • 根元素不改变,根元素的某一个属性发生改变更新新属性
  • 根元素和根元素属性没有改变,根元素的字标签或内容改变时,采用就地更新

13.防抖逻辑

减少函数触发的频率,每次都以最后一次触发开始计时来调用指定的函数,调用函数之前要先清空上一次的定时器

14.路由守卫

在路由跳转之前先去判断一下

router.beforeRouteEnter (to, from, next){
to:要跳转到哪里
from:从哪里来的
next:是否让跳转
next(false)不让跳转
next(true)让跳转
next('/login')修改要跳转的路由地址
next(path:'/路径',params:{},query:{})
}
avatar
文章
阅读
粉丝