I have itchy hands recently, and I have played Vue 3.0 for a while. It feels very comfortable. I quickly finished these issues of Vue 2.0 and wrote some 3.0 things.
This article mainly lists and analyzes some APIs that I personally think are commonly used or have great uses as notes and discussions for self-summary.
nextTick
Function:
Add a delayed callback after the end of the next Dom update loop. After modifying the data, you can get the updated Dom.
usage:
( [callback, context] )
vm.$nextTick( [callback] )
// Usage 2// Use as a Promise (new from 2.1.0)()
.then(function () {
// DOM has been updated })
illustrate:
callback: Delayed callback function
context: optional object
ps: New from 2.1.0: If no callback is provided and in a Promise-enabled environment, a Promise is returned. Please note that Vue does not come with a polyfill with Promise, so if your target browser does not natively support Promise (IE: What do you all think of me), you have to provide polyfill yourself.
Extensions:
Regarding the execution mechanism and usage scenarios of nextTick, we must also master similar requestAnimationFrame() and (). The former is the browser's own listening (execute before the next repaint), and the latter is the node environment, which is executed at the time of the next event polling.
mixin
Function:
Register a mix-in, affecting every Vue instance created after registration. Plugin authors can use mixin to inject custom behavior into components.
usage:
// Inject a processor for the custom option 'myOption'.({
created: function () {
var myOption = this.$
if (myOption) {
(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
illustrate:
object: A vm property or method
ps: Use global mix-in with caution, as it affects each individually created Vue instance (including third-party components). Most of the time, it should only be applied to custom options, like the example above. It is recommended to publish it as a plugin to avoid repeated app mixing.
$forceUpdate
Function:
Forces the Vue instance to re-render.
usage:
vm.$forceUpdate()
set、delete
Function:
Set and delete the properties of responsive data, and trigger view updates.
usage:
// Usage 1( target, key, value ) ( target, key ) // Usage 2vm.$set( target, key, value ) vm.$delete( target, key )
illustrate:
target: target object
key: the attribute name to be added
value: The attribute value to add
ps: Mainly used scenarios, you can avoid the limitation that Vue cannot detect property being deleted
filter
Function:
Used for some common text formatting and some canonical data mapping.
usage:
<!-- In double braces -->
{{ message | capitalize }}
<!-- exist `v-bind` middle -->
<div v-bind:></div>
// registerfilters: {
capitalize: function (value) {
if (!value) return ''
value = ()
return (0).toUpperCase() + (1)
}
}
// Global registration('capitalize', function (value) {
if (!value) return ''
value = ()
return (0).toUpperCase() + (1)
})
new Vue({
// ...
})
illustrate:
The filter function receives the value of the expression (result of the previous operation chain) as the first parameter.
Filters should be added at the end of a JavaScript expression, indicated by the "pipe" symbol.
ps: The filter can accept multiple parameters, such as {{ message | filterA('arg1', arg2) }}. Here, filterA is defined as a filter function that receives three parameters. Where the value of message is used as the first parameter, the normal string 'arg1' is used as the second parameter, and the value of expression arg2 is used as the third parameter.
directive
Function:
Used to register custom directives.
usage:
<!-- When the page loads，This element will get focus --> <input v-focus>
// Register a global custom command `v-focus`('focus', {
// When the bound element is inserted into the DOM... inserted: function (el) {
// Focus on elements ()
}
})
// Register local directives, and the component also accepts an option to directivesdirectives: {
focus: {
// Definition of instructions inserted: function (el) {
()
}
}
}
illustrate:
inserted is just one of the interpolation functions of the registration directive. The complete registration attributes can also include:
bind: Only called once, the instruction is called when the first time it is bound to an element. Here you can perform a one-time initialization setting.
inserted: Called when the bound element is inserted into the parent node (only the parent node exists, but it may not be inserted into the document).
update: Called when the VNode of the component is updated, but may occur before its child VNode is updated. The value of the directive may change or not, 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 directive is located.
unbind: It is called only once, and is called when the directive is unbined with the element.
('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
Other simple common properties and methods
// (vm.$root);
vm.$root //Instance object
vm.$el //Root element (real DOM element)// (vm.$el);
vm.$ //Get the contents in the root element (real DOM element)// (vm.$);
vm.$data //Data object under the instance// (vm.$data);
vm.$options //The mount item under the instance// (vm.$options);
vm.$props //Data for communication between components// (vm.$props);
vm.$parent //In the component, refer to the parent element// (vm.$parent);
vm.$children //In the component, refer to the child element// (vm.$children);
vm.$attrs // Used to obtain all attributes passed by the parent component// (vm.$attrs);
vm.$listeners // Used to get all methods passed by the parent component// (vm.$listeners);
vm.$slots //Slots in the component// (vm.$slots);
vm.$scopedSlots // Used to access scope slots// (vm.$scopedSlots);
vm.$refs // Used to locate DOM elements (using ref for tracking)// (vm.$refs);
vm.$watch // Used to listen to data (it will be automatically destroyed after use in vue files)// (vm.$watch);
vm.$emit // Used to dispatch events (commonly used for data communication)// (vm.$emit);
vm.$on // Used to listen for event distribution// (vm.$on);
vm.$once //Only listen for events once (no listening afterwards)// (vm.$once);
//life cyclebeforeCreate() {
}
created() {
}
beforeMount() {
}
mounted() {
}
beforeUpdate() {
}
updated() {
}
beforeDestroy() {
}
destroyed() {
}
Summarize
This article mainly includes these commonly used APIs in Vue. If you are interested in learning more, you can refer to its official website. I hope this article will be useful to you and can be skilled in practical project development.
To facilitate reading comprehension, the code in this article has been uploadedGithub
If there are any errors in the article, please feel free to correct them in the comment area. If it is helpful, please like and follow.
The above is a detailed summary of Vue's commonly used APIs and advanced APIs. For more information about Vue's commonly used APIs and advanced APIs, please pay attention to my other related articles!