请教老师关于vue渲染

问题描述：

把methods里一个方法放在视图层里调用，无论哪个数据发生改变后都会再次调用这个方法。

所以我一直以为流程是，数据改变后会全局更新视图层，更新时视图层重新收集数据依赖，并把发生变化的部分局部渲染到DOM。

想问下老师实际流程是啥

__Promise 2021-12-01

源自：框架面试课 3-2 如何理解MVVM

收起

1回答

好帮手慕然然回答被采纳获得+3积分 2021-12-02 10:13:04

同学你好，解答如下：

当通过一个点击事件来改变数据时，Object.defineProperty会监听到数据变化，立刻触发视图的更新。在这个过程中vue使用虚拟DOM进行局部更新，vue会将真实DOM数据抽取出来，以对象的形式模拟树形结构，然后新旧vnode对比，得出最小的更新范围，最后更新DOM。在更新节点的过程中采用的是diff算法，diff的过程就是调用patch函数，比较新旧节点，一边比对一边给真实DOM打补丁，以最小的代价完成DOM更新。

祝学习愉快！

收起回答

__Promise 提问者 #1

老师，就是说每次渲染都是把组件转成虚拟DOM然后更新真实DOM是吗?
转为虚拟DOM这个过程是针对整个组件吗，还是局部呢？

2021-12-02 12:49:18
好帮手慕然然回复提问者 __Promise #2

同学你好，是的，每当组件依赖的数据发生变化时，就会调用render函数创建虚拟dom树，让新旧虚拟dom树比较，vue会找到最小更新量，然后更新必要的虚拟dom节点，最后修改对应的真实dom，这样就保证了对真实dom达到最小的变动。不过，不是针对整个组件，而是数据发生变化时所依赖的组件。
祝学习愉快！

2021-12-02 13:29:38
__Promise 提问者回复好帮手慕然然 #3

老师我没表达清楚，我指的整个组件就是依赖了这个数据的单个组件，然后我想问是这个组件整体转为虚拟DOM还是只把组件里依赖了数据的局部转为虚拟DOM呢？

2021-12-02 13:40:43