Практика разработки одностраничных визуализаций на основе Vue2.0 + Element

Element Vue.js визуализация данных

нужно

В итерации проекта необходимо воссоздать страницу, которой могут управлять пользователи, которая может свободно выбирать шаблоны и настраивать контент. Это эквивалентно всему содержимому, отображаемому на этой единственной странице, которая настраивается самим пользователем. Подумав об этом, я думаю, что более целесообразно использовать Vue, потому что большинство операций на странице можно понимать как изменение порядка и редактирование общих данных. Ниже приведены некоторые из относительно важных проблем, зарегистрированных в процессе разработки.

Глубокая копия необработанных данных Vue

Из-за характеристик ссылочного типа JS-объектов, когда нет необходимости в двусторонней привязке данных, необходимо временно хранить данные путем глубокого копирования исходного объекта данных, то есть копированием методом JSON.parse(JSON.stringify (...)) часть данных для работы. Как правило, эта проблема вызывает интерференцию данных между компонентами.

Отделение данных по умолчанию от отредактированных данных

Эта проблема изначально не рассматривалась, и был использован простой и грубый метод вызова данных по умолчанию, то есть копирование копии данных, которые будут служить данными по умолчанию при входе на страницу. Позже было обнаружено, что это приведет к изменению данных по умолчанию после того, как пользователь манипулирует данными. Хорошее решение — отделить их друг от друга, и все они являются независимыми запросами.

Слушатель диалогового окна Element's Dialog

С точки зрения диалога, поскольку текущая версия Element 2.0 напрямую генерирует все диалоги, которые необходимо использовать, при загрузке страницы, а затем скрывает их, при переключении состояний выполняется только операция «показать/скрыть». не уничтожается и не регенерируется. , поэтому могут быть проблемы, которые могут быть вызваны только в первый раз при мониторинге и обновлении данных.Одним из решений является мониторинг скрытых свойств, влияющих на отображение диалогового окна, таких как dialogVisible в официальном примере, а затем выполнять обновление данных при отображении диалогового окна и т.д.

Междоменная проблема локально разработанных запросов данных

С одной стороны добавить конфигурацию можно через webpack-dev-serverdisableHostCheck: trueчтобы изменить поведение поиска по имени хоста по умолчанию. также можно настроитьconfig > index.jsНиже proxyTable, чтобы решить эту проблему.

proxyTable: {
  '/api': {
    target: 'http://api.x.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
}

Другое: функция Vue-CLI заключается в том, что он использует плагин http-proxy-middleware. гитхаб:GitHub.com/любовь к грудному вскармливанию/контракт…

Хранение и поиск данных

Используйте localstorage для хранения идентификаторов, используемых для различения идентификаторов, и используйте axios для выполнения запросов данных на стороне сервера в соответствии с разными идентификаторами. Если это связано с междоменным использованием, вам необходимо добавить модуль JSONP. Связь:GitHub.com/ax iOS/ax iOS…

быть улучшенным

  • Vue не используется для ленивой загрузки.Из-за сложности логики работы все JS-файлы на домашней странице имеют размер почти 800 КБ.Если в будущем JS-файлы итерационной функции станут больше, могут может привести к длительному времени ожидания первой загрузки, поэтому в идеале рассмотрите возможность добавления отложенной загрузки и загрузки JS по требованию и планируйте заранее.
  • Без использования Vuex текущая передача данных между компонентами осуществляется через реквизиты. Хотя нет проблем с крупномасштабным обменом данными между компонентами, все же необходимо внедрить Vuex для обработки данных. С усложнением проекта текущая коммуникация между компонентами становится все более громоздкой.

в конце

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

Дополнение. . .

Если у вас есть какие-либо вопросы, пожалуйста, поправьте меня! Оригинальный адрес блога:Деревня Тяньма. Ван/2017/11/%E5…

Категории