1. V-if and V-for priorities

When v-if and V-for are used together, v-for has a higher priority than v-if. If they are used together, v-if will be added to each element, which may cause performance problems. Therefore, v-if and V-for are not recommended to be used together in the same tag.

Solution: 1. Use ul and LI together, or render the child tag under the parent tag.

<ul v-if = "state">
  <li v-for = "(item,id) in list" :key="id"></li>
</ul>
Copy the code

2. Use filters to move judgments in V-IF to computed attributes.

<ul> <li v-for"(item,id) in formList" :key = "id"></li> </ul> computed: { formList: function(){ return this.list.filter(function(item){ return item.state; }}})Copy the code

Vue route guard

To: destination route from: current route Next () jump must call next(false); // next(true); / / continue next ('/login ') / / what's the next ({path: '/ login', params: {}, query: {}}) / / bring some goodsCopy the code

Global front-guard beforEach

The router. BeforeEach ((the to, from, next) = > {document. The title = to. Meta. Title | | 'movie'; if (to.meta.needLogin && ! $store.state.isLogin) { next({ path: '/login' }) } else { next() } })Copy the code

Exclusive routing guard beforeEnter Use the same method as global guards. The difference is that global guards work globally, exclusive routing guards only work on guarded routes

// Login module Path: '/login', Component: () => import('@/views/login'), beforeEnter: (to, from, next) => { if (to.meta.needLogin && ! $store.state.isLogin) { next({ path: '/login' }) } else { next() } }Copy the code

Component route guard

// Internal hook beforeRouteEnter (to, from, next) { Can!!!! }, beforeRouteUpdate (to, from, next) {// Called when the current route changes but the component is being reused. For example, For a path /foo/:id with dynamic parameters, the component instance will be reused as // renders the same foo component when jumping between /foo/1 and /foo/2. And the hook will be called in that case. // Can access component instance 'this'}, beforeRouteLeave (to, from, next) {// can access component instance' this'}Copy the code

Note: The route is guarded exclusively by the path internal guard and guarded by the Component

Life cycle usage scenarios

BeforeCreate data and $el are not initialized

A Created instance has been created because it is the first trigger to make requests for data and resources. Asynchronous requests can also be invoked here

The Mounted instance is mounted. DOM operations can be performed on it

BeforeUpdate can further change the state in this hook without triggering additional rerendering.

Updated performs DOM-dependent operations. In most cases, however, you should avoid changing the state during this period, as this can lead to an infinite update loop. This hook is not called during server-side rendering.

BeforeDestroy: You can make a confirmation box that acknowledges the stop event

Destroyed performs optimization operations, clears timers, and unbinds events

nextTick:

When the page comes out, the static resources may not have been configured. In this case, use nextTick to delay the callback and immediately manipulate the DOM after updating the data. After the macro task is executed, perform all the micro tasks before rendering the page.

Why vuex?

  1. The update of the parent prop of vUE one-way data flow will flow down to the child components. If the components are deeply nested, it is cumbersome to pass down through the props layer, and the data is likely to be changed during the transmission, resulting in data disorder

2. If the project is very large, the components will share the same state, so use vuex

How to configure cross-domain in VUE?

How does the Vue framework implement object and array listening?

Use of the router-view component of VUE

What can I do if the vuEX refresh page data is lost

Differences between VUe3.0 and VUe2.0

1, the performance improvement is smaller and faster; Support tree shaking optimization; Support for Fragments and cross-component rendering; Support for custom renderers.

With the exception of the render function API and the scoped-slot syntax, the most significant changes will be to the format of the virtual DOM in the render function

(3) Virtual DOM Rewrite reduces runtime overhead with Virtual DOM Rewrite. The rewrite will include more efficient code to create virtual nodes

In version 2.x, when you add a property to an object using vue.set, all the watcher’s of that object are re-run. In version 3.x, only the watcher’s that depend on that property are re-run

5. The lazy observation 2.x version is done by default, and observers are created for the data in the first place regardless of its size. When the data is large, this can cause significant performance pressure when the page loads. The 3.x version will only create observers for “data that was used to render the initial visible portion”, and 3.x observers are more efficient

New TypeScript and PWA support has been added to 6.0 and 3.0