Brief vue two-way data binding principle

MVVM

View the ViewModel MVVM name is the Model
MVVM consists of three parts are:
M: Model
V: View
the VM:ViewModel

In MVVM in ViewModel in a Binder, or Data-binding engine. We need to declare which part of something with the data on the Model View (view) is displayed in the View binding. When the update data on the ViewModel Model, the data line will be automatically passed Binder View. Conversely when the user operates View, Binder data will be automatically updated to the Model. This is a two-way data binding.

vue two-way data binding principle

vueCreating vmtime, the data will be arranged to the instance, and then Object.definePropertythe method for adding dynamic data getterand settermethods.

When acquiring data, it will trigger the corresponding gettermethod, the time when the setting data, corresponding to the triggering settermethod.

Then when setterthe time trigger method complete, the internal trigger further watcher, when the data changes, view the update operation is completed.

Vue hijacked by internal data & publish subscribe model to achieve two-way data binding

Data hijacked by Object.defineProperty method for all of the data, the data is dynamically added to the getter and setter methods.

When data changes announced to subscribers (Watcher), trigger callback listener response.

Object.defineProperty ( obj, attr, desc)
The method of the three parameters are

• obj: need to define or modify the properties of an object;
• attr: need to be defined or modified property;
• desc: this attribute descriptor (descriptor and data access comprising a descriptor), passed as a parameter of an object, the parameter has six options:

1. value: setting value of the attribute;
2. writable: Boolean, if the attribute is writable (whether to change its value);
3. enumerable: Boolean, which can be traversed property is obtained (for ... in, Object.keys the like);
4. configurable: Boolean, setting whether the property may be deleted, and in addition to other writable whether the descriptor may be modified;
5. get: function callback function is executed when the value of the property is acquired (e.g. console.log (prop)), the default is undefined;
6. set: callback function is executed when the function is set, the value of the property, the default is undefined;

Object.defineProperty shortcomings vue3 in.

1、无法监听es6的Set、Map 变化； 

2、无法监听Class类型的数据； 

3、属性的新加或者删除也无法监听； 

4、数组元素的增加和删除也无法监听。

We understood through a simple example

		var obj = {}
        let middel = 123
        Object.defineProperty(obj,"msg",{
            get(){
               
                return middel
            },
            set(val){
                middel = val
            }
        })

        console.log(obj.msg)   //获取对象的属性的时候，会调用自身的get方法   返回123
        obj.msg = 123456           //设置对象的属性的时候，会调用自身的set方法
        console.log(obj.msg)   //123456

When we print obj.msg when msg is to get the value of the obj, then he would go desc call the get method, we get the return value middel, print 123. obj.msg = 123456 is assigned to the obj msg, method call set this time will desc 123456 val passed as a parameter, and then assigned to the middel val, this time middel = 123456. We value returned when printing obj.msg again is 123456.