Vue面试题知识点汇总：双向数据绑定原理和Watcher机制

Vue面试题知识点汇总 以下是对给定文件的知识点解析： **1. Vue的基本原理** Vue实例创建时，Vue会遍历data中的属性，并使用Object.defineProperty（vue3.0使用proxy）将它们转为getter/setter，并在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。 **2. 双向数据绑定的原理** Vue.js是采用的数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几个步骤： * 需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化 * compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图 * Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是：①在自身实例化时往属性订阅器(dep)里面添加自己②自身必须有一个update()方法③待属性变动dep.notice()通知时，能调用的自身的update()方法，并触发Compile中绑定的回调，则功成身退。 **3. MVVM作为数据绑定的入口** MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自身的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化->视图更新；视图交互变化(input)->数据model变化的双向绑定效果。 **4. 使用Object.defineProperty()的缺点** 使用Object.defineProperty()来进行数据劫持有什么缺点？在对一些属性进行操作时，使 用这种方法无法拦截，例如通过下标方式修改数组数据或者给对象新增属性，这都不能触发组件的重新渲染，因为Object.defineProperty不能拦截到这些操作。