angular.js - 试问angularjs的双向绑定是如何实现的？

Question

用过angularjs的人肯定知道他的双向绑定，用起来也是很方便，可是他内部是怎么实现的呢？

视图变化了去更新数据，这个还好理解，也大都知道怎么去模拟一下，但是说到数据变化了去更新视图，关键在于是怎么去判断数据发生了变化。。。

之前想了一下，类似先存储一份oldValue，然后定时去遍历这些，用newValue和oldValue去对比，如果变化了做更新和其他相关的工作。。。

但是觉得这样行吗？自己思索半天觉得也不是很靠谱，希望各位兄弟姐妹不吝教诲！## 标题

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