alvvi

(angular не использует vdom, для него история другая)

перерисует целиком свой виртуальный dom

Давайте немного проясним: виртуальный DOM - это грубо говоря js объект содержащий другие объекты.
При добавлении нового сообщения туда добавится новый объект и весь DOM сравнится со старой версией с помощью diff-алгоритма специфичного для конкретного фреймворка.
И только результат этого сравнения добавится в реальный DOM.
Работа с объектом значительно быстрее работы с самим DOM-ом, поэтому чтобы оно начало работать заметно медленее у вас должен быть дикий уровень вложенности или очень большой DOM.

100 сообщений и 50 контактов - это небольшие цифры, с таким любой из упомянутых фреймворков справится без просадок.

Вот пример бенчмарков с большим количеством объектов(1000+) для многих фреймворков на примере незамысловатой таблицы:
www.stefankrause.net/js-frameworks-benchmark6/webd...
(там же есть ссылка на репо чтобы увидеть как она выглядит)
Как видите, там в таблицу уже содержащую 10 000 добавляется еще 1000(!) объектов, и многие фреймворки впонле с этим справляются.

В реальности же, вам вряд-ли придется добавлять такие цифры, потому что подгружают изначально обычно меньшее количество: такое, которое пользователь сможет увидеть в одном экране, все остальное догружается постепенно по мере надобности. То же самое касается вашей истории чата, ее стоит подгружать только за тот период, за который она необходима пользвателю.

Не совсем понятно, зачем вам разные названия свойств, но в целом ничто не мешает сделать их динамическими

let type = 'goods'; // Здесь можно получить строку из страницы любым удобным способом
this[type] = this[type].concat(data.data.data)

А хорошо ли интегрируется React.js с PHP фреймворком Laravel?
И если да, то насколько ?

Так же как с любым другим PHP фреймоврокм, нормально.

Vue.js умеет все тоже самое что и React.js ?

Да

А в чем особенность React.js и Vue.js ?

В доках обоих фреймворков прекрасно все описано.

Когда я увидел чарты (график) производительности React.js я офигел ! Он очень мощный!
А если использовать React.js с Laravel будут такие же результаты?

Можете показать пальцем на того человека, который убедил вас что производительность фронтенд фреймворка может быть прямо связана с бекенд фреймворком? Палкой хочу ударить просто.

И прошу вас или объяснить или же оставить ссылку про то, как же все таки происходит интеграция между двумя сторонами на том фреймворке (React or Vue) который предпочитаете.

REST/GraphQL API, 1000 раз спрашивали уже

Добавлю, что я знаю ES6, уже писал на Koa используя async/await, у меня достаточно хороший опыт/практика в разработке на NODE.JS.

Тогда забудьте про PHP и его фреймворки. Зачем они вам, если REST для SPA прекрасно пишется на ноде?

Прошу вас отвечать поподробнее на вопросы.

Я бы может и ответил, если бы вы задали не самый банальный список вопросов в мире.

Если вы уже забиндили инпут на свойство инстанса, то что мешает просто подставить его в методе который обрабатывает отправку:

const url = `http://toster.ru/${this.userUrl}`;
$.ajax({
  url,
  // ... все остальное
})

Если же у вас проблемы с чем-то более фундаметнальным, то документация в помощь.

Vue.component('my-component', {
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>',
  created() {
    console.log(this.myMessage);  
  }
})

https://developer.mozilla.org/en-US/docs/Learn/HTM...

Vue тоже использует Virtual DOM.
А вот что делает Angular

Angular uses a different strategy. We keep track of the old values for every binding to the view, and so we can detect which pieces of the view changed and update them in the real DOM.
Virtual DOM diffs the view, angular diffs the model.
From a performance standpoint neither approach is strictly better than the other. There are certain scenarios in which either approach has a slight advantage.