Have a dream, have dry goods, wechat search [big move world] pay attention to this in the wee hours of the morning is still brushing the dishes of the wisdom.

In this paper, making github.com/qq449245884… Has been included, there are a line of big factory interview complete test points, information and my series of articles.

To be honest, reading documentation isn’t something that most of us enjoy, but when working with an evolving modern front-end framework like Vue, where every new release changes, it’s nice to have missed out on some of the new and useful features that came later.

Today, Dishwashing takes a look at some of the more interesting but less popular features. Remember, all of this is part of the official Vue documentation.

1. Process the loading status

In a large project, we might want to break components into small pieces and load them from the server only when needed. To make this easier, Vue allows us to define the component as a factory function, parsing the component definition asynchronously. Vue fires the factory function only when the component needs to be rendered and caches the result for later rerendering. What’s new in version 2.3 is that an asynchronous component factory can also return objects in the following format.

Const AsyncComponent = () => ({// The component to load (should be a 'Promise' object) component: Import ('./ myComponent.vue '), // Loading: LoadingComponent error: ErrorComponent, // Shows how long the component is delayed when loading. The default value is 200 (milliseconds) delay: 200, // If a timeout is provided and the component loading has timed out, the component used when the loading failed is used. Default is: 'Infinity' timeout: 3000})Copy the code

With this approach, we have additional options, including load and error status, component fetching delays, and timeouts.

2. Byv-onceCreate low overhead static components

Rendering normal HTML elements in Vue is very fast, but sometimes you might have a component that contains a lot of static content. In this case, we can add a V-once attribute to the root element to ensure that the content is only evaluated once and then cached, like this:

Vue.component('terms-of-service', {
  template: `
    <div v-once>
      <h1>Terms of Service</h1>
      ... a lot of static content ...
    </div>
  `
})
Copy the code

For more details, see the official website: cn.vuejs.org/v2/guide/co…

3. Recursive components

Components can call themselves in their own templates. But they can only do this with the name option:

name: 'unique-name-of-my-component'
Copy the code

When you register a component globally using Vue.com Ponent, the global ID is automatically set to the component’s name option.

Vue.component('unique-name-of-my-component', {
  // ...
})
Copy the code

A recursive component can lead to an infinite loop if it doesn’t:

name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'
Copy the code

Components like the one above will result in a “Max stack size exceeded” error, so make sure the recursive call is conditional (for example, using a V-if that will eventually get false).

4. Inline templates

When the special inline-template attribute appears on a child component, the component will use its contents as a template, rather than as the content to be distributed. This makes template writing more flexible.

<my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-component>
Copy the code

Inline templates need to be defined within the DOM element to which Vue belongs.

However, inline-template makes the scope of the template more difficult to understand. So as a best practice, select the template option within the component or a

5. Dynamic instruction parameters

The parameters of an instruction can be dynamic. For example, in v-myDirective :[argument]=”value”, the argument argument can be updated based on component instance data! This allows custom instructions to be used flexibly in the application.

For example, you want to create a custom directive that pins elements to a page with a fixed layout. We can create a custom instruction that updates the pixel value of the vertical position via the instruction value like this:

<div ID ="dynamicexample"> <h3>Scroll down inside this section ↓</ H3 > <p V-PIN :[direction]="200">I am pinned onto the data page at 200px to the left.</p> </div> Vue.directive('pin', { bind: function (el, binding, vnode) { el.style.position = 'fixed' var s = (binding.arg == 'left' ? 'left' : 'top') el.style[s] = binding.value + 'px' } }) new Vue({ el: '#dynamicexample', data: function () { return { direction: 'left' } } })Copy the code

6. Event & key modifier

Vue provides prefixes for.passive,.capture, and.once event modifiers that can be used on:

The modifier The prefix
.passive &
.capture !
.once ~
. The capture. Once or once. The capture ~!

Such as:

on: { '! click': this.doThisInCapturingMode, '~keyup': this.doThisOnce, '~! mouseover': this.doThisOnceInCapturingMode }Copy the code

For all other modifiers, the private prefix is not required, because you can use the event method in the event handler:

The modifier Handles equivalent operations in a function
.stop event.stopPropagation()
.prevent event.preventDefault()
.self if (event.target ! == event.currentTarget) return
Keys:.enter.13. if (event.keyCode ! == 13) returnFor other key modifiers, you can set13Change to another keycode)
Modifier keys:.ctrl..alt..shift..meta if (! event.ctrlKey) return(will bectrlKeyModify toaltKey,shiftKeyormetaKey)

7. Dependency injection

In Vue, there are several ways for two components to communicate, all of which have advantages and disadvantages. A new approach introduced in version 2.2 is to use dependency injection with Provide/Inject.

This pair of options, used together, allows an ancestor component to be a dependency injector for all of its descendants, no matter how deep down the component hierarchy, as long as they are on the same parent chain. If you’re familiar with React, this is very similar to the context function of React.

// parent component providing 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// child component injecting 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}
Copy the code

That’s it for today. Is that it?

~ over, I am a dishwashing wisdom, the epidemic can only at home LoL.

The possible bugs after the deployment of code can not be known in real time, in order to solve these bugs, spent a lot of time log debugging, here by the way to recommend you a good BUG monitoring toolFundebug.

communication

The article is updated every week. You can search “Big Move World” on wechat for the first time to read and hurry up (one or two articles earlier than the blog yo). This article is GitHub github.com/qq449245884… Welcome to Star and improve. You can refer to the exam site for review during the interview. In addition, you can follow the public account and reply welfare in the background, so that you can see the welfare, you know.