Summary of Vue Common API and Advanced API

Directory nextTick
mixin
$forceUpdate
set, delete
filter
directive
Summary of other simple common properties and methods

Recently, my hands are itchy. I played Vue3.0 once, which is very comfortable. I quickly finished these issues of Vue2.0 and wrote some 3.0 things.
This article mainly lists and analyzes some Api that I think are commonly used or of great use, as a self-summary note and discussion.

nextTick

Functions:

Add a delayed callback after the end of the next Dom update cycle. After modifying the data, you can get the updated Dom.
Usage:

Vue.nextTick( [callback, context] )
vm.$nextTick( [callback] )
//  Usage 2
//  As 1 A  Promise  Use  (2.1.0  Start adding )
Vue.nextTick()
 .then(function () {
  // DOM  Updated 
 })

Description:

callback: Delayed callback function
context: Optional object
ps: New since 2.1. 0: Returns 1 Promise if no callback is provided and in an environment that supports Promise. Please note that Vue does not come with polyfill of Promise, so if your target browser does not support Promise natively (IE: Why are you all looking at me), you have to provide polyfill yourself.

Extension:

With regard to the execution mechanism and usage scenario of nextTick, we must also master similar requestAnimationFrame (), which is the browser's own listening (executed before the next redrawing), and process. nextTick (), which is executed at the time point of the next event poll in node environment

mixin

Functions:

Register 1 blend, affecting every Vue instance created after registration. Plug-in authors can use blending to inject custom behavior into components.
Usage:

//  Is a custom option  'myOption'  Injection 1 Processors. 
Vue.mixin({
 created: function () {
  var myOption = this.$options.myOption
  if (myOption) {
   console.log(myOption)
  }
 }
})

new Vue({
 myOption: 'hello!'
})
// => "hello!"

Description:

object: 1 property or method of vm
ps: Use global blending with caution, as it affects every individually created instance of Vue (including third-party components). In most cases, it should only be applied to custom options, as in Example 1 above. It is recommended to publish it as a plug-in to avoid repeated applications.

$forceUpdate

Functions:

Force the Vue instance to re-render.
Usage:

vm.$forceUpdate()

set, delete

Functions:

Set and delete the attributes of responsive data, and trigger the view update at the same time.
Usage:

//  Usage 1
Vue.set( target, key, value )
Vue.delete( target, key )
//  Usage 2
vm.$set( target, key, value )
vm.$delete( target, key )

Description:

target: Target object
key: The name of the attribute to add
value: Attribute value to add
ps: The main usage scenario, which can avoid the limitation that Vue cannot detect the deletion of property

filter

Functions:

Used for 1 common text formatting and 1 specification data mapping.
Usage:

<!--  In double curly braces  -->
{{ message | capitalize }}

<!--  In  `v-bind`  Medium  -->
<div v-bind:id="rawId | formatId"></div>

//  Registration 
filters: {
 capitalize: function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
 }
}

//  Global registration 
Vue.filter('capitalize', function (value) {
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
 // ...
})

Description:

The filter function always accepts the value of the expression (the result of the previous action chain) as the first parameter.
The filter should be added at the end of the JavaScript expression, indicated by the "pipe" symbol.

ps: Filters can accept multiple parameters, such as {{message filterA ('arg1', arg2)}}, where filterA is defined as a filter function that accepts three parameters. Where the value of message is the first argument, the normal string 'arg1' is the second argument, and the value of the expression arg2 is the third argument.

directive

Functions:

Used to register custom directives.

Usage:

<!--  When the page loads, the element will get focus  --> 
<input v-focus>

//  Registration 1 Global custom instructions  `v-focus`
Vue.directive('focus', {
 //  When the bound element is inserted into the  DOM  In mid-time … 
 inserted: function (el) {
  //  Focus element 
  el.focus()
 }
})

//  Register local directives, which are also accepted in components 1 A  directives  Options for 
directives: {
 focus: {
  //  Definition of instructions 
  inserted: function (el) {
   el.focus()
  }
 }
}

Description:

inserted is only one of the interpolation functions of the registration instruction, and the complete registration attributes can also include:
bind: Called only once, when the instruction is bound to the element for the first time, it can be initialized once here.
inserted: Called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but not necessarily inserted into the document).
update: Called when the component's VNode is updated, but may occur before its child VNode is updated. Directive values may or may not have changed, but unnecessary template updates can be ignored by comparing the values before and after the update.
componentUpdated: Called after the VNode and its child VNode of the component where the instruction is located are all updated.
unbind: Called only once, when the instruction is unbound from the element.

//  Is a custom option  'myOption'  Injection 1 Processors. 
Vue.mixin({
 created: function () {
  var myOption = this.$options.myOption
  if (myOption) {
   console.log(myOption)
  }
 }
})

new Vue({
 myOption: 'hello!'
})
// => "hello!"

0

Other simple common properties and methods

//  Is a custom option  'myOption'  Injection 1 Processors. 
Vue.mixin({
 created: function () {
  var myOption = this.$options.myOption
  if (myOption) {
   console.log(myOption)
  }
 }
})

new Vue({
 myOption: 'hello!'
})
// => "hello!"

1

Summarize

This article mainly includes these API commonly used in vue. If you are interested in learning more, please refer to its official website. I hope this article is useful to you and can be skillfully applied to actual project development.

For easy reading and comprehension, the code in this article has been uploaded to Github

If there are any mistakes in the article, please correct them in the comment area. If it is helpful, please praise and pay attention.

The above is the detailed summary of Vue commonly used API and advanced API. For more information about Vue commonly used API and advanced API, please pay attention to other related articles on this site!