An animation to understand the Vue2 diff algorithm

preface

Vue uses a virtual DOM (an object that describes the real DOM) to avoid frequent DOM manipulation.

At the heart of the virtual DOM’s ability to improve performance is its new and old DOM comparison algorithm (DIFF). Understanding the DIFF algorithm is not only helpful for moving bricks, but also for communicating with interviewers happily.

Look at the source code directly a bit of a headache, in the next close for you to prepare an animation, help you kill the diff algorithm this “dragon”.

Dry goods

Without further ado, the following is the video address and source address, it is recommended to watch. The first video recording is a little nervous. Thank you for your understanding.

Animated video address

Vue source code address