Analysis of the reason why vue uses fengMap slow speed

Reasons for slow speed of using fengMap

Objects in fengMap cannot be placed in vue data  Use lets to declare variables in script to avoid the problem of too slow

import FengMap from '@/components/Geo/fengmap'
let map = {
    fengMap: undefined,
    lastCheckModel: undefined,
}

Error code

export default {
  data() {
    return {
            map: {
                fengMap: undefined,
                lastCheckModel: undefined,
            }
        }
    }
}

Some tips for using vue

During the use of vue, you will encounter various scenarios. When you use it normally, you will feel that it is nothing, but maybe it can be more efficient and beautiful to develop it.

1. Multi-chart resize event decentralization

1.1 General

Sometimes we encounter a scenario where there are several charts in a component. When the browser resizes, we want the chart to be resize, so we will write in the parent container component:

mounted() {
 setTimeout(() =>  = () => {
 this.$refs.()
 this.$refs.()
 // ... 
 }, 200)
destroyed() {  = null }

In this way, if the child chart component is not on the same page as the parent container component, the state of the child component will be placed in the parent component for management. For convenience of maintenance, we naturally hope that the events and state of the child component will be maintained by ourselves. In this way, when adding and deleting components, there is no need to modify the parent component one by one.

1.2 Optimization

Here we use lodash's throttle function, which can also be implemented by yourself. This article also has the implementation of throttle. Take Echarts as an example, in each chart component:

computed: {
 /**
 * Chart DOM
 */
 chartWrapperDom() {
 const dom = ('consume-analy-chart-wrapper')
 return dom && (dom)
 },
 /**
 * Chart resize throttling, lodash is used here, you can also use setTimout to achieve throttling
 */
 chartResize() {
 return _.throttle(() =>  && (), 400)
 }
},
mounted() {
 ('resize', )
},
destroyed() {
 ('resize', )
}

2. Global filter registration

2.1 General situation

How to register a filter for official:

// register('my-filter', function (value) {
 // Return the processed value})
// getter, return the registered filtervar myFilter = ('my-filter')

However, the words written in a dispersed manner are not beautiful, so they can be extracted into separate documents.

2.2 Optimization

We can extract to separate files and then register in the entry using /src/common/

let dateServer = value => (/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3') 
export { dateServer }
/src/
import * as custom from './common/filters/custom'
(custom).forEach(key => (key, custom[key]))

Then you can happily use these global filters we defined in other .vue files

<template>
 <section class="content">
 <p>{{ time | dateServer }}</p> <!-- 2016-01-01 -->
 </section>
</template>

<script>
 export default {
 data () {
 return {
 time: 20160101
 }
 }
 }
</script>

3. Global component registration

3.1 General situation

Scenarios where components need to be used:

<template>
 <BaseInput v-model="searchText" @="search"/>
 <BaseButton @click="search">
 <BaseIcon name="search"/>
 </BaseButton>
</template>

<script>
 import BaseButton from './baseButton'
 import BaseIcon from './baseIcon'
 import BaseInput from './baseInput'
 export default {
 components: { BaseButton, BaseIcon, BaseInput }
 }
</script>

We have written a bunch of basic UI components, and every time we need to use these components, we have to import first and declare components. It is very cumbersome. Here we can use the unified registration form

3.2 Optimization

We need to use the magic webpack to create our own module context using the () method to achieve automatic dynamic require components. This method requires 3 parameters: the folder directory to be searched, whether it should also search for its subdirectories, and a regular expression matching the file. We add a file called in the components folder, and use webpack to dynamically package all the required basic components. /src/components/

import Vue from 'vue'
/**
 * First letter capitalization
 * @param str string
 * @example heheHaha
 * @return {string} HeheHaha
 */
function capitalizeFirstLetter(str) {
 return (0).toUpperCase() + (1)
}
/**
 * Take component names for components that meet the 'xx/' component format
 * @param str fileName
 * @example abc/bcd/def/
 * @return {string} BasicTable
 */
function validateFileName(str) {
 return /^\S+\.vue$/.test(str) &&
 (/^\S+\/(\w+)\.vue$/, (rs, $1) => capitalizeFirstLetter($1))
}
const requireComponent = ('./', true, /\.vue$/)
// Find the file named .vue under the component folder. If the file name is index, then take the name in the component as the registered component name().forEach(filePath => {
 const componentConfig = requireComponent(filePath)
 const fileName = validateFileName(filePath)
 const componentName = () === 'index'
 ? capitalizeFirstLetter()
 : fileName
 (componentName,  || componentConfig)
})

Here is the folder structure:

components
│ 
├─BasicTable
│ 
├─MultiCondition
│ 

Here we judge the component name. If it is an index, the name attribute in the component will be processed as the registered component name. Therefore, the last registered components are: multi-condition and basic-table. Finally, we import ‘components/’ in the middle, and then we can use these basic components anytime and anywhere without manually introducing them~

4. Component reuse of different routes

4.1 Scene Restore

When vue-router jumps from /post-page/a to /post-page/b in a scene. Then we were surprised to find that the data was not updated after the page jumped? ! The reason is that vue-router "intelligently" discovers that this is the same component, and then it decides to reuse the component, so the method you wrote in the created function is not executed at all. The usual solution is to listen for changes in $route to initialize the data, as follows:

data() {
 return {
 loading: false,
 error: null,
 post: null
 }
},
watch: {
 '$route': { // Use watch to monitor whether it is the same route handler: 'resetData',
 immediate: true
 }
},
methods: {
 resetData() {
  = false
  = null
  = null
 (this.$)
 },
 getPost(id){ }
}

4.2 Optimization

So how can we achieve this effect? ​​The answer is to add a different key to router-view, so that even a public component will definitely recreate the component as long as the URL changes.

<router-view :key="$"></router-view>

You can also add + +new Date() timestamp after it to ensure uniqueness.

5. Advanced Components

5.1 General

// Parent component<BaseInput :value="value"
  label="password"
  placeholder="Please fill in your password"
  @input="handleInput"
  @focus="handleFocus">
</BaseInput>
// Subcomponents<template>
 <label>
 {{ label }}
 <input :value=" value"
  :placeholder="placeholder"
  @focus="$emit('focus', $event)"
  @input="$emit('input', $)">
 </label>
</template>

5.2 Optimization

1 We must declare explicitly in the child component's props from the parent component to the child component's props. In this way, our child components need to declare a lot of props every time, and we can actually use $attrs to pass directly from the parent to the child without declaration. The method is as follows:

<input :value="value"
 v-bind="$attrs"
 @input="$emit('input', $)">

$attrs contains attribute bindings in the parent scope that are not recognized (and obtained) as props (except class and style). When a component does not declare any props, it contains all parent scope bindings and can be passed into internal components via v-bind="$attrs" - useful when creating higher-level components.

2 Note that the child component's @focus="$emit('focus', $event)" actually did nothing, just passed the event back to the parent component. It is actually similar to the above, and there is no need to explicitly declare it:

<input :value="value"
 v-bind="$attrs"
 v-on="listeners"/>
computed: {
 listeners() {
 return {
 ...this.$listeners,
 input: event =>
 this.$emit('input', )
 }
 }
}

$listeners contains the v-on event listener in the parent scope (excluding .native modifiers). It can be passed into internal components via v-on="$listeners" - very useful when creating higher-level components.

It should be noted that since our input is not the root node of the BaseInput component, by default, the feature binding of the parent scope that is not considered props will "fall back" and be applied to the root element of the child component as a normal HTML feature. So we need to set inheritAttrs: false , these default behaviors will be removed, and the optimization of the above two points will be successful.

6. The route is lazy to load according to the development status

6.1 General

Generally, when we load components in the route:

import Login from '@/views/'
export default new Router({
 routes: [{ path: '/login', name: 'Login', component: Login}]
})

When you need to lazy-loading, you need to change the routes component to () => import(’@/views/’) one by one, which is very troublesome.

As your project pages become more and more, using lazy-loading in the development environment will become inappropriate, and each time you change the code, it will become very slow to trigger hot updates. Therefore, it is recommended to only use the routing lazy loading function in the generator environment.

6.2 Optimization

According to Vue's asynchronous components and Webpack's code segmentation function, lazy loading of components can be easily achieved, such as:

const Foo = () => import('./')

When distinguishing between development environment and production environment, you can create two new files in the routing folder: _import_production.js

 = file => () => import('@/views/' + file + '.vue')

_import_development.js, this writing method vue-loader version is at least v13.0.0 or above

 = file => require('@/views/' + file + '.vue').default

And in the router/ file that sets the route:

const _import = require('./_import_' + .NODE_ENV)
export default new Router({
 routes: [{ path: '/login', name: 'Login', component: _import('login/index') }]
})

In this way, components are not lazy to load in the development environment, but lazy to load in the production environment

7 vue-loader tips

vue-loader is a webpack loader that processes *.vue files. It provides a wealth of APIs, some of which are practical but rarely known. For example, preserveWhitespace and transformToRequire that we will introduce next

7.1 Use preserveWhitespace to reduce file volume

Sometimes when we write templates, we don’t want spaces between elements and elements, and we might write them like this:

<ul>
 <li>1111</li><li>2222</li><li>333</li>
</ul>

Of course, there are other ways, such as setting the font-size: 0 of the font, and then setting the font size for the required content separately, the purpose is to remove spaces between elements. In fact, we can completely realize this requirement by configuring vue-loader.

{
 vue: {
 preserveWhitespace: false
 }
}

Its purpose is to prevent blank content from being generated between elements, and is represented by _v(" ") after the Vue template is compiled. If there are too many templates in the project, they will still occupy some file size. For example, after Element configures this property, the file size is reduced by nearly 30Kb without compression.

7.2 Using transformToRequire no longer requires writing pictures as variables

In the past, when writing Vue, I often wrote such code: pass the image to a variable in advance and then to the component.

<template>
 <div>
 <avatar :default-src="DEFAULT_AVATAR"></avatar>
 </div>
</template>

<script>
 export default {
 created () {
  this.DEFAULT_AVATAR = require('./assets/')
 }
 }
</script>

In fact, after configuring transformToRequire, you can configure it directly, so that the vue-loader will automatically require the corresponding attribute and then pass it to the component.

{
 vue: {
 transformToRequire: {
  avatar: ['default-src']
 }
 }
}

So our code can simplify a lot

<template>
 <div>
 <avatar default-src="./assets/"></avatar>
 </div>
</template>

Under the webpack template of vue-cli, the default configuration is:

transformToRequire: {
 video: ['src', 'poster'],
 source: 'src',
 img: 'src',
 image: 'xlink:href'
}

You can learn from it and make similar configurations

vue-loader also has many practical APIs, such as the recently added custom blocks. Those who are interested can search in the document.

8. render function

In some scenarios, you may need the full programming ability brought by the render render function to solve problems that are not easy to solve, especially when dynamically selecting the generated tag and component types.

8.1 Dynamic Tags

1. General situation

For example, a scenario where tags are generated based on props

<template>
 <div>
 <div v-if="level === 1"> <slot></slot> </div>
 <p v-else-if="level === 2"> <slot></slot> </p>
 <h1 v-else-if="level === 3"> <slot></slot> </h1>
 <h2 v-else-if="level === 4"> <slot></slot> </h2>
 <strong v-else-if="level === 5"> <slot></slot> </stong>
 <textarea v-else-if="level === 6"> <slot></slot> </textarea>
 </div>
</template>

Among them, level is a variable in data. You can see that there is a lot of repeated code here. If the logic is complicated, and some bindings and judgments are even more complicated, you can use the render function to judge the tags to be generated.

2. Optimization

Using the render method to generate corresponding labels based on parameters can avoid the above situation.

<template>
 <div>
 <child :level="level">Hello world!</child>
 </div>
</template>

<script type='text/javascript'>
 import Vue from 'vue'
 ('child', {
 render(h) {
  const tag = ['div', 'p', 'strong', 'h1', 'h2', 'textarea'][]
  return h(tag, this.$)
 },
 props: {
  level: { type: Number, required: true } 
 }
 }) 
 export default {
 name: 'hehe',
 data() { return { level: 3 } }
 }
</script>

8.2 Dynamic Components

Of course, there are many uses of the render function. For example, if you want to use dynamic components, you can also use the render function in addition to using :is

<template>
 <div>
 <button @click='level = 0'>whee</button>
 <button @click='level = 1'>Ha ha</button>
 <hr>
 <child :level="level"></child>
 </div>
</template>

<script type='text/javascript'>
 import Vue from 'vue'
 import Xixi from './Xixi'
 import Haha from './Haha'
  
 ('child', {
 render(h) {
  const tag = ['xixi', 'haha'][]
  return h(tag, this.$)
 },
 props: { level: { type: Number, required: true } },
 components: { Xixi, Haha }
 })
  
 export default {
 name: 'hehe',
 data() { return { level: 0 } }
 }
</script>

The above is personal experience. I hope you can give you a reference and I hope you can support me more.