ttizzyf
commented
1 year ago vue的响应式原理是通过数据劫持和订阅者-发布者模式的方法,通过object.defineprototype()来劫持各个数据的getter和setter,一旦数据发生变动,就会触发setter,并将消息发布给订阅者。 第一：通过递归遍历observe，给没一个数据添加上getter和setter，一旦数据发生改变，就会触发setter，这样一来就实现了对数据的监听 第二：通过compile解析模板，将模板转化为数据渲染到视图上，并且每个指令对应的节点添加上渲染函数，添加监听数据的订阅者，这样一来，数据改变，视图就会改变。 第三:通过Watcher建立起observe与被complie之间的联系。一个Watcher实例会被创建来监听一个特定的数据对象上的变化，并将视图更新的任务交给Dep管理器。当数据发生变化时，setter方法会被调用，并向Dep管理器发送通知。然后Dep会触发它下面所有Watcher实例的update方法。Watcher实例接收到来自Dep管理器的通知后，就会向Compile编译器发送消息，Compile编译器会根据这些消息更新视图。 第四：在视图更新之前，会生成新的虚拟DOM，会利用数据对应的标识符进行diff比较，并将有变化的数据更新到视图中，没有更新的数据则直接复用原来的虚拟DOM渲染到视图中
vue的响应式原理主要是通过Es5中的Object.defineProperty来进行数据的劫持，然后利用get和set来进行获取和设置，在data中所有的属性都被添加到get跟set中，当读取data里面的数据时自动调用get方法，当修改data中的数据时，自动调用set方法，检测到数据发生改变，自动触发watcher函数，watcher函数自动触发重新reader当前组件，生成新的虚拟DOM，vue框架会遍历新DOM树和旧DOM树之间的区别，并记录下来，最后加载操作，将记录下来不同的点，局部修改到真实DOM树上