This is the seventh day of my participation in the August More text Challenge. For details, see:August is more challenging

Which is the higher priority, V-if or V-for?

<div v-for="item in dataList" v-if="isShow"></div>
Copy the code

Can write their own a piece of code, and then to the breakpoint debugging, will go to the source code compiler/codegen/index, js this file, finally will find:

V-for will execute before V-if, and even if you write v-if after V-for it will execute V-for first, so you can put a layer around it so that v-if doesn’t execute V-for first, or you’ll waste a lot of performance.

Two, vUE componentization understanding

1. In the source code (SRC \core\global-api\assets.js), The Ue – Loader will compile the template to render and export the component configuration object

2, components can be independent reusable code, can improve development efficiency

3, Components can be classified as: page components, general components, business components

4, vUE components are based on configuration, usually written components are component configuration rather than components, the framework will generate the constructor, through the VueCompontent to achieve

5. Common methods for components: props, custom events, slots, etc

6. Develop components with high cohesion, low coupling, and one-way data flow

Why does vUE’s component template have only one root element

When you instantiate a vue, you can only set one entry. If you set multiple Vues, you will not know which is the class

var vm = new Vuw({
    el: "#app"
});
Copy the code

2. The elements under template in the single-file component are actually the root data under the tree structure, and template is hidden and not displayed in the page; Template can also be written anywhere (head,body,script). Any HTML content in the template tag is invalid and must be retrieved using innerHTML

3. The DIff algorithm used in vue source code requires only one root element, patchVnode() in patch.js;

Iv. Vue performance optimization method

1. Routes are loaded lazily

const router = new VueRouter({ 
    routes: [          { path: '/index', component:() => import('./index.vue') }   
    ]
})
Copy the code

2. Keep-alive cache page

<template> 
     <div id="app">           <keep-alive> <router-view/></keep-alive>      </div> </template>
Copy the code

3. V-show reuses Dom

<template> <div class="cell"> <div v-show="value" class="on"> <showMore :n="999"/> </div> <section v-show="! value" class="off"> <showMore :n="999"/> </section> </div> </template>Copy the code

V-show is better than V-if for larger loops

4. Avoid using v-if in v-for

As mentioned in the first question above, v-for is executed before V-if, so it consumes unnecessary performance. If the dataList below is a large JSON array, it will consume performance unnecessarily

<template> <div v-if="dataList. Length > 0" v-for="item in dataList">{{item}}</div> </template> <script> Export default {data() {return {dataList: [1,2,3,4,5,6,7,8]}}} </script>Copy the code

If you are presenting a long list of multiple data, you can use virtual scrolling to render only a small part of the display area

<recycle-scroller class="items" :items="items" :item-size="50" > <template v-slot="{item}"> <FetchItemView :item="item" @vote="voteItem(item)"/> </template> </recycle-scrollerCopy the code

5. Event destruction

created() {
     this.timer = setInterval(this.refresh, 2000)},beforeDestroy() { 
     clearInterval(this.timer) }
Copy the code

When a vue component is destroyed, all of its directives and event listeners are automatically unbound, but only for the current component’s events

6. Image loading is lazy

If there are many pictures on the page and the loading speed is required, we can display the areas that need to be displayed, and do not load the areas that are not displayed until the scrolling time, similar to the function of scrolling page loading on mobile phones

<img v-lazy=".. Static /images/abc.png"/> // See vue-lazyloadCopy the code

V. Communication between VUE components

For example:

A. ue-B. ue is a parent and child component,

B.vue and C.vue are sibling components,

A ue and D. ue/E. ue are intergenerational and cross-layer components

Common communication methods are as follows:

Props can be used for parent and child components and passed down to the child components

Emit /emit/emit/on event bus. Emit /emit/emit/on event bus. Emit /emit/emit/on event bus

3. All pages of VUEX can be accessed, because VUEX implements one-way data flow, and states are used to store data globally. As long as data is modified, modification information must be submitted through Mutation, and Mutation has subscriber mode, which can call the update of STATES data to external plug-ins. Render to the view according to the changes in state

4, the parent/parent/parent/children and ref ref used in Dom elements to the Dom elements, used in the component will be pointing to a component instance, it is mainly used for access to the father and son components

5, attrs/attrs/attrs/listeners are often used to cross layer components communication, deposited in the attrs is binding in the parent component attributes of the props, deposited in the attrs is binding in the parent component attributes of the props, deposited in the attrs is binding in the parent component of props attribute, Listeners hold non-native events bound in the parent component

Provide/Inject is a high-level plug-in/component library that can be used on cross-layer components, but is not responsive

7. The event child component sends messages to the parent component through events and passes them upward to the parent component

Write so much today, leave a point to write tomorrow, otherwise want content every day very tired, day more really not easy, every day very busy still insist to write, refueling, feel the power that nuggets give!