Как работает экземпляр Vue?

Frontend developer JavaScript
1

Интересует как именно он работает, то есть что происходит при создании, когда добавляются свойства из data, куда именно попадают данные из data?

2

Все свойства которые находятся в опции data добавляются в систему рекативности Vue, что это значит, а значит это то что представление теперь будет реагировать на все изменения, обновляя в соответствии с последними изменениями, вот пример такой ситуации:

var example = { prop: 10 }



var vm = new Vue({

    data: example

})



alert(vm.prop)

alert(example.prop)



vm.prop === example.prop



vm.prop = 5

example.prop



alert(vm.prop)

alert(example.prop)



example.prop = 15

vm.prop



alert(vm.prop)

alert(example.prop)

Как будет видно в браузере, изменение свойства экземпляра в дальнейшем влияет на оригинальные свойства, точно так же наоборот. Но такое работает только если свойства в data существовали изначально, при создании экземпляра, если же походу добавить свойство то данное свойство уже не добавится в систему реактивности и соответственно не будет вызывать никаких обновлений