Показать сообщение отдельно
  #1 (permalink)  
Старый 14.04.2020, 09:46
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,568

По реактивности, на понимание
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 ? 'число' : 'не число'}} - код бы оказался?
Ответить с цитированием