angular.js - How is the two-way binding of angularjs implemented?

Question

Those who have used angularjs must know its two-way binding, which is very convenient to use, but how is it implemented internally?

Updating the data when the view changes is easy to understand, and most people know how to simulate it. But when it comes to updating the view when the data changes, the key lies in how to judge that the data has changed. . .

I thought about it before, similar to storing a copy of oldValue first, and then traversing these regularly, comparing newValue with oldValue, and doing updates and other related work if they change. . .

But do you think this is okay? After thinking about it for a long time, I feel that it is not very reliable. I hope that all brothers and sisters will not hesitate to teach me! ## Title

Answer 1

Implement a simple example similar to two-way binding

HTML

<input id="app" my-model="text" />

SCRIPT

var scope = {};
var input = document.getElementById('app');

Update data when view changes

This is very simple, just bind the event when compiling the instruction myModel

input.addEventListener('input', function (e) {
    scope.text = e.currentTarget.value;
},false);

Data changes update UI

There are watchers and digest inside scope

scope.$$watchers = [];
scope.$$watchers.push({
    key:'text',
    fn: function (value) {
        input.value = value;
    }
});

scope.$digest = function () {
    scope.$$watchers.forEach(function (watcher) {
        watcher.fn(scope.text);
    });
};

When we assign a value to the scope and trigger the digest, the UI will be updated simultaneously

scope.text ='zzz';
scope.$digest();

Directly assigning values ​​to the scope will not update the UI. Angular will update the UI only when the digest is triggered. In most cases, Angular actively triggers the digest for us, giving the impression that we can just give the scope casually. The result A situation arises that you cannot understand. For example

angular.module('myApp', [])
    .controller('MyCtrl', function ($scope) {
        setTimeout(function () {
            $scope.text = 'zzz';
        }, 1000);
    });
    

Using setTimeout directly, the result is that the UI is not updated, and we need to do the following processing

angular.module('myApp', [])
    .controller('MyCtrl', function ($scope) {
        setTimeout(function () {
            $scope.$apply(function () {
                $scope.text = 'zzz';
            });
        }, 1000);
    });
    

Or use angular’s ​​$timeout, which helps us trigger the digest

angular.module('myApp', [])
    .controller('MyCtrl', function ($scope,$timeout) {
        $timeout(function () {               
            $scope.text = 'zzz';
        }, 1000);
    });

Answer 2

Let’s search. There are many articles that can help you answer your questions. Search first and then ask questions

Answer 3

First of all, let me make a statement. I am not very familiar with the angularjs mentioned in the question, which is a bit wrong.
Knockout also has the same two-way data binding feature. It is implemented in the observer mode. After creating the observed object, when assigning value using the set method, it will also notify observers who are interested in the object. To achieve the effect of two-way data binding.

Answer 4

angular1 is a dirty check. . This also brings about performance problems

Answer 5

How does AngularJS implement its two-way data binding mechanism?

Answer 6

可以参考：
http://teropa.info/build-your-own-angular/build_your_own_angularjs_sample.pdf