How to update the view synchronously after data changes in Vue

Preface

Not long ago, I saw an interesting problem. How to update the view synchronously after the data in Vue changes? I searched for it, but didn’t find a solution to the problem. I could only find a solution from the source code.

reason

We all know that after changing the data in Vue, the view is not updated synchronously.

After the vue instance is initialized, data will be set to a responsive object. When we execute this.xxx = 1, the setter of this responsive object will be triggered. In the setter, an update will be triggered to notify all subscribers who have subscribed to xxx. But this trigger update is not synchronous, it will add all watchers to a queue and update the view after nextTick.

That's why vue can't update the view synchronously.

Workaround

Once you know the cause, you can always find a solution.

Since the view is updated at nextTick, a method to update the view must be executed at this time. If we manually execute this method when the data changes, we can achieve the purpose of synchronously updating the view.

After understanding the source code, we can find that the method executed is watcher.run(), so the question is, how to get this method?

If you want to quickly understand this, it is recommended to read Vue.js Technology Unveiled

Let's print this in the console

The run method can be found on the prototype of the _watcher object, so the problem is solved.

 this.xxx = 1;
 this._watcher.run()

Execute the above code and manually update the view after updating the data to achieve the synchronization effect.

A better solution

It would be troublesome to add this._watcher.run() every time you want to update the view synchronously. Therefore, I wrote a plug-in that supports synchronous update of the view after this.xxx = 1.

The principle of this plug-in is very simple. It adds an option syncData in the component options, which is similar to data. Then put it in data. When the create hook is called, this part of data is hijacked again. When the data in syncData changes, it automatically triggers _watch.run(), thereby synchronously updating the view.

Plugin address: GitHub address

postscript

To be honest, I think this plugin is useless. In theory, all the problems that this plugin can solve can be solved by $nextTick.

This is the end of this article about how to synchronize views after data changes in Vue. For more relevant Vue view synchronization update content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!