A simple understanding of Vue’s bidirectional binding implementation

Object.defineProperty()

Definition: The object.defineProperty () method directly defines a new property on an Object, or modifies an existing property of an Object, and returns the Object.

Syntax: Object.defineProperty(obj, prop, Descriptor) where OBj is the Object to define attributes, prop is the attribute to define or modify, descriptor is the attribute descriptor to define or modify

The optional key value of the access descriptor:

Get: This function is called when the property is accessed. Set: This function is called when the property value is modified

var o = {}; // Create a new object var bValue = 38; Object.defineproperty (o, "b", {get() {console.log(' I was accessed '); return bValue; }, set(newValue) {console.log(' I have been modified '); bValue = newValue; }, enumerable : true, configurable : true });Copy the code

Vue simple bidirectional binding

Vue’s two-way binding is data change interception via Object.defineProperty()

var demo = document.getElementById('app') var obj = {} Object.defineProperty(obj,'message',{ set(value) { Console. log(' I've been modified ',value) demo.innerhtml = value}, get() {console.log(' I've been accessed ')}})Copy the code