Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "sharing 36 skills of Vue development". Many people will encounter this dilemma in the operation of practical cases. Let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Preface

Pre-Alpha version of Vue 3.x. There should be Alpha, Beta and other versions later, and the official version 3.0 is not expected to be released until at least the first quarter of 2020.

Therefore, we should step up the foundation of Vue2.x before we come out.

The basic usage of Vue is easy to use, but there are many optimized ways to write it that you may not know. This article lists 36 vue development tips.

Continue to update after the follow-up Vue 3.x.

1.require.context ()

1. Scenario: if multiple components need to be imported into the page, the original writing method:

Import titleCom from'@ / components/home/titleCom'import bannerCom from'@ / components/home/bannerCom'import cellCom from'@ / components/home/cellCom'components: {titleCom,bannerCom,cellCom}

two。 In this way, a lot of repetitive code is written, which can be written with require.context.

Const path = require ('path') const files = require.context (' @ / components/home', false, /\ .vue $/) const modules = {} files.keys () .forEach (key = > {const name = path.basename (key, '.vue') modules [name] = files (key). Default | | files (key)}) components:modules

This method can be used no matter how many components are introduced into the page.

3.API method

It's actually webpack's method. Vue projects are generally based on webpack, so you can use the

Require.context (directory,useSubdirectories,regExp)

Receive three parameters:

Directory: indicates the directory to be retrieved

UseSubdirectories: whether to retrieve subdirectories

RegExp: the regular expression that matches the file, usually the file name

2.watch

2.1 Common usage

1. Scenario: the initial entry of the form requires a survey to query the interface getList (), and then the query will be re-queried if input is changed.

Created () {this.getList ()}, watch: {inpVal () {this.getList ()}}

2.2 execute immediately

two。 The abbreviations of immediate and handler attributes of watch can be used directly.

Watch: {inpVal: {handler: 'getList', immediate: true}}

2.3 Deep Monitoring

3.watch 's deep attribute, deep snooping, that is, listening for complex data types

Watch: {inpValObj: {handler (oldVal,newVal) {console.log (oldVal) console.log (newVal)}, deep:true}}

It is found that the values of oldVal and newVal are the same.

Because they index the same object / array, Vue does not keep a copy of the value before it was modified

Therefore, although deep monitoring can listen to the changes of the object, it cannot listen to the changes of the properties in the specific object.

3. 4 kinds of component communication

3.1 props

This should be a very attribute, that is, the attribute passed from father to son.

The props value can be an array or an object

/ / Array: it is not recommended to use props: [] / object props: {type:Number, / / pass in a value to define the type / / type value can be String,Number,Boolean,Array,Object,Date,Function,Symbol / / type or a custom constructor And check through instanceof to confirm that required: true, / / whether default:200 is required, / / default value, object or array default value must be obtained from a factory function such as default: () = > [] validator: (value) {/ / this value must match a return ['success',' warning', 'danger'] .indexOf (value)! =-1}}

3. 2$ emit

This should also be a very property, triggering the custom event of the parent component, which is actually the method of passing on the parent to the child.

/ / parent component / / Child component this.$emit ('title', [{title:' this is title'}])

3.3 vuex

1. This is also very common. Vuex is a state manager.

two。 Is an independent plug-in, suitable for projects with a lot of data sharing, because if it is only a simple communication, it will be heavy to use.

3.API

State: defines the warehouse where data is stored, which can be accessed through this.$store.state or mapState

Getter: gets the store value, which can be thought of as a computational property of store, either through this.$store.getter or

MapGetters access

Mutation: why is it designed to synchronize when changing the value of store synchronously, because mutation changes the value of store directly

Vue records the operation and cannot track the change if it is asynchronous. Can be called through mapMutations

Action: asynchronously call a function to execute mutation, and then change the store value, either through this.$dispatch or mapActions

Visit

Modules: module, if there are too many states, it can be split into modules and finally passed at the entrance. Deconstruction introduction

3.40$ attrs and $listeners

2.4.0 New

These two properties are not commonly used, but advanced usage is common

1.$attrs

Scenario: if the parent and child have many values, then multiple props need to be defined in the child component

Solution: $attrs gets values that are not defined in props in the parent of the child

/ / parent component / / Child component mounted () {console.log (this.$attrs) / / {title: "this is the title", width: "80", height: "80", imgUrl: "imgUrl"}}

Correspondingly, if the subcomponent defines a props, the printed value is to weed out the defined attribute.

Props: {width: {type: String, default:''}}, mounted () {console.log (this.$attrs) / / {title: "this is the title", height: "80", imgUrl: "imgUrl"}}

2.$listeners

Scenario: the child component needs to call the method of the parent component

Solution: the method of the parent component can be passed into the internal component via vmuron = "$listeners"-- useful when creating higher-level components

/ / parent component / / Child component mounted () {console.log (this.$listeners) / / you can get the change event}

If the grandchild component wants to access the properties and call methods of the parent component, it can be passed directly level by level.

3.inheritAttrs

/ / parent component / / Child component mounted () {console.log (this.$attrs) / / {title: "this is the title", width: "80", height: "80", imgUrl: "imgUrl"}}, the default value of true is true, that is, the properties on the parent component will be displayed on the root component and hidden if set to false

3.5 provide and inject

2.2.0 New

Description:

Provide and inject mainly provide use cases for high-level plug-in / component libraries. It is not recommended to be used directly in application code

And this pair of options need to be used together.

To allow an ancestral component to inject a dependency into all its descendants, no matter how deep the component level is, and always takes effect when the upstream and downstream relationship is established.

/ / parent component: provide: {/ / provide is an object that provides a property or method foo: 'this is foo', fooMethod: () = > {console.log (' parent component fooMethod is called')}}, / / child or grandchild component inject: ['foo','fooMethod'], / / array or object Injected into the child component mounted () {this.fooMethod () console.log (this.foo)} / / all child components under the parent component can take advantage of inject

Provide and inject bindings are not responsive. This is deliberately done by the authorities.

However, if you pass in a listenable object, the properties of its object are responsive because it is a reference type

/ / parent component: provide: {foo: 'this is foo'}, mounted () {this.foo=' this is the new foo'} / / child or grandchild component inject: [' foo'], mounted () {console.log (this.foo) / / is the child component printed or 'this is foo'}

3.60$ parent and $children

$parent: parent instance

$children: child instance

/ / parent component mounted () {console.log (this.$children) / / you can get the properties and methods of a first-level child component / / so you can directly change the data, or call the methods method} / / child component mounted () {console.log (this.$parent) / / you can get the properties and methods of parent}

$children and $parent do not guarantee order, nor are they responsive

You can only get one-level parent and child components.

3.7USD refs

/ / parent component mounted () {console.log (this.$refs.home) / / you can get the instance of the child component, and you can directly manipulate data and methods}

3.8USD root

/ / parent component mounted () {console.log (this.$root) / / get the root instance, and finally all components are mounted to the root instance console.log (this.$root.$children [0]) / / get the first-level child component console.log (this.$root.$children [0]. $children [0]) / / get the second-level child components of the root instance}

3.9 .sync

It existed as a two-way binding function in vue@1.x, that is, the child component can modify the value in the parent component.

In vue@2.0, it was killed for violating the design of a single data stream.

This .sync modifier has been reintroduced in versions above vue@2.3.0+

/ / parent component / / will be extended to / / child component / / so the child component can change mounted () {this.$emit ("update:title", 'this is the new title')} through the $emit trigger update method.

3.10 v-slot

2.6.0 New

1. Slotwright copyright scope was discarded in 2.6.0, but not removed

two。 The function is to pass the template of the parent component to the child component

3. Slot classification:

a. Anonymous slot (also known as default slot): there is no name, there is only one

/ / any content of the parent component

I'm an anonymous slot.

/ / sub-component I am the default / / v-slot:default to write the feeling and the named writing is more consistent, easy to understand, but also do not have to write

b. Named slot: relatively anonymous slot component slot label with name named

/ / any content of the parent component

I'm an anonymous slot.

/ / Sub-component I am the default

c. Scope slot: the data within the child component can be obtained by the parent page (solving the problem that the data can only be passed to the child component from the parent page)

/ / parent component {{slotProps.user.firstName}} / / slotProps can be named at will / / slotProps takes a collection of attribute data on the child component tag slot. All the data binduser = "user" / / child component {{user.lastName}} data () {return {user: {lastName: "Zhang", firstName: "yue"}, test: [1, 2, 3, 4]}} / / {{user.lastName}} is the default data v-slot:todo when the parent page does not have (= "slotProps")

3.11 EventBus

1. Is to declare a global Vue instance variable EventBus to store all communication data and event listeners on this variable

two。 Similar to Vuex. But this approach only applies to very small projects.

3. The principle is to use $on and $emit and instantiate a global vue to realize data sharing.

/ / in main.jsVue.prototype.$eventBus=new Vue () / / pass value component this.$eventBus.$emit ('eventTarget',' this is the value passed from eventTarget') / / receive component this.$eventBus.$on ("eventTarget", v = > {console.log ('eventTarget',v); / / this is the value passed from eventTarget})

4. It is possible to achieve horizontal, nested components to pass values, but the corresponding event name eventTarget must be globally unique

3.12 broadcast and dispatch

Vue 1.x has these two methods, event broadcast and dispatch, but vue 2.x has been deleted

The following is the encapsulation of two methods

Function broadcast (componentName, eventName, params) {this.$children.forEach (child = > {var name = child.$options.componentName; if (name = componentName) {child.$emit.apply (child, [eventName] .concat (params));} else {broadcast.apply (child, [componentName, eventName] .concat (params);}});} export default {methods: {dispatch (componentName, eventName, params) {var parent = this.$parent; var name = parent.$options.componentName While (parent & & (! name | | name! = = componentName)) {parent = parent.$parent; if (parent) {name = parent.$options.componentName;}} if (parent) {parent.$emit.apply (parent, [eventName] .concat (params);}}, broadcast (componentName, eventName, params) {broadcast.call (this, componentName, eventName, params);}

3.13 routing parameters

1. Option one

/ / Route definition {path:'/ describe/:id', name: 'Describe', component: Describe} / / the page passes the parameter this.$router.push ({path: `/ describe/$ {id}`,}) / / the page gets the this.$route.params.id

two。 Option 2

/ / routing definition {path:'/ describe', name: 'Describe', omponent: Describe} / / the page passes the parameter this.$router.push ({name:' Describe', params: {id: id}}) / / the page gets the this.$route.params.id

3. Option 3

/ / Route definition {path:'/ describe', name: 'Describe', component: Describe} / / Page pass parameter this.$router.push ({path:' / describe', query: {id: id `}) / / Page to get this.$route.query.id

4. Comparison of three schemes

In scenario 2, the parameter page refresh will be lost.

The first parameter of the scheme is spliced at the back, ugly, and exposes information.

Scenario 3 will not concatenate the parameters and refresh parameters will not be lost.

3.14 Vue.observable

2.6.0 New

Usage: make an object responsive. It is used internally by Vue to handle objects returned by data functions.

The returned object can be used directly in the rendering function and calculation properties, and the corresponding update will be triggered when a change occurs.

It can also be used as a minimized cross-component state memory for simple scenarios.

The principle of communication is essentially to use Vue.observable to realize a simple vuex.

/ / File path-/ store/store.jsimport Vue from 'vue'export const store = Vue.observable ({count: 0}) export const mutations = {setCount (count) {store.count = count}} / / usage + {{count}}-import {store, mutations} from'. / store/store' / / Vue2.6 add API Observableexport default {name: 'Add', computed: {count () {return store.count}} Methods: {setCount: mutations.setCount}}

4.render function

1. Scenario: some code is written in template and repeats a lot, so this time the render function works

/ / generate tags according to props / / Primary

/ / optimized version, using the render function to reduce the code repetition rate Hello world! Import Vue from 'vue' Vue.component (' child', {render (h) {const tag = ['div',' packs, 'strong',' H2, 'h3percent,' textarea'] [this.level] return h (tag, this.$slots.default)}, props: {level: {type: Number, required: true}}}) export default {name: 'hehe', data () {return {level: 3}

Comparison between 2.render and template

The former is suitable for complex logic, and the latter is suitable for simple logic.

The latter belongs to declaration and rendering, and the former belongs to custom Render function.

The performance of the former is higher, while that of the latter is lower.

5. Asynchronous component

Scenario: too large a project can lead to slow loading, so it is necessary for asynchronous components to load on demand.

1. Register components asynchronously

Three methods

/ / Factory function executes resolve callback Vue.component ('async-webpack-example', function (resolve) {/ / this special `build` syntax will tell webpack / / automatically cut your build code into multiple packages, these packages / / will load require (['. / my-async-component'], resolve)} via Ajax request) / / factory function will return PromiseVue.component ('async-webpack-example') / / this `import` function returns a `Promise` object. () = > import ('. / my-async-component')) / / Factory function returns a configured component object const AsyncComponent = () = > ({/ / the component to be loaded (which should be a `Promise` object) component: import ('. / MyComponent.vue'), / / the component used to load the asynchronous component loading: LoadingComponent, / / the component used when loading fails: ErrorComponent, / / shows the delay time of the component when loading. The default value is 200 (milliseconds) delay: 200, / / if a timeout is provided and the component has timed out, / / the component that was used when the load failed. The default is: `Infinity` timeout: 3000})

In essence, the rendering of an asynchronous component is to perform two or more renderings, first rendering the current component as a comment node, and then re-rendering through forceRender after the component is successfully loaded. Or render as an annotation node, and then render as a loading node, after rendering as the requested completed component

two。 Demand loading of rout

Webpack

< 2.4 时{ path:'/', name:'home', components:resolve=>

Require (['@ / components/home'], resolve)} webpack > 2.4 {path:'/', name:'home', components: () = > import ('@ / components/home')}

The import () method is proposed by es6, the import () method is loaded dynamically and returns a Promise object, and the parameter of the then method is the module into which it is loaded. Similar to Node.js 's require method, the main import () method is loaded asynchronously.

6. Dynamic component

Scenario: dynamic loading of components is involved when making a tab switch

But every time the component is reloaded, it consumes a lot of performance, so it works.

There is no animation in this way, and there is no hurry about this. You can use the built-in

7. Recursive component

Scenario: if you develop a tree component whose level is based on the background data, you need to use dynamic components

/ / Recursive component: the component can call itself recursively in its template, as long as you set the name component to the component. / / set so that House can be used recursively within the component template, but it should be noted that / / A condition must be given to limit the number, otherwise an error will be thrown: the max stack size exceeded// component is recursively used to develop some independent components with unknown hierarchical relationships. For example: / / cascading selector and tree control subcomponents, the current level value: {{index}} export default {/ / name must be defined before the component can recursively call name: 'tree', data () {return {}, / / receive the externally passed value props: {item: {type:Array, default: () = > []}.

Recursive components must set name and end thresholds

8. Functional component

Definition: stateless, cannot be instantiated, and there is no internal lifecycle processing

Rule: in versions prior to 2.3.0, the props option was required if a functional component wanted to receive prop.

In version 2.3.0 or above, you can omit the props option, and features on all components are automatically implicitly resolved to prop

In version 2.5.0 and above, if you use a single file component (that is, a normal .vue file), you can declare functional directly on template

Everything needed by the component is passed through the context parameter

The context properties are:

1.props: an object that provides all prop

2.children: an array of VNode child nodes

3.slots: a function that returns an object containing all slots

4.scopedSlots: (2.6.0 +) an object that exposes incoming scope slots. Normal slots are also exposed as functions.

5.data: the entire data object passed to the component, passed into the component as the second parameter of createElement

6.parent: reference to the parent component

7.listeners: (2.3.0 +) an object that contains all event listeners registered by the parent component for the current component. This is an alias for data.on.

8.injections: (2.3.0 +) if the inject option is used, the object contains the properties that should be injected

{{item}}

9.components and Vue.component

Components: locally registered component

Export default {components: {home}}

Vue.component: global registration component

Vue.component ('home',home)

10.Vue.extend

Scenario: some of the vue components need to mount some elements to the elements, and extend plays a role at this time

Is a grammars that construct a component

Written as follows:

/ / create constructor var Profile = Vue.extend ({template:'

{{extendData}} the data passed in by the instance is: {{propsExtend}}

The outermost tag corresponding to', / / template must have only one tag data: function () {return {extendData: 'this is the data of the extend extension',}}, props: ['propsExtend']}) / / the constructor created can be mounted to an element, or it can be registered with components or Vue.component () to mount to an element. You can pass the parameter .new Profile via propsData ({propsData: {propsExtend:' I am the data passed in by the instance'}}). $mount ('# app-extend') / / register Vue.component ('Profile',Profile) through components or Vue.component ()

11.mixins

Scenario: some components have duplicate js logic, such as verifying phone verification code, parsing time, etc. Mixins can achieve this kind of blending.

The mixins value is an array

Const mixin= {created () {this.dealTime ()}, methods: {dealTime () {console.log ('this is the method in the dealTime of mixin');}} export default {mixins: [mixin]}

12.extends

The usage of extends is similar to that of mixins, except that the arguments received are simple option objects or constructors, so extends can only extend one component at a time.

Const extend= {created () {this.dealTime ()}, methods: {dealTime () {console.log ('this is the method in the dealTime of mixin');}} export default {extends:extend}

13.Vue.use ()

Scenario: when we use element, we will first import, and then Vue.use (), which is actually registering the component and triggering the install method

This is often used in component calls

Will automatically organize multiple registrations of the same plug-in.

14.install

Scenario: Vue.use () says that executing this method triggers install

Is a plug-in for developing vue, the first parameter of this method is the Vue constructor, and the second parameter is an optional option object (optional)

Var MyPlugin = {}; MyPlugin.install = function (Vue, options) {/ / 2. To add a global resource, the second parameter passes a value that defaults to the value Vue.directive corresponding to update ('click', {bind (el, binding, vnode, oldVnode) {/ / prepare for binding and add time to listen to console.log (' instruction my-directive 's bind is executed');}, inserted: function (el) {/ / get bound element console.log ('instruction my-directive 's inserted is executed') }, update: function () {/ / execute the corresponding update according to the obtained new value / / console.log is also called for the initial value ('instruction my-directive 's update is executed');}, componentUpdated: function () {console.log ('instruction my-directive 's componentUpdated is executed') }, unbind: function () {/ / do cleanup operations / / for example, the event listener console.log bound when removing bind ('instruct my-directive 's unbind to execute');}}) / / 3. Injection component Vue.mixin ({created: function () {console.log ('created injected into the component'); console.log ('options value is', options)}}) / / 4. Add instance method Vue.prototype.$myMethod = function (methodOptions) {console.log ('instance method myMethod has been called');}} / / call MyPlugin Vue.use (MyPlugin, {someOption: true}) / / 3. Mount new Vue ({el:'# app'})

For more information, please stamp several operations of extend,mixins,extends,components,install in vue.

15. Vue.nextTick

2.1.0 New

Scenario: when the page loads, you need to let the text box get the focus.

Usage: perform a deferred callback after the end of the next DOM update cycle. Use this method immediately after modifying the data to get the updated DOM

Mounted () {/ / because the mounted phase dom has not been rendered, you need $nextTick this.$nextTick (() = > {this.$refs.inputs.focus () / / get dom through $refs and bind the focus method})}

16.Vue.directive

16.1 use

Scene: officials have given us a lot of instructions, but if we want to change the text to a specified color and define it as an instruction, we need to use Vue.directive at this time

/ / globally define Vue.directive ("change-color", function (el,binding,vnode) {el.style ["color"] = binding.value;}) / / use {{message}} export default {data () {return {color:'green'}

16.2 Life cycle

1.bind is called only once, and the instruction is called the first time it is bound to an element. This hook allows you to define an initialization action that is performed once at the binding time.

2.inserted: called when the bound element is inserted into the parent node (it can be called if the parent node exists, but not necessarily in the document)

3.update: called when the template where the element is bound and the element is updated, and regardless of whether the bound value has changed or not, ignore unnecessary template updates by comparing the bound values before and after the update

4.componentUpdate: called when the template of the bound element completes an update cycle

5.unbind: called only once, which is called when the month element is unbound.

17. Vue.filter

Scenario: the timestamp is converted to the year, month and day, which is a common method, so it can be extracted into a filter.

/ / use / / in double curly braces {{message | capitalize}} / / in `vbind` / / globally register Vue.filter ('stampToYYMMDD' (value) = > {/ / processing logic}) / / Local registration filters: {stampToYYMMDD: (value) = > {/ / processing logic}} / / multiple filters global registration / src/common/filters.jslet dateServer = value = > value.replace (/ (\ d {4}) (\ d {2}) (\ d {2}) / g Export {dateServer} / src/main.jsimport * as custom from'. / common/filters/custom'Object.keys (custom) .forEach (key = > Vue.filter (key))

18.Vue.compile

Scenario: compile the template string in the render function. Valid only when building independently

Var res = Vue.compile ('{msg}}') new Vue ({data: {msg: 'hello'}, render: res.render, staticRenderFns: res.staticRenderFns})

19.Vue.version

Scenario: some development plug-ins need to be compatible with different vue versions, so they use Vue.version

Usage: Vue.version () can get the vue version

Var version = Number (Vue.version.split ('.') [0]) if (version = 2) {/ / Vue v2.x.x} else if (version = 1) {/ / Vue v1.x.x} else {/ / Unsupported versions of Vue}

20.Vue.set ()

Scenario: when you directly set an array item using an index or when you modify the length of an array, the data is not updated in response due to the limitation of the Object.defineprototype () method

But the problem that vue.3.x will take advantage of proxy will be solved.

Solution:

/ / using setthis.$set (arr,index,item) / / using arrays push (), splice ()

21.Vue.config.keyCodes

Scene: custom key modifier alias

/ / define the key code as f2Vue.config.keyCodes.f2 = 113

22.Vue.config.performance

Scenario: monitoring performanc

Vue.config.performance = true

Only applicable to development mode and browsers that support performance.mark API

23.Vue.config.errorHandler

1. Scene: handlers that specify components that do not catch errors during rendering and observation

two。 Rules:

Since 2.2.0, this hook will also catch errors in component lifecycle hooks. Similarly, when the hook is undefined, the caught error will pass through the console.error output to prevent the application from crashing

Since 2.4.0, this hook will also catch errors inside the Vue custom event handler.

Since 2.6.0, this hook will also catch errors thrown inside the v-on DOM listener. In addition, if any overridden hook or handler returns a Promise chain (such as the async function), errors from its Promise chain will also be handled

3. Use

Vue.config.errorHandler = function (err, vm, info) {/ / handle error / / `info` is a Vue-specific error message, such as the lifecycle hook in which the error is located / / only available in 2.2.0 +}

24.Vue.config.warnHandler

2.4.0 New

1. Scenario: assign a custom handler to the runtime warning of Vue, which will only take effect in the developer environment

two。 Usage:

Vue.config.warnHandler = function (msg, vm, trace) {/ / `trace` is component inheritance tracking}

25.v-pre

Scenario: vue is a responsive system, but some static tags do not need to be compiled multiple times, which can save performance

{{this will not be compiled}} shows {{this will not be compiled}} {{msg}} even though msg is defined in data, it still shows {{msg}}.

26.v-cloak

Scene: when the network speed is slow, when using vue to bind data, the variable flicker occurs when rendering the page

Usage: this instruction remains on the element until the associated instance is compiled. When used with CSS rules such as [v-cloak] {display: none}, this directive hides uncompiled Mustache tags until the instance is ready

/ / in template

{{value.name}}

/ / [v-cloak] {display: none;} in css

This will solve the flicker, but there will be a white screen, which can be used in combination with the skeleton screen.

27.v-once

Scenario: static dom in some template has not changed, so it only needs to be rendered once, which can reduce the performance overhead.

You only need to load the tag once at this time.

The difference between v-once and v-pre:

V-once is rendered only once; v-pre is not compiled and output as is

twenty-eight。 Event modifier

.stop: stop bubbling

.rooment: block default behavior

.self: triggered only by the binding element itself

.once: 2.1.4 added, only triggered once

.passive: added in 2.3.0, the default behavior of scrolling events (that is, scrolling behavior) will be triggered immediately and cannot be used with .resolent.

twenty-nine。 Key modifier and key code

Scene: sometimes you need to monitor the behavior of the keyboard, such as pressing enter to query the interface.

/ / corresponding keywords on the keyboard

.enter

.tab

.delete (capture delete and backspace keys)

.esc

.space

.up

.down

.left

.right

30.Vue-router

Scenario: Vue-router is an official routing plug-in

30.1 caching and animation

Routing uses the official component vue-router, which I believe everyone is very familiar with.

Here I will describe the caching and animation of routing.

/ / because some pages, such as trying data statistics, need to be refreshed in real time, there is no need to cache / / routing tags

30.2 Global routing hooks

1.router.beforeEach

Router.beforeEach ((to, from, next) = > {console.log ('global frontend: beforeEach-- next needs to be called') / / this is generally used for login interception, also known as navigation hook guard if (path = ='/ login') {next () return} if (token) {next ();}})

2.router.beforeResolve (v 2.5.0 +)

Similar to beforeEach, the difference is that the parsing guard is called before the navigation is confirmed and after the guard and asynchronous routing components are parsed within all components.

That is, to call after beforeEach

3.router.afterEach

Global rear hook

Called at the end of all route jumps

These hooks do not accept next functions and do not change the navigation itself

30.3 component routing hook

1.beforeRouteEnter

Called before the corresponding route of the rendering component is confirmed. The usage and parameters are similar to router.beforeEach. Next needs to be called actively.

At this time, the component instance has not been created and cannot access this

You can access the component instance by passing a callback to next. Performs a callback when the navigation is confirmed, and takes the component instance as a parameter to the callback method

BeforeRouteEnter (to, from, next) {/ / the component instance cannot be accessed here, this = undefined next (vm = > {/ / access the component instance} through `vm`)}

2.beforeRouteUpdate (v 2.2 +)

When the current route changes and the component is reused, the instance can be accessed through this. Next needs to be called actively and cannot be called back.

3.beforeRouteLeave

It is called when the navigation leaves the corresponding route of the component, and the component instance can be accessed. The this,next needs to be called actively and cannot be called back.

30.4 route pattern

Set the mode property: hash or history

30.5 Vue.$router

This.$router.push (): jump to a different url, but this method adds a record to the history stack, and clicking back returns to the previous page this.$router.replace (): there is no record this.$router.go (n): n can be positive or negative. Positive numbers return to the previous page, similar to window.history.go (n)

30.6 Vue.$route

Represents the routing object that is currently redirected. The attributes are:

Name: route name

Path: path

Query: passing parameters to receive valu

Params: passing parameters to receive valu

FullPath: the URL after parsing, including the query parameters and the full path of hash

Matched: copy of routing record

RedirectedFrom: if there is a redirect, that is, the name of the route that is the source of the redirection

This.$route.params.id: get the parameters passed through params or /: id this.$route.query.id: get the parameters passed through query

Key of 30.7 router-view

Scenario: because Vue reuses the same components, that is, when links such as / page/1 = > / page/2 or / page?id=1 = > / page?id=2 jump, hooks such as created and mounted will not be executed

So that both the created and mounted of the component will be executed

31.Object.freeze

Scenario: a long list of data that usually does not change, but vue does the conversion between getter and setter

Usage: a new feature of ES5 that freezes an object to prevent it from being modified

Support: vue 1.0.18 + supports it. For objects frozen by freeze in data or vuex, vue will not convert getter to setter.

Note: freezing only freezes a single attribute, and the reference address can still be changed.

New Vue ({data: {/ vue will not getter the object in list, setter binding list: Object.freeze ([{value: 1}, {value: 2}])}, mounted () {/ / interface will not respond, because a single attribute is frozen this.list [0] .value = 100 / / in both of the following ways, the interface will respond this.list = [{value: 100}, {value: 200}]; this.list = Object.freeze ([{value: 100}, {value: 200}]);}})

thirty-two。 Debug template

Scenario: in the process of Vue development, you often encounter errors in JavaScript variables when rendering template templates. At this time, you may use console.log to debug.

At this point, you can mount a log function in the development environment

/ / main.jsVue.prototype.$log = window.console.log;// component internal {{log (info)}}

33.vue-loader Tips

33.1 preserveWhitespace

Scenario: the development of vue code usually has spaces. At this time, packaging and compression will increase the size of the package if the spaces are not removed.

Configure preserveWhitespace to reduce the size of packets

{vue: {preserveWhitespace: false}}

33.2 transformToRequire

Scenario: in the past, when writing Vue, I used to write code like this: require the picture in advance to a variable and then pass it to the component

/ / page code export default {created () {this.imgSrc = require ('. / assets/default-avatar.png')}}

Now: after configuring transformToRequire, you can configure it directly, so that vue-loader will automatically require the corresponding properties and pass them to the component.

/ / vue-cli 2.x the default configuration in vue-loader.conf.js is transformToRequire: {video: ['src',' poster'], source: 'src', img:' src', image: 'xlink:href'} / / configuration file If vue-cli2.x modifies avatar in vue-loader.conf.js: ['default-src'] / / vue-cli 3.x in vue.config.js {vue: {transformToRequire: {avatar: [' default-src']}} / / the page code can be simplified to

thirty-four。 Set an alias for the path

1. Scenario: in the development process, we often need to introduce various files, such as pictures, CSS, JS, etc. In order to avoid writing a long relative path (.. /), we can configure an alias for different directories.

2.vue-cli 2.x configuration

/ / vue-cli 2.x the default configuration in vue-loader.conf.js is transformToRequire: {video: ['src',' poster'], source: 'src', img:' src', image: 'xlink:href'} / / configuration file If vue-cli2.x modifies avatar in vue-loader.conf.js: ['default-src'] / / vue-cli 3.x in vue.config.js {vue: {transformToRequire: {avatar: [' default-src']}} / / the page code can be simplified to

3.vue-cli 3.x configuration

/ / create vue.config.jsvar path = require ('path') function resolve (dir) {console.log (_ _ dirname) return path.join (_ _ dirname, dir)} module.exports = {chainWebpack: config = > {config.resolve.alias .set (key,value) / / key,value in the root directory, such as .set (' @ @', resolve ('src/components'))}}

35.img failed to load

Scene: sometimes the image address returned by the background may not be opened, so you should add a default picture at this time.

/ / page code

Export default {data () {return {imgUrl:''}}, methods: {handleError (e) {e.target.src=reqiure ('image path') / / of course, if the project is configured with transformToRequire, see above

36.css

36.1 Local Styl

The scoped attribute of the style tag in 1.Vue indicates that its style only works on the current module and is privatized.

two。 Rules / principles of rendering:

Add a non-repeating data attribute to the DOM node of HTML to represent uniqueness

Add a data property selector of the current component to the end of the corresponding CSS selector to privatize the style, such as: .demo [data-v-2311c06a] {}

If less or sass is introduced, it will only be set on the last element

/ / original code Vue.js scoped.demo {font-size: 16px; .content {color: red;}} / / browser rendering effect Vue.js scoped.demo [data-v-039c5b43] {font-size: 14px;} .demo .content [data-v-039c5b43] {/ / .demo does not add the data attribute color: red;}

36.2 deep Properties

/ / add a / deep/.demo {font-size: 14px;} .demo / deep/ .content {color: blue;} / browser compiled .demo [data-v-039c5b43] {font-size: 14px;} .demo [data-v-039c5b43] .content {color: blue;} "sharing of 36 tips for Vue development" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.