Interview-vue related knowledge summary

Posted May 26, 20207 min read

1. The difference between calculated and watch in Vue

Calculated attribute computed:

1 . Support cache, only recalculate if the dependent data changes
2 . Asynchronous is not supported. It is invalid when there is an asynchronous operation in the calculated and cannot monitor the data changes.
3. The calculated attribute value will be cached by default. The calculated attributes are cached based on their responsive dependencies, that is, the calculated value based on the data in the props declared in the data or passed by the parent component.
4 . If an attribute is calculated from other attributes, this attribute depends on other attributes, it is a many-to-one or one-to-one, generally calculated
5. If the calculated attribute property value is a function, then the default will go to the get method; the return value of the function is the property value of the property; in the calculated, the property has a get and a set method, when the data changes, call the set method .
1402448-20190809154932198-1444047098.png

Listening property watch:
  1. Does not support cache, data changes, will directly trigger the corresponding operation;
  2. watch supports asynchronous;
  3. The monitoring function receives two parameters, the first parameter is the latest value; the second parameter is the value before input;
    4 . When an attribute changes, the corresponding operation needs to be performed; one-to-many;
    5 . The monitoring data must be the data in the props declared in the data or passed by the parent component. When the data changes, other operations are triggered. The function has two parameters,
    Immediate:component loading immediately triggers callback function execution,
    Deep:Deep monitoring, in order to discover changes in the internal value of the object, it is used for complex types of data, such as the change of the content of the object in the array. Note that it is not necessary to monitor the change of the array. Note:deep can not monitor the changes of the array and the addition of objects. Refer to the vue array mutation, and only be triggered in a reactive manner will be monitored.
    1402448-20190809160441362-1201017336.png
    The monitored object can also be written as a string
    1402448-20190809160648619-505189772.png

Second, vue-router routing hook

The routing hook is mainly used to intercept the navigation. In the hook, you can jump to the specified page or cancel the jump.

  • Changes in routing parameters or queries will not trigger navigation guards! . \ * You can watch the $route object to respond to these changes by watching, or use the beforeRouteUpdate component to guard.

1 . Global front guard

1.1 beforeEach
router.beforeEach((to, from, next) => {

})

When a navigation is triggered, the global front guards are called in the order created. The guard is executed asynchronously. At this time, the navigation is \ * waiting \ * until all guards resolve.

Each guard method receives three parameters:

  • to:where to go(route to be entered);
  • from:where to come from(route to leave);
  • next:If it is next(), it will jump to the route indicated by to; if the parameter is false, the navigation will be cancelled; if the parameter is an address or route object, it will be transferred to the specified address or object.
  • Make sure to call the next method, otherwise the hook will not be resolved. \ *

2 . Exclusive routing hook

2.1 beforeEnter
const router = new VueRouter({
    routes:[
        {
            path:'/foo',
            component:Foo,
            beforeEnter:(to, from, next) => {

            }
        }
   ]
})

3 . Component routing hook

3.1 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
data() {
    return {}
},
beforeRouteEnter(to, from, next) {
    //Called before the corresponding route rendering the component is confirmed, the component example this cannot be obtained, because before the guard executes, the component instance has not yet been created.
},
beforeRouteUpdate(to, from, next) {
    //Called when the route changes, but the component is reused. That is, when the routing parameter or query changes.
    //Example:For a path with a dynamic parameter/foo /:id, it is called when jumping from/foo/1 to/foo/2. Since the same component will be rendered, component instances will be reused. So this hook will be called in this case.
    //The component this can be accessed
},
beforeRouteLeave(to, from, next) {
    //Called when leaving the corresponding route of this component.
    //The component this can be accessed
}
  • beforeRouteEnter cannot access this, but you can access the component instance by passing a callback function to next, and the callback will be executed when the navigation is confirmed. And use the component instance as the parameter of the callback method.

    beforeRouteEnter(to, from, next) {

      next(vm => {
          //Access the component instance via vm
      })

    }

  • beforeRouteLeave is usually used to prohibit users from leaving suddenly before saving changes. The navigation can be cancelled by next(false).

Third, vue-router implements route lazy loading

When packaging and building an application, the Javascript package can become very large, affecting page loading. If we can divide the components corresponding to different routes into different code blocks, and then load the corresponding components when the route is accessed, it will be more efficient. Combined with Vue's asynchronous components and Webpack's code segmentation function, lazy loading of routing components can be easily achieved.

1. Definition


Is also called lazy loading, that is, loading when needed, with loading

2. Why is it needed


For single-page applications like vue, if there is no lazy loading of the application, the files packed with webpack will be abnormally large, causing too much content to be loaded when entering the homepage, the time is too long, and it will be white Screen, even loading is not conducive to user experience, and the use of lazy loading can divide the page, load the page when needed, can effectively share the loading pressure undertaken by the homepage, reduce the loading time of the homepage, enter the homepage without loading once Too many resources cause too much time.

3. How to achieve?


(1) The first way of writing:use AMD-style require, so it is even simpler:

Example:const Foo = resolve => require(\ ['./Foo.vue' ], resolve)

const routers = [
    {
    path:'/',
    name:'index',
    component:(resolve) => require(['./views/index.vue'], resolve)
    }

]

(2) The second way of writing:(using import)

Example:component:() => import('@/components/Two')

const Index =() => import(/* webpackChunkName:"group-home" */'@/views/index')
const routers = [
    {
        path:'/',
        name:'index',
        component:Index
    }

]

(3) The third way of writing:use webpack's unique require.ensure(). Note:require.ensure is Webpack's special syntax for setting code-split point

Example:components:r => require.ensure(\ [],() => r(require('@/components/Three')), 'group-home')

const Index = r => require.ensure([],() => r(require('./views/index')), 'group-home');
const routers = [
    {
        path:'/',
        name:'index',
        component:Index
    }

]

4. Group components into blocks


Sometimes we want to package all the components under a certain route in the same asynchronous chunk. Just use named chunk , a special comment syntax to provide chunk name(requires Webpack> 2.4)

const Foo = r => require.ensure([],() => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([],() => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([],() => r(require('./Baz.vue')), 'group-foo')

const Foo =() => import(/* webpackChunkName:"group-foo" */'./Foo.vue')
const Bar =() => import(/* webpackChunkName:"group-foo" */'./Bar.vue')
const Baz =() => import(/* webpackChunkName:"group-foo" */'./Baz.vue')

Webpack will combine any asynchronous module with the same block name into the same asynchronous block.

5. Note


  • The second shorthand commonly used
  • In the third kind, 'group-home' is to pack components into groups. Multiple components can be put into this group. When packaging, Webpack will package all asynchronous modules under the same chunk into one asynchronous block. inside.
    Vuex summary-what is it? What is it? How to use it?

\ ================================================= ====================

Four, Vuex summary-what is it? What is it? How to use it?

First of all Vuex is a state manager

  1. Why use it;

First of all, our vue is a unidirectional data flow;

  1. When we deal with a large amount of data, the method of passing parameters is very cumbersome for multi-layer nested components, and the state transfer between brothers is powerless;

  2. We often use parent and child components to directly reference or use events to change and synchronize multiple copies of the state; and the above modes are very fragile and will cause unmaintainable code;

So we take the shared state of the components and manage them in a global singleton mode.

  1. What are there?

state:The place where the data source is stored, corresponding to the data in the general Vue object;

getter:Equivalent to a calculated attribute; therefore, the return value of the getter will be cached according to its dependency, and will only be recalculated when its dependency value has changed;

mutation:only used to modify the data;

action:Mostly used to handle asynchronous operations;

module:Sometimes all the state of our application may be concentrated into a relatively large object. When the application is complex, the store will be very bloated, so we divide the store into modules, just like we create subfolders in the folder; the purpose is to facilitate management

  1. Data transmission process:

When the component performs data modification, we need to call Dispatch to trigger the method inside the action. Each method in the action will have a commit method. When the method is executed, the method inside the mutation is triggered by the commit to modify the data in the mutation. Each function will have a state parameter, so that the state data can be modified in the mutations. When the data is modified, the data that will be rendered to the page page will also change

Flow chart(from the official website):
1527872-20181119120243985-342169432.png

  1. When is it used?

For some large-scale SPA applications, we are using a large amount of data processing, considering how to better manage the state outside the component, we can consider using Vuex;