1) Вот в таком примере для Vue
<div id="app">
<ol>
<li v-for="(obj, key) in arr1">
{{key}} - {{obj.prop1}}
{{obj.prop1 == +obj.prop1 ? 'число' : 'не число'}}
<a href="#" v-on:click="doubleValue(obj)">double</a>
</li>
</ol>
</div>
var app = new Vue({
el: '#app',
data: {
arr1: [
{prop1:'01234'},
{prop1:'56789'},
{prop1:'qwert'},
{prop1:'yuiop'},
]
},
methods: {
doubleValue: function(obj) {
obj.prop1 = obj.prop1 + obj.prop1;
}
}
});
Как они достигают того что obj тут:
v-on:click="doubleValue(obj)"
указывает на нужный объект?
Это они каждый раз при регенерации списка v-for для каждого элемента
на лету создают код обработчика для onclick и в нем
генерируют код типа?:
let obj = app.arr1[нужный индекс];
app.doubleValue(obj);
2) В принципе понятно как html реагирует на изменения в данных, т.к. последние через сеттеры производятся.
Но чисто механизм уточнить:
- при рендеринге шаблона оно смотрит на какие данные есть ссылки
- и вот на эти данные(во внутренних массивах) им запоминаются места которые на них ссылаются?
- при изменении данных, эти места и перерисовываются
- вот где бы например этот - {{
obj.prop1 == +obj.prop1 ? 'число' : 'не число'}} - код бы оказался?
