Vue use some tips

We can not change history, but we can change the future -. Forget where they have seen

Hands

Recently been using Vue development, and not very serious period to sum up, this is just a more profound impression on their own point to name a few.

Router key

Since Vue will reuse the same components, e.g. / page? Id = 1 => / page? Id = 2 where such jump, the components will not be performed created, mounted hook function, etc., typically at a solution is as follows.

watch

watch: {
  $route(to, from) {
    // XXXX
  }
}

Router-view bind to a unique key

// $route.fullPath: 完成解析后的 URL，包含查询参数和 hash 的完整路径
<router-view :key="$route.fullPath"></router-view>

Tell me what principle can the definition of key network of: https://cn.vuejs.org/v2/api/index.html#key, of course, if there is no similar scene is not recommended, after all, still have to pay each time a rendering Diudiu performance cost.

$attrs

The property with many people, not many people may know, I am also implement custom input component when, Google to.
Official explanation: contains the parent scope not be recognized as a prop (and obtain) the binding properties (except for class and style). When a component does not declare any prop, where the parent scope will include all of the binding (and except for class style), and can be v-bind = "$ attrs" Incoming internal components - when you create a high-level components very useful.
Example:

<template>
  <input
		class="u-input"
    v-bind="$attrs"
    @input="handleInput"
    @focus="handleFocus"
    @blur="handleBlur"
    @change="handleChange"
  >
</template>

This is a simple input device package using the v-bind = "$ attrs" can directly reference parameters of the assembly where all incoming input assembly, no need to define a bunch of props.

Error trapping

In general, our aim is to do nothing more than to catch the error of a generic error handling, or to do so on the acquisition front-end error log.
So how do we capture the Vue which it wrong?

Global Capture: errorHandLer

errorHandLer: uncaught error handling specified component during rendering and viewing. When the handler is called, you may get an error message and Vue instance.
Specific Usage:

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
}

Component Capture: errorCaptured

errorCaptured: When capturing a mistake from the sons of assembly is called. This hook will receive three parameters: error object, occurrence of an error component instance and a string containing the error information source. This hook can return false to prevent the error continues to spread upwards.
errorCaptured is a hook function, in the case did not stop the spread, the error will still be caught global errorHandLer, so this is more suitable for real-time processing errors, somewhat similar in nature try catch.

to sum up

Here are just a few simple records, do not understand the development process of their own experience, if you have the wrong place, welcome to correct me message ~