LINUX.ORG.RU

Vue.js как добавление реактивности

 , , ,


0

2

Привет.

Решил я сделать свой мини сайт на vps для лично своих заметок и прочих нужд. Т.к. в основном работаю с django, на ней и решил остановиться. Примерная концепция — отдельные приложения для реализации каких-то своих функций. Для упрощения восприятия положим, что это блог, какое-то приложение для учёта каких-то действий, может аналог pastebin, прочее.

Делать SPA я не собираюсь, равно как и использовать какие-либо route, т.е. классическая схема обычного веб приложения. Но! Хочется добавить какой-то реактивности, например, логин форма xhr запросом логинит. Так же в бложике может быть markdown редактор, например. Т.е. в некоторых местах могут быть какие-то сущности, которые работают исключительно с api бекенда. Такая примерно идея.

Понимая, что уже 2к19 и использовать jQuery как минимум странно, я решил заюзать vue. Написал конфиг для webpack, чтобы удобно собирать это всё вместе с scss стилями по разным файлам и хочу интегрировать это в страницы обычного django.

Собственно вопрос. Я ознакомился с документацией и разными решениями и что я понял:

  • почти всегда vue позиционируется как SPA. Типа вот тебе #app и тут делай что тебе надо. Но мне надо не это.
  • да, есть решение, когда тебе нужно не это и это — portal-vue — типа всё так же регистрируешь один #app, но магией работы с DOM из инициализированного приложения можно достучаться до элементов извне. Как мне кажется, это довольно костыльный метод.
  • сделать несколько инстансов vue App. Например в подключаемом файле js пишем конструкции типа: if element.exists => new vue.App... — несколько костыльно, но в общем мне решение подходит, т.к. я могу при нахождении какого-то элемента на странице сделать его реактивным.

Собственно вопрос — неужели всё так печально? Ладно, я могу создать несколько элементов, но, вдруг, мне понадобится шарить между ними какие-то данные? Скидывать всё в localStorage и добавлять кругом разных eventListener чтобы всё это отслеживать? Так это очень похоже на jQuery подход.

Если у кого есть пример решения подобной проблемы и как с этим боролись — заранее благодарен.

Ответ на: комментарий от vvn_black

Ну в основном да. Т.е. рендерим страницу, там один или два или больше элементов пустые (id='app', id='some_form', …), их уже обрабатывает vue (например просто рендерит какую-то форму или при загрузке странице делает запрос на бекенд, чтобы получить информацию для отображения).

conformist ★★★ ()

Тебе нужен Polymer и plain js, vue не бери, если не понимаешь пользоваться. А гибридный рендеринг — трушный подход, я считаю, сам так делал. Таким образом можно держать баланс между скоростью отрисовки и нагрузкой на сервер, между лёгким Web API и бекендом для сайта.

WitcherGeralt ★★ ()

А почему SPA все же не сделать? Если требуется сделать сайт более «дружелюбным» для поисковых систем, что есть nuxtjs, который позволит рендерить страницы прямо на сервере.

Просто то, что ты хочешь - это, честно говоря, лютый велосипед. Я не работал с Vue (React юзаю), но, мне кажется, ты пытаешься микроскопом забивать гвозди. Всякие React/Angular/Vue и т.п. - это не замена jQuery, а все же для SPA больше.

dimuska139 ()

По-моему ты просто хочешь странного, и от этого получается печально.

Посмотри knockout.js, если тебе просто кусочек странички иногда надо подхачипурить.

Vit ★★★★★ ()

Реакт посмотри. Он, в отличие от Vue, библиотека, а не фреймворк. Просто вызываешь ReactDOM.render(<MyWidget />, document.getElementById("my-widget")) в нужные места своего DOM, а данные хранишь в едином Redux-хранилище, например.

deadNightTiger ★★★★ ()

Vue подойдет, но оно только внешне приветливая маленькая либка. Вскоре выясняется, что код надо писать в .vue-файле, который поддерживается в полутора IDE. А чтобы этот .vue скомпилить, это нужна нехилая такая система сборки.

Если хочется маленького и несложного, можешь глянуть связку preact, preact-portal, unistore.

А «реактивность» это не только и не столько про интерфейс, сколько про поток данных. Можно ознакомиться с mobx для понимания

spoonbob ()
Ответ на: комментарий от spoonbob

Vue подойдет, но оно только внешне приветливая маленькая либка. Вскоре выясняется, что код надо писать в .vue-файле, который поддерживается в полутора IDE. А чтобы этот .vue скомпилить, это нужна нехилая такая система сборки.

Тащемта ненужно.

ritsufag ★★★★★ ()
Ответ на: комментарий от spoonbob

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

tz4678 ()
Ответ на: комментарий от tz4678

Ну как бы ни один бизнес не станет отказываться от дополнительного трафика - это ж потенциальные клиенты. Отсюда и поддержка старых браузеров, мобильные версии и т.п. А в РФ и СНГ траф с Яндекса - вполне себе ощутимая вещь, смысл от него отказываться? Да и Гугл SPA сайты до сих пор, насколько знаю, индексирует хуже обычных.

P.s. есть ssr (для Реакта есть Nextjs), который решает эту проблему.

dimuska139 ()
Ответ на: комментарий от dimuska139

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

tz4678 ()
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Document</title>
  </head>
  <body>
    <div id="app1">
      <input v-model="message" type="text" />
    </div>
    <div id="app2">
      <input v-model="message" type="text" />
    </div>
  </body>
  <script src="vue.js"></script>
  <script>
    var bdata = {message: "sdfdsf"}
    
    var app1 = new Vue({el: '#app1', data: bdata
		   });
    var app2 = new Vue({el: '#app2', data: bdata
		   });

  </script>
</html>

давно не трогал вуй не помню что там как

Int0l ()
Последнее исправление: Int0l (всего исправлений: 1)

Решил я сделать свой мини сайт на vps для лично своих заметок и прочих нужд.

То, что ты собираешься делать - займёт несколько недель секаса. Возьми любую подходящую CMS, разверни за 5 минут и начни пользоваться. Сэкономишь себе кучу времени, а результат тот же. Если цель - именно занятие с Vue - так тоже сомнительный профит, завтра какой-нибудь школьник изобрёт Hrew.js и весь твой опыт вникуда.

Alve ★★★★★ ()

Собственно вопрос <поток сознания>

А в чем собственно вопрос?

Собственно вопрос — неужели всё так печально?

Что печально-то, блджад?

вдруг, мне понадобится шарить между ними какие-то данные? Скидывать всё в localStorage и добавлять кругом разных eventListener чтобы всё это отслеживать?

Наркоман. https://jsfiddle.net/b942pgew/

anonymous ()