VUE 面试题

VUE 面试题

整理 VUE 相关的常见面试题

介绍一下 VUE

介绍一下 VUEX

VUE 2.X 和 3.0 的区别

(1)数据监听方式变化

VUE 2.X 使用 ES5 的 Object.defineProperty()get()set(newValue) 实现,VUE 3.0 基于 Proxy 监听实现,同时更为强大:

  • 可以检测属性的新增和删除
  • 可以检测数组索引的变化和 length 的变化
  • 支持 Map、Set、WeakMap 和 WeakSet

优点:速度加倍,内存占用减半。

(2)体积更小

支持 Tree Shaking,内置组件、内置指令按需引入

(3)速度更快

参考:vue3.0和vue2.x的区别Vue 3.0 和 Vue 2.0的对比以及Vue 2.0精讲以及Vue全家桶精讲

VUE 的生命周期

VUE 生命周期

VUE 数据双向绑定原理

双向绑定

VUE 采用发布者-订阅者模式的方式来实现双向绑定。

(1)视图更新数据

input 标签监听 input 事件即可。

(2)数据更新视图

Object.defineProperty() 监听数据变化,通过消息订阅器发布消息,订阅者收到消息执行相应的操纵 DOM 的函数,从而更新视图。

VUE 的路由机制

  • hash 和 history 区别

v-if 和 v-show 的区别

  • v-show:无论值是 true 还是 false,元素都会存在于 HTML 代码中。
  • v-if:只有值为 true 的时候,元素才会存在于 HTML 代码中。

VUE 组件通信方式

  • 引申:如果有多层的父子组件,用什么通信

VUE 的 v-for 中的 key 的作用

一句话回答:为了高效的更新虚拟 DOM

nextTick 原理与应用场景

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

//改变数据
vm.message = 'changed'

//想要立即使用更新后的DOM。这样不行,因为设置message后DOM还没有更新
console.log(vm.$el.textContent) // 并不会得到'changed'

//这样可以,nextTick里面的代码会在DOM更新后执行
Vue.nextTick(function(){
    console.log(vm.$el.textContent) //可以得到'changed'
})

更新数据

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

参考:Vue.nextTick 的原理和用途

VUE 的虚拟 DOM

  • VUE 是如何实现 VDOM 的
  • vue中keep-alive缓存的真实结点还是虚拟结点
  • vue改变组件的key值, 原来的组件会被销毁么
  • 为什么要用虚拟结点
  • diff 原理

vue 从 data 改变到页面渲染的过程

参考