The implementation principle of angular and Vue bidirectional data binding (emphasis is on Vue bidirectional binding) _angularjs

I am in the JavaScript advanced programming notes when I see the chapter object-oriented design, when the object attributes are divided into data properties and accessor properties, we usually use more than 90% of the JS object is used only data attributes; What exactly is the data attribute and accessor properties?

Data properties: The Data property contains the position of a data value where the value can be read and written.

Accessor properties: Accessor properties do not contain data values; they contain a pair of getter and setter functions when reading accessor properties, the Getter function is called to return a valid value, and when the accessor property is written, the setter function is invoked and the new value is passed in.

The emphasis here is on accessor properties, which can only be done using the ES5 Object.defineprorerty () method, as in the following example:

var book={
_year:2004,
edition:1
};
Object.defineproperty (book, ' Year ', {
get:function () {return
this._year
},
set:function (NewValue) {
if (newvalue>2004) {
this._year=newvalue;
this.edition+=newvalue-2004
}}
);
book.year=2005;
alert (book.edition);//2
Console.log (book.year);//2005

That is, when executing the book.year=2005, it actually executes the set method in year, and executes the year's Get method when executing the book.year;

var book={
_year:2004,
edition:1
};
Object.defineproperty (book, ' Year ', {
get:function () {
Console.log ("year get ') return
this._year
},
set:function (newvalue) {
Console.log ("year set")
if (newvalue>2004) {
this._year=newvalue;
this.edition+=newvalue-2004
}}
);
book.year=2005;
alert (book.year);

The console tip is:

This principle is the principle of Vue two-way data binding, we in the Vue component of the data declaration of attributes in fact, in the object has already encapsulated this attribute into accessor properties.

Each property has a get and set method, the control of bidirectional data is both in the get and set methods, because whether you change the value in ready (2.0 is mounted) or in view triggers the Set method, copying the new value, and then matching the value in the view again, Of course you have more complex control operations, and the Get method is to keep the value of this property in the ready for the most recent value.

ANGULAR1 two-way data binding is dirty data monitoring, the simple point is to monitor the new value and the old value has not changed, this way is to be monitored regularly. Two kinds of performance consumption feel not on a level.

It's like using HTML5 sockets to do background active message push front-end and use JS timer every 5 seconds to send requests to the background capture message performance gap.

And before the JS-oriented layered ideas can also be used in the Vue project, I have always thought that the Vue data layer is actually a device, but the API found after the computed properties of the data layer can be fully implemented to send Ajax fetch function, not necessarily in all put to ready ( 2.0 is mounted) inside, this ready (2.0 is mounted) can only be responsible for data format, Or to control the dynamic effect of the page. This JS structure is like backstage MVC, the hierarchy functions clearly clear. It's just that I suddenly thought of the idea has not really applied to the actual project, but for the use of Vue friends to provide a way of thinking.

Import data from ' ... /assets/js/data '
export default{
data () {
return{
menu:data.menu,
Inde: "",
Row: "",
Clomu: ""
}
},
computed:{
isfull:function () {
alert ();
Return
}
},
mounted () {
},
methods:{
domclick:function (i) {
if (this.inde== =i) {
this.inde= "";
} else {
This.inde = i;
}
},
subclick:function (i,o) {
this.row=i;
This.clomu=o
}}
}

The above is a small set to introduce the angular and Vue two-way data binding implementation principle (emphasis is vue two-way binding), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!