Set this to true to enable component init, compile, render and patch performance tracing in the browser devtool performance/timeline panel. details(opens new window)
In Vue 3, APIs that globally mutate Vue's behavior are now moved to application instances created by the new createApp method. In addition, their effects are now scoped to that specific application's instance:
Calling createApp returns an application instance. This instance provides an application context. The entire component tree mounted by the application instance share the same context, which provides the configurations that were previously "global" in Vue 2.x.
In addition, since the createApp method returns the application instance itself, you can chain other methods after it which can be found in the following sections.
Returns an application instance which provides an application context. The entire component tree mounted by the application instance share the same context.details(opens new window)
√
√
h
eturns a "virtual node", usually abbreviated to VNode: a plain object which contains information describing to Vue what kind of node it should render on the page, including descriptions of any child nodes. details(opens new window)
√
x
defineComponent
Implementation-wise defineComponent does nothing but return the object passed to it. However, in terms of typing, the returned value has a synthetic type of a constructor for manual render function, TSX and IDE tooling support.details(opens new window)
Allows resolving a component by its name, if it is available in the current application instance.Returns a Component or the argument name when not found.details(opens new window)
√
x
resolveDynamicComponent
Allows resolving a component by the same mechanism that <component :is=""> employs.details(opens new window)
√
x
resolveDirective
Allows resolving a directive by its name, if it is available in the current application instance.Returns a Directive or undefined when not found.details(opens new window)
√
x
withDirectives
Allows applying directives to a VNode. Returns a VNode with the applied directives.details(opens new window)
√
x
createRenderer
The createRenderer function accepts two generic arguments: HostNode and HostElement, corresponding to Node and Element types in the host environment.details(opens new window)
√
x
nextTick
Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.details(opens new window)
A list/hash of attributes that are exposed to accept data from the parent component. It has an Array-based simple syntax and an alternative Object-based syntax that allows advanced configurations such as type checking, custom validation and default values.details(opens new window)
√
√
computed
Computed properties to be mixed into the component instance. All getters and setters have their this context automatically bound to the component instance.details(opens new window)
√
√
methods
Methods to be mixed into the component instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their this context automatically bound to the component instance.details(opens new window)
√
√
watch
An object where keys are reactive properties to watch — examples include data or computed properties — and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. details(opens new window)
√
√
emits
A list/hash of custom events that can be emitted from the component. It has an array-based simple syntax and an alternative Object-based syntax that allows to configure an event validation.details(opens new window)
Called right before a component instance is unmounted. At this stage the instance is still fully functional.details(opens new window)
√
√
unmounted
Called after a component instance has been unmounted. When this hook is called, all directives of the component instance have been unbound, all event listeners have been removed, and all child component instance have also been unmounted.details(opens new window)
√
√
errorCaptured
Called when an error from any descendent component is captured. The hook receives three arguments: the error, the component instance that triggered the error, and a string containing information on where the error was captured.details(opens new window)
√
√
renderTracked
Called when virtual DOM re-render is tracked. The hook receives a debugger event as an argument. This event tells you what operation tracked the component and the target object and key of that operation.details(opens new window)
√
√
renderTriggered
Called when virtual DOM re-render is triggered. Similarly to renderTracked, receives a debugger event as an argument. This event tells you what operation triggered the re-rendering and the target object and key of that operation.details(opens new window)
The mixins option accepts an array of mixin objects. These mixin objects can contain instance options like normal instance objects, and they will be merged against the eventual options using the certain option merging logic. details(opens new window)
This pair of options are used together to allow an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is, as long as they are in the same parent chain. details(opens new window)
√
√
setup
The setup function is a new component option. It serves as the entry point for using the Composition API inside components.details(opens new window)
Allow the component to recursively invoke itself in its template. Note that when a component is registered globally with app.component, the global ID is automatically set as its name.details(opens new window)
By default, parent scope attribute bindings that are not recognized as props will "fallthrough". This means that when we have a single-root component, these bindings will be applied to the root element of the child component as normal HTML attributes. When authoring a component that wraps a target element or another component, this may not always be the desired behavior. By setting inheritAttrs to false, this default behavior can be disabled. details(opens new window)
The data object that the component instance is observing. The component instance proxies access to the properties on its data object.details(opens new window)
√
√
$props
An object representing the current props a component has received. The component instance proxies access to the properties on its props object.details(opens new window)
The instantiation options used for the current component instance. This is useful when you want to include custom properties in the options.details(opens new window)
Built-in tags such as view and text are implemented as Vue components. $parent will get these to the built-in components, but it will cause this.$parent to be inconsistent with other platforms. The solution is to use this.$parent.$parent to get the built-in components or customize the root node of the component from view to div.
$root
The root component instance of the current component tree. If the current instance has no parents this value will be itself.details(opens new window)
√
√
$slots
Used to programmatically access content distributed by slots. Each named slot has its own corresponding property (e.g. the contents of v-slot:foo will be found at this.$slots.foo()).details(opens new window)
√
x
$refs
An object of DOM elements and component instances, registered with ref attributes.details(opens new window)
√
√
Non-H5 sides can only be used to get custom components, and cannot be used to get built-in component instances (such as view, text)
$attrs
Contains parent-scope attribute bindings and events that are not recognized (and extracted) as component props or custom events.details(opens new window)
Watch a reactive property or a computed function on the component instance for changes.details(opens new window)
√
√
$emit
Trigger an event on the current instance. Any additional arguments will be passed into the listener's callback function.details(opens new window)
√
√
$forceUpdate
Force the component instance to re-render. Note it does not affect all child components, only the instance itself and child components with inserted slot content.details(opens new window)
√
√
$nextTick
Defer the callback to be executed after the next DOM update cycle. Use it immediately after you've changed some data to wait for the DOM update.details(opens new window)
The key special attribute is primarily used as a hint for Vue's virtual DOM algorithm to identify VNodes when diffing the new list of nodes against the old list. details(opens new window)
<transition-group> provides transition effects for multiple elements/components. details(opens new window)
√
x
keep-alive
When wrapped around a dynamic component, <keep-alive> caches the inactive component instances without destroying them. Primarily used to preserve component state or avoid re-rendering. details(opens new window)
√
x
slot
<slot> serve as content distribution outlets in component templates. <slot> itself will be replaced. details(opens new window)
√
√
teleport
Move part of the template somewhere else in the DOM, outside of the Vue app. details(opens new window)
Marks an object so that it will never be converted to a proxy. Returns the object itself.details(opens new window)
√
√
shallowReactive
Creates a reactive proxy that tracks reactivity of its own properties but does not perform deep reactive conversion of nested objects (exposes raw values).details(opens new window)
√
√
shallowReadonly
Creates a proxy that makes its own properties readonly, but does not perform deep readonly conversion of nested objects (exposes raw values).details(opens new window)
Takes an inner value and returns a reactive and mutable ref object. The ref object has a single property .value that points to the inner value.details(opens new window)
√
√
unref
Returns the inner value if the argument is a ref, otherwise return the argument itself. This is a sugar function for val = isRef(val) ? val.value : val.details(opens new window)
√
√
toRef
Can be used to create a ref for a property on a source reactive object. The ref can then be passed around, retaining the reactive connection to its source property.details(opens new window)
√
√
toRefs
Converts a reactive object to a plain object where each property of the resulting object is a ref pointing to the corresponding property of the original object.details(opens new window)
Takes a getter function and returns an immutable reactive ref object for the returned value from the getter.details(opens new window)
√
√
watchEffect
Runs a function immediately while reactively tracking its dependencies and re-runs it whenever the dependencies are changed.details(opens new window)
√
√
watch
The watch API is the exact equivalent of the Options API this.$watch (and the corresponding watch option). watch requires watching a specific data source and applies side effects in a separate callback function.details(opens new window)
A component option that is executed before the component is created, once the props are resolved. It serves as the entry point for composition APIs.details(opens new window)
uni-app has built-in Vuex(opens new window). For its use in app, please refer to hello-uniappstore/index.js.
//store.jsimport{createStore}from'vuex'const store =createStore({
state:{...},
mutations:{...},
actions:{...}})exportdefault store
//main.jsimport App from'./App'import{createSSRApp}from'vue'import store from'./store'exportfunctioncreateApp(){const app =createSSRApp(App)
app.use(store)return{
app
}}//test.vue When using:import{mapState,mapMutations}from'vuex'
Since onError is not a complete life cycle, only a method of catching errors is provided, and a callback function named onError can be added to the root component of the app. as follows:
exportdefault{// Only apps have an onLaunch lifecycleonLaunch(){// ...},// capture app erroronError(err){
console.log(err)}}
# 4. Component property settings do not take effect
When some properties are repeatedly set to the same value, they are not synchronized to the View layer. For example, every time you set the scroll-top property of a scroll-view component to 0, it only gets back to the top the first time. This is due to the props unidirectional data flow feature. When the actual value of scroll top inside the component changes, the binding properties do not change with it.
There are two solutions (take the scroll-view component as an example):
Monitor the scroll event, record the value of the internal change of the component, and set the current value of the record before setting the new value
exportdefault{data(){return{
scrollTop:0,}},
methods:{scroll:function(e){// If you use this method, please add debounce by yourselfthis.scrollTop = e.detail.scrollTop
},goTop:function(e){this.scrollTop =0}}}
The second solution may cause jitter in some components, and the first solution is recommended .
