Приветствую всех!
Начал немного разбираться в vuejs и quasar, чтобы сделать простенькое приложение, но после того как я его скомпилировал, то в анроид студии и на телефоне приложение ловит здоровские фризы, как будто очень тяжелое. Далеко ходить не надо, дело либо в моем коде на vue.js, либо из-за кривой конфигурации quasar.
И поэтому хотел бы услышать критику по моему коду на vuejs, может быть все таки из-за дикой кривизны его, у меня происходят фризы на приложении.
Вот такой у меня роутинг и подключение компонентов:
export default [
{
path: '/',
component: () => import('layouts/default'),
children: [
{
path: '', name: 'index', component: () => import('pages/index')
},
{
path: '/info', name: 'info', component: () => import('pages/info')
},,
{
path: '/cars', name: 'cars', component: () => import('pages/cars')
},
{
path: '/cars/:id', name: 'detail', component: () => import('pages/detail-car')
},
{
path: '/test', name: 'test', component: () => import('pages/test')
}
]
},
{ // Always leave this as last one
path: '*',
component: () => import('pages/404')
}
]
Далее приведу страницу компонента, к примеру /cars, здесь я покажу без самого template, там просто напросто я вывожу данные:
import axios from 'axios';
import { Cookies } from 'quasar';
import { Loading } from 'quasar';
export default {
name: 'CarsList',
data () {
return {
selectOptionsWeight: [
{
label: 'Любой',
value: 0
},
{
label: 'до 1 тонны',
value: '1'
},
{
label: 'От 1т до 1.5т',
value: '1.5'
},
{
label: 'От 1.5т до 3т',
value: '3'
}
],
selectOptionsVolume: [
{
label: 'Любой',
value: 0
},
{
label: 'до 10 м3',
value: '10'
},
{
label: 'От 10м3 до 15м3',
value: '15'
},
{
label: 'От 15м3 до 30м3',
value: '30'
}
],
formFilterWeight: 0,
formFilterVolume: 0,
formFilterRadius: 50,
openedModal: false,
queryText: '',
getListCars: '',
lat: Cookies.get('user_lat'),
lng: Cookies.get('user_lng'),
cars: [],
showAlertEmpty: false,
titleApp: 'Поиск машины'
}
},
methods: {
goToDetailPage: function (id) {
this.$router.push('/cars/' + id);
},
selectFilterChange: function (data) {
console.log(data)
},
saveModalFilter: function () {
// to do save
this.openedModal = this.openedModal ? false : true;
},
openModal: function (e) {
this.openedModal = this.openedModal ? false : true;
// VueGoogleMaps.Map.methods.resize();
// google.maps.event.trigger(this.$mapObject, 'resize');
},
noticeError: function (event) {
this.$q.notify('Message');
},
templatePhone: (phone) => {
if (phone.length == 11) {
var s = '+'+phone.substr(0, 1)+' ('+phone.substr(1, 3)+') '+phone.substr(4, 3)+'-'+phone.substr(7, 2)+'-'+phone.substr(9, 2);
return s;
} else {
return phone;
}
},
calcDistance: function (lat1, lng1, lat2, lng2) {
//радиус Земли
var $R = 6372795;
lat1 *= Math.PI / 180;
lat2 *= Math.PI / 180;
lng1 *= Math.PI / 180;
lng2 *= Math.PI / 180;
var $cl1 = Math.cos(lat1);
var $cl2 = Math.cos(lat2);
var $sl1 = Math.sin(lat1);
var $sl2 = Math.sin(lat2);
var $delta = lng2 - lng1;
var $cdelta = Math.cos($delta);
var $sdelta = Math.sin($delta);
var $y = Math.sqrt(Math.pow($cl2 * $sdelta, 2) + Math.pow($cl1 * $sl2 - $sl1 * $cl2 * $cdelta, 2));
var $x = $sl1 * $sl2 + $cl1 * $cl2 * $cdelta;
var $ad = Math.atan2($y, $x);
var $dist = $ad * $R;
//расстояние между двумя координатами в метрах
return $dist;
},
saveModalFilter: function () {
let
weight = this.formFilterWeight > 0 ? this.formFilterWeight : '',
volume = this.formFilterVolume > 0 ? this.formFilterVolume : '';
axios.get(`https://api.sbl.su/taxi/list`, {params: {
weightEnd: weight,
volumeEnd: volume
}})
.then(response=> {
let data = JSON.parse(response.request.response);
this.cars = data.result.filter( item => ((this.calcDistance(item.trackLat, item.trackLng, this.lat, this.lng))* 0.001).toFixed(0) < this.formFilterRadius );
// hide modal
this.openedModal = false;
// alert if empty
this.showAlertEmpty = this.cars.length == 0 ? true : false;
}).catch(e=>{
console.log(e);
});
}
},
mounted(){
// устанавливаем заголовки в тулбар
let title = document.getElementById('title-toolbar');
let subTitle = document.getElementById('sub-title-toolbar');
title.textContent = 'Найти машину';
subTitle.textContent = 'Грузовое такси';
this.$axios.get(`тут запрос к апи`)
.then(response=> {
let data = JSON.parse(response.request.response);
this.cars = data.result.filter( item => ((this.calcDistance(item.trackLat, item.trackLng, this.lat, this.lng))* 0.001).toFixed(0) < this.formFilterRadius );
// alert if empty
this.showAlertEmpty = this.cars.length == 0 ? true : false;
}).catch(e=>{
console.log(e);
});
}
}
1) Quasar не так важен, мне интересно по vuejs, супер криво написано? Может фризы из-за не правильного использования методов vuejs?
2) Ну а подозрение лагов из за quasar, это возможно множество подключенных компонентов (если кто разбирается), это же может быть так? Покажу мой конфиг:
Конфигmodule.exports = function (ctx) {
return {
// app plugins (/src/plugins)
plugins: [
'axios'
],
css: [
'app.styl'
],
extras: [
ctx.theme.mat ? 'roboto-font' : null,
'material-icons'
// 'ionicons',
// 'mdi',
// 'fontawesome'
],
supportIE: true,
vendor: {
add: [],
remove: []
},
build: {
scopeHoisting: true,
vueRouterMode: 'history',
// gzip: true,
// analyze: true,
// extractCSS: false,
// useNotifier: false,
extendWebpack (cfg) {
}
},
devServer: {
// https: true,
// port: 8080,
open: true // opens browser window automatically
},
// framework: 'all' --- includes everything; for dev only!
framework: {
components: [
'QSelect',
'QAutocomplete',
'QLayout',
'QLayoutHeader',
'QLayoutDrawer',
'QPageContainer',
'QPage',
'QToolbar',
'QToolbarTitle',
'QInput',
'QBtn',
'QIcon',
'QList',
'QListHeader',
'QItem',
'QItemTile',
'QItemMain',
'QItemSide',
'QModal',
'QCard',
'QCardTitle',
'QCardMain',
'QCardMedia',
'QCardSeparator',
'QCardActions',
'QChip',
'QAlert',
'QParallax',
'QSlider'
],
directives: [
'Ripple',
'CloseOverlay',
'TouchSwipe'
],
// Quasar plugins
plugins: [
'Notify',
'Loading'
]
},
// animations: 'all' --- includes all animations
animations: [
'fadeIn',
'fadeOut'
],
pwa: {
cacheExt: 'js,html,css,ttf,eot,otf,woff,woff2,json,svg,gif,jpg,jpeg,png,wav,ogg,webm,flac,aac,mp4,mp3',
manifest: {
// name: 'Quasar App',
// short_name: 'Quasar-PWA',
// description: 'Best PWA App in town!',
display: 'standalone',
orientation: 'portrait',
background_color: '#ffffff',
theme_color: '#027be3',
icons: [
{
'src': 'statics/icons/icon-128x128.png',
'sizes': '128x128',
'type': 'image/png'
},
{
'src': 'statics/icons/icon-192x192.png',
'sizes': '192x192',
'type': 'image/png'
},
{
'src': 'statics/icons/icon-256x256.png',
'sizes': '256x256',
'type': 'image/png'
},
{
'src': 'statics/icons/icon-384x384.png',
'sizes': '384x384',
'type': 'image/png'
},
{
'src': 'statics/icons/icon-512x512.png',
'sizes': '512x512',
'type': 'image/png'
}
]
}
},
cordova: {
// id: 'org.cordova.quasar.app'
},
electron: {
extendWebpack (cfg) {
// do something with cfg
},
packager: {
// OS X / Mac App Store
// appBundleId: '',
// appCategoryType: '',
// osxSign: '',
// protocol: 'myapp://path',
// Window only
// win32metadata: { ... }
}
},
// leave this here for Quasar CLI
starterKit: '1.0.2'
}
}
Спасибо всем кто осилил, нужна критика)
Средний
