Как работает Vue.js, React.js, Angular.js

Это своего рода вопрос от curiossity.Как работает Vue.js, React.js, Angular.js

Возникает вопрос:

Как это на стороне клиента рамки работы, позвольте мне объяснить.

Я работаю с javascript более 5 лет. И я ничего не понимаю. Как они знают, когда изменяется переменная (например, title)?

Я хотел бы сделать это следующим образом:

function onTitleChange(title) { //do some stuff } 
let title = "This is some title" 
let lastTitle = title; 
setInterval(() => { 
    if(lastTitle !== title) { 
     onTitleChange(title); 
     lastTitle = title 
    } 
}, 10);

Является ли это, как все они работают? Это как Vue.js знает, когда изменяется значение переменной? Если нет, то какую магию они используют, чтобы знать, когда меняется переменная?

источник

2017-02-11 durisvk

Посмотрите на эту http://stackoverflow.com/questions/1759987/listening-for-variable-changes-in-javascript-or-jquery –

https: // разработчик .mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy – gurghet

@JozefCipa и @gurghet - это 'object.watch()' поддерживается в других браузерах, чем mozilla firefox?Поддерживается ли это также в NodeJS? – durisvk

Нет никакой магии, Угловой, например, использует zone.js, я рекомендую вам об этом read.

источник

2017-02-11 20:31:34

Это действительно хорошо документированная библиотека. И он поддерживает мой любимый TypeScript :). – durisvk

-1

Немного о React - его на самом деле не слушать изменения объектов Js, из-за этого вызывать только render методов компонентов, если shouldComponentUpdate() (по умолчанию это использовать равенство ссылок состояния компонентов) возвращает true, и проверить, вернулся VirtualDOM равна реальной DOM.

Из-за этого - его намного быстрее, чем Угловой, который использует многие слушатели и проверки равенства для просмотра обновлений.

источник

2017-02-11 20:42:41

@Dimitriy Kovalenko Это также означает, что 'React' имеет' setState (состояние) 'функцию, которую легко узнать, когда он уволен. Другие структуры, такие как 'Vue.js' и' Knockout.js', действительно прослушивают изменение переменной. – durisvk

Я хочу попробовать объяснить это в очень простых словах, шаг за шагом:

сделать <h2>Hi</h2> элемент на простом HTML странице
откройте консоль браузера и магазин DOM элемент в переменной: var h2 = document.getElemntsByTagName('h2')[0];
сделать две другие переменные первого и второго var obj = {};var text = '';

т его часть, которую вы ищете:
вместо того, чтобы просто назначая obj.text = text мы объявляем геттер сеттер для obj.text атрибута так, что всякий раз, когда мы устанавливаем новое значение obj.text соответствующий DOM элемент тоже меняется.
```
Object.defineProperty(obj, 'text', { 
    get: function() { 
     return text; 
    }, 
    set: function (newvalue) { 
     text = newvalue; 
     h2.innerHTML = text; 
    } 
}); 
```
теперь идите и измените значение obj.text: obj.text = "Hello again"

для получения дополнительной информации посетите эту page аут.

все коды доступны по адресу: JSfiddle

источник

2017-02-11 21:15:48 Soorena

Как работает Vue.js, React.js, Angular.js

ответ

Смежные вопросы