Shulou(Shulou.com)06/02 Report--

This article mainly introduces the relevant knowledge of "what is the principle of Vue two-way binding". Xiao Bian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "what is the principle of Vue two-way binding" can help you solve the problem.

core

Object.defineProperty() method

principle

Object.defineProperty() hijack setter, getter of each property, pass when data changes

Knowing Vue instances, trigger the corresponding getter and setter callback functions.

When passing a plain Javascript object to Vue instance as its data option, Vue will iterate over its properties, using Object.defineProperty to

They turn into getters/setters. The getters/setters are invisible to the user, but internally they let Vue track dependencies, notifying changes when properties are accessed and modified.

characteristics

Vue's bi-directional data binding uses MVVM as the entry point for data binding, integrates Observer, Compile and Watcher, monitors data changes of its own model through Observer, parses compiled template instructions through Compile (used to parse {{}} in vue), and finally uses Watcher to set up a connection between Observer and Compile.

The communication bridge of the data model changes to achieve data change-> view update; view interactive change (input)-> data model change bidirectional binding effect.

This is achieved through data hijacking and publisher-subscriber functionality.

Simple implementation of JS

var obj = {}Object.defineProperty(obj, 'txt', {get: function () {return obj},set: function (newValue) {document.getElementById ('txt ').value = newValuedocument. getElementById ('show')[xss_clean] = newValue})document.addEventListener ('keyup ', function (e) {obj.txt = e.target.value}) This is the introduction to the content of "What is the principle of Vue bi-directional binding?" Thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.