You may use these 7 Vue modes frequently! But now it's very helpful to you!

There are dreams and dry goods. search 1611da61111b4b [Great Move to the World] still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

To be honest, reading documentation is not something that most of us like, but when using a modern front-end framework like Vue that is constantly evolving, every new version will change. We are very cute and have missed some of the new ones that were introduced later. And easy-to-use functions.

Today, I will take everyone to take a look at those interesting but not-so-popular features. Remember, all of these are part of the official Vue document .

1. Handling the loading status

In large projects, we may need to divide components into smaller pieces and load them from the server only when needed. To make it easier to do this, Vue allows us to define the component as a factory function to parse the component definition asynchronously. Vue will only trigger the factory function when the component needs to be rendered, and cache the result for later re-rendering. The new content of version 2.3 is that the asynchronous component factory can also return objects in the following format.

const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

Using this method, we have additional options, including loading and error status, delay and timeout of component acquisition.

2. Create low-overhead static components v-once

Rendering ordinary HTML elements is very fast in Vue, but sometimes you may have a component that contains a lot of static content. In this case, we can add the v-once attribute to the root element to ensure that the content is only calculated 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>
  `
})

For more details, please see the website: 1611da61111ca0 https://cn.vuejs.org/v2/guide/components-edge-cases.html

3. Recursive components

Components can call themselves in their own templates. But they can only do this name

name: 'unique-name-of-my-component'

When you Vue.component , the global ID will be automatically set as the component's name option.

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

A little carelessness, recursive components may lead to an infinite loop:

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

Components similar to the above will cause the “max stack size exceeded” error, so make sure that the recursive call is conditional (for example, use a false that v-if ).

4. Inline templates

When inline-template this particular attribute the event on a sub-component, this component will be used as a template inside their content, rather than as content is distributed. This makes the writing of templates 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>

The inline template needs to be defined in the DOM element that Vue belongs to.

However, inline-template makes the scope of the template more difficult to understand. So as a best practice, please select the template <template> element in the .vue file to define the template.

5. Dynamic command parameters

The parameters of the instruction can be dynamic. For example, in v-mydirective:[argument]="value" , the argument parameter can be updated according to the component instance data! This allows custom instructions to be used flexibly in applications.

For example, you want to create a custom instruction to fix elements on the page through a fixed layout. We can create a custom instruction that updates the vertical position pixel value by 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 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'
    }
  }
})

6. Event & key modifier

For the .passive , .capture and .once , Vue provides corresponding prefixes that can be used on:

Modifier	Prefix
.passive	&
.capture	!
.once	~
.capture.once or .once.capture	~!

E.g:

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

For all other modifiers, private prefixes are not necessary, because you can use event methods in event handlers:

Modifier	Equivalent operations in processing functions
.stop	event.stopPropagation()
.prevent	event.preventDefault()
.self	if (event.target !== event.currentTarget) return
Button: .enter , .13	if (event.keyCode !== 13) return (For other key modifiers, you can change 13 to another key code)
.ctrl keys: 0611da61111f28, .alt , .shift , .meta	if (!event.ctrlKey) return (the ctrlKey are modified to altKey , shiftKey or metaKey )

7. Dependency injection

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

This pair of options are used together to allow an ancestor component to act as a dependency injector for all its descendants, no matter how deep the component hierarchy is, as long as they are on the same parent chain. If you are familiar with React, this is very similar to React's contextual function.

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

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

That's it for today, that's it?

~End, I'm the wise man, and the epidemic can only be LoL at home.

possible bugs after 1611da61112003 code deployment cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

comminicate

The article is continuously updated every week, and you can search for "Great Migration World" on WeChat to read and update as soon as possible (one or two earlier than the blog). This article has been included on https://github.com/qq449245884/xiaozhi I have sorted out a lot of my documents. Welcome to Star and improve it. You can refer to the test center for review for interviews. Also, pay attention to the account. Reply to 1611da61112055 welfare background, you can see the welfare, you know.