Vue 2021面试题及详细答案.docxVIP

Vue2021面试题及详细答案

一、基础必考题（高频，几乎所有公司都会问）

1.请说说Vue的响应式原理，2021年实际开发中，你遇到过响应式失效的情况吗？怎么解决的？

答案：Vue2的响应式核心是“数据劫持+发布-订阅模式”，底层用Object.defineProperty()遍历data里的所有属性，给每个属性设置getter和setter：

1.初始化时，Vue会对data中的数据进行递归遍历，给每个属性绑定getter（用于依赖收集）和setter（用于数据更新时触发视图更新）；

2.当组件渲染时，会触发模板中使用的属性的getter，把当前组件的Watcher（观察者）加入到该属性的依赖列表中；

3.当数据发生变化时，会触发setter，通知依赖列表中的所有Watcher，进而触发组件重新渲染，更新视图。

实际开发中遇到过响应式失效，常见两种情况及解决方法（2021年开发中最常遇到）：

①给data中未声明的属性赋值（比如data里没定义obj，直接this.obj={name:xxx}），因为初始化时Object.defineProperty没监听这个属性，所以响应式失效。解决：要么提前在data中声明obj:{}，要么用Vue.set(this.obj,name,xxx)（或this.$set）手动添加响应式属性；

②数组直接通过索引修改元