Optimal use VUE.js?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
19 views
Greetings to all!

I started to understand vuejs and quasar to make a simple app, but after I compiled, in anroid Studio and on the phone app catches are great friezes, like very heavy. Not far to seek, either in my code on vue.js or due to the curve configuration of the quasar.

And would therefore like to hear criticism on my code vuejs, may be still due to the curvature of its wild, I happen friezes on the application.

Here I have the routing and connection of components:
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') } ]


Following are the feature page, for example /cars, here I will show the template, where I simply have:
import from axios 'axios'; import { Cookies } from 'quasar'; import { Loading } from 'quasar'; export default { name: 'CarsList', data () { return { selectOptionsWeight: [ { label: 'Any', value: 0 }, { label: '1 ton', value: '1' }, { label: 'From 1T to 1.5 t', value: '1.5' }, { label: 'From 1.5 t to 3T', value: '3' } ], selectOptionsVolume: [ { label: 'Any', value: 0 }, { label: 'up to 10 m3', value: '10' }, { label: 'From 10m3 to 15m3', value: '15' }, { label: 'From 15m3 to 30m3', 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: 'Search cars' } }, 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) { //the radius of the Earth 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; //distance between two coordinates in meters 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(){ // set the headers in the toolbar let title = document.getElementById('title-toolbar'); let subTitle = document.getElementById('sub-title-toolbar'); title.textContent = 'Find a car'; subTitle.textContent = 'taxi truck'; this.$axios.get(`here is the query to the API`) .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 is not so important, I'm interested in vuejs, super poorly written? Can freezes due to not proper use of methods vuejs?

2) Well, the suspicion of the lag due to the quasar, it is possible many connected components (if anyone knows), can it be so? Will show my config:
Config
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 a 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: 'PWA Best 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' } }
by | 19 views

1 Answer

0 like 0 dislike
`component: () => import('pages/index')` - this is called "lazy loading", right?
if Yes, then here is a possible cause of brakes.

and so - I personally do not see anything special in the code. and methods - they are small and simple - then there can be brakes.
by

Related questions

0 like 0 dislike
1 answer
asked Jun 4, 2019 by OlegOleg1980
0 like 0 dislike
2 answers
0 like 0 dislike
1 answer
asked Jun 14, 2019 by s24344
0 like 0 dislike
2 answers
0 like 0 dislike
1 answer
110,608 questions
257,187 answers
0 comments
40,796 users