Vue前端面试题及详细答案（真实面试版）.docxVIP

Vue前端面试题及详细答案（真实面试版）

一、Vue基础核心题（初级必问）

1、说说你对Vue双向数据绑定的理解？原理是什么？

参考答案：

Vue双向绑定就是数据变视图自动更新，视图变数据自动更新，核心是数据劫持+发布订阅模式。

Vue2核心用的是Object.defineProperty()，对data里的所有属性进行劫持，拦截属性的读取（getter）和修改（setter）。

流程简单说：

1.页面渲染时，组件读取data数据，触发getter，把当前组件的Watcher收集到依赖里；

2.当数据被修改，触发setter，Dep会通知收集到的所有Watcher；

3.Watcher触发视图更新，完成数据到视图的同步；

4.视图层面，v-model本质是value属性绑定+input事件监听，用户输入触发事件更新数据，实现视图到数据同步。

Vue3换成了Proxy，因为defineProperty有缺陷：只能监听已有属性，新增、删除属性、数组下标修改监听不到，需要手动$set，而Proxy可以监听对象整体、新增属性、数组变化，更全面。

2、v-model的实现原理？修饰符.lazy.number.trim作用

参考答案：

v-model是语法糖，本质就是:value绑定属性+@input