1. Binding principle of Vue: In fact, it is the principle of New Vue
(1). Create a child object of type VUE
A. Introduce data objects:
1). Bodyguards (accessor properties) are automatically assigned to every variable in the data object! Result: Any attempt to modify a variable in data is bound to trigger the bodyguard's set() method. 2).new Vue() also automatically implants a notification function in the set() function of each variable: whenever the outside world tries to modify the variable in data, it is destined to trigger the notification function in the bodyguard's set() method. The entire VUE framework knows that the value of a variable has been changed!Copy the codeB. Introduce and break up methods objects:
By default, all functions in Methods belong directly to the new Vue() object. Causes the bodyguard (accessor attribute) of the variable in data after the function in Methods enters new Vue(). So if a method in methods wants to access a variable in data, it must add this. The variable nameCopy the code(2). Virtual DOM tree construction:
A. What is a virtual DOM tree
A new DOM tree created by scanning the full DOM treeCopy the codeB. process
1).new Vue() will find the parent element on the interface specified by the el attribute 2). 4). If the event name = function name, the event name = function name. All "{{variable name}}" are encountered: I. Add possible elements to the virtual DOM tree ii. And for the first time replace {{variable name}} as the initial value of the variable in the element contentCopy the code(3) the results
Whenever a variable in data is modified:
A. Automatically call the variable's set() function b. The built-in notification function in set() notifys the VUE framework that the variable xx has changed c. The framework automatically scans the virtual DOM tree for all DOM elements affected by this variable change. Automatically updates only affected elements on the page using pre-wrapped DOM add, delete, change and review operations. Other elements that are not affected by this variable remain unchanged!Copy the code(4)
1.VUE binding principle
Accessor property + virtual DOM tree accessor property + Observer mode + virtual DOMCopy the code2. Advantages of virtual DOM tree
(1) Less content! Save only elements that can change. None of the invariant elements contain (2). Traverse fast! (3). Avoid lots of duplicate code! -- Automatically perform DOM add, delete, change and check operations (4). High efficiency! Each time a variable changes, only the individual affected elements are modified; the other elements remain the same!Copy the code
Observer model
When a variable value is changed, all other objects that care about the variable can be automatically notified so that they can automatically retrieve the new value of the variable
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge"> <title>Document</title> </head> <body> <script> // Observer mode: When the value of a variable is changed, all other objects concerned with the variable are automatically notified so that they can automatically retrieve the new value of the variable. var data={ money:1000, setMoney(money){ this.money=money; // Whenever money is modified, notifyAll() this.notifyall () is called; }, observers:[], notifyAll(){this. Observers. ForEach (function(obj){obj.getmoney (), You must carry a getMoney() function, })} var obj1={money:0, getMoney(){console.log(' obj1 '= ${data.money}, and get data.money'); this.money=data.money; }} var obj2={money:0, getMoney(){console.log(' obj2 gets data's money changed to ${data.money} and gets data.money '); this.money=data.money; }} var obj3={money:0, getMoney(){console.log(' obj3 gets data's money changed to ${data.money} and gets data.money '); this.money=data.money; } } data.observers.push(obj1); data.observers.push(obj2); data.observers.push(obj3); data.setMoney(900); console.log(obj1.money, obj2.money, obj3.money) data.setMoney(800); console.log(obj1.money, obj2.money, obj3.money) </script> </body> </html>Copy the code