This page is translated by Google Cloud Translation API

Switch to Chinese

Global configuration

Vue Global Configuration	Description	H5	App	Mini Program	Description
Vue.config.silent	Cancel all Vue logs and warnings Details	√	√	√
Vue.config.optionMergeStrategies	Options for custom merge strategies Details	√	√	√
Vue.config.devtools	Configure whether to allow vue-devtools to check code details	√	x	x	Only in web environment Support
Vue.config.errorHandler	Specifies the handler for uncaught errors during rendering and observation of the component Details	√	√	√
Vue.config.warnHandler	Assign a custom handler to Vue's runtime warnings Details	√	√	√
Vue.config.ignoredElements	Must make Vue ignore custom elements outside Vue details	√	√	√	strong Not recommended, will override built-in components configured by the uni-app framework
Vue.config.keyCodes	Customize key aliases for v-on Details	√	x	x
Vue.config.performance	Set to true to enable performance tracking of component initialization, compilation, rendering, and patching in the browser dev tools' performance/timeline panel [details](https://v2.cn.vuejs .org/v2/api/#performance)	√	x	x	Only supported in web environment
Vue.config.productionTip	Set to false to prevent vue from generating production tips on startup details	√	√	√	-

Global API

Vue Global API	Description	H5	App-side	Mini Program	Description
Vue.extend	Use the base Vue constructor to create a "subclass" Details	√	√	x	No Use as a component
Vue.nextTick	Execute delayed callback after the end of the next DOM update loop details	√	x	x
Vue.set	Add a property to the responsive object, and make sure this new property is also responsive and triggers view updates [details](https://v2.cn.vuejs.org/v2/api/# Vue-set)	√	√	√
Vue.delete	Delete a property of an object. If the object is reactive, make sure the delete triggers an update view Details	√	√	√
Vue.directive	Register or get global directive Details	√	√	x
Vue.filter	Register or get global filter Details	√	√	x
Vue.component	Register or get a global component. Registration also automatically sets the name of the component with the given id details	√	√	√
Vue.use	安装 Vue.js 插件 详情	√	√	√
Vue.mixin	全局注册一个混入，影响注册之后所有创建的每个 Vue 实例 详情	√	√	√	nvue 页面暂不支持
Vue.version	Provide the Vue installation version number in string form Details	√	√	√
Vue.compile	Compile a template string into a render function. Only available in the full version. Details	√	x	x	Vue used by uni-app is the version that only contains runtime

Options

Vue Options	Description	H5	App	Mini Program	Description
data	The data object of the Vue instance Details	√	√	√
props	props can be an array or an object to receive data from the parent component Details	√	√	√
propsData	Pass props when creating an instance. The main function is to facilitate testing Details	√	√	√
computed	Computed properties will be mixed into the Vue instance Details	√	√	√
methods	methods will be mixed into the Vue instance Details	√	√	√
watch	An object, the key is the expression to be observed, and the value is the corresponding callback function Details	√	√	√
el	Provide an existing DOM element on the page as the mount target of the Vue instance Details	√	x	x
template	A string template is used as the identifier of a Vue instance details	√	x	x	The vue used by uni-app is Include runtime version only
render	An alternative to string templates, the render function accepts a createElement method as the first argument to create the VNode. Details	√	x	x
renderError	When the render function encounters an error, another rendering output is provided, which only works in the developer environment Details	√	x	x
directives	Hash table containing directives available to Vue instance details	√	√	x
filters	Hash table containing available filters for Vue instances details	√	√	√
components	A hash table containing the components available for a Vue instance details	√	√	√
parent	Specifies the parent instance of the created instance and establishes a parent-child relationship between the two Details	√	√	√	Not recommended
mixins	option to receive an array of mixin objects details	√	√	√
extends	Allows declarations to extend another component Details	√	√	√
provide/inject	Allows an ancestor component to inject a dependency into all its descendants, no matter how deep the component level is, and it will always take effect when its upstream and downstream relationships are established [details](https://v2.cn.vuejs .org/v2/api/#provide-inject)	√	√	√
name	Allow component template to call itself recursively Details	√	√	√
delimiters	Change the delimiter for plain text insertion details	√	x	x
functional	Make a component stateless (no data) and instanceless (no this context) Details	√	x	x
model	Allows a custom component to customize props and events when using v-model Details	√	√	x
inheritAttrs	The default value of the inheritAttrs attribute is true, which means that the root node of the component is allowed to inherit the attributes contained in $attrs Details	√	√	x
comments	When set to true, HTML comments in the template will be preserved and rendered details	√	x	x	-

Lifecycle Hooks

Lifecycle hooks	Description	H5	App-side	Mini Programs	Description
beforeCreate	Called after instance initialization Details	√	√	√
created	Called immediately after the instance is created Details	√	√	√
beforeMount	Called before the mount starts Details	√	√	√
mounted	Call Details after it is mounted on the instance After the component is fully mounted, you can use $nextTick Details	√	√	√
beforeUpdate	Called when data is updated, before the virtual DOM is patched Details	√	√	√
updated	This hook will be called after the virtual DOM is re-rendered and patched due to data changes Details	√	√	√
activated	Called when a component cached by keep-alive is activated Details	√	√	x
deactivated	Called when a component cached by keep-alive is deactivated Details	√	√	x
beforeDestroy	Called before the instance is destroyed. At this step, the instance is still fully available Details	√	√	√
destroyed	Called after the Vue instance is destroyed. After the call, everything indicated by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed [details](https://v2.cn.vuejs.org/v2/ api/#destroyed)	√	√	√
errorCaptured	Called when an error from a descendant component is captured Details	√	√	√	-

页面及组件生命周期流程图

Instance attributes

Vue instance properties	Description	H5	App-side	Mini Program	Description
vm.$data	Data object observed by Vue instance Details	√	√	√
vm.$props	The props object received by the current component Details	√	√	√
vm.$el	The root DOM element used by the Vue instance details	√	x	x
vm.$options	Initialization options for the current Vue instance Details	√	√	√
vm.$parent	Parent instance, if the current instance exists details	√	√	√	H5 endView, text and other built-in tags are implemented in Vue components, $parent will get these to the built-in components, the problem is that this.$parent is inconsistent with other platforms, the solution is to use this.$ parent.$parent Get or customize the root node of the component from view to div
vm.$root	The root Vue instance of the current component tree Details	√	√	√
vm.$children	当前实例的直接子组件 详情	√	√	√	H5端 view、text 等内置标签是以 Vue 组件方式实现，$children 会获取到这些内置组件，导致的问题是 this.$children 与其他平台不一致，解决方式是使用 this.$children.$children 获取或自定义组件根节点由 view 改为 div
vm.$slots	用来访问被插槽分发的内容 详情	√	√	√
vm.$scopedSlots	Used to access scoped Slots details	√	√	√
vm.$refs	An object that holds all DOM elements and component instances registered with the ref attribute Details	√	√	√	Non-H5 terminal can only be used to obtain custom components, not to obtain built-in component instances (such as: view, text)
vm.$isServer	Whether the current Vue instance is running on the server Details	√	√	x	App always returns false
vm.$attrs	Contains attribute bindings that are not recognized (and obtained) as props in the parent scope details	√	√	x
vm.$listeners	Contains the v-on event listeners in the parent scope (without the .native decorator) [details](https://v2.cn.vuejs.org/v2/api/#vm -listeners)	√	√	x	-

Instance method

Instance Method	Description	H5	App	Mini Program	Description
vm.$watch()	Watch the changes of an expression or a function calculation result on a Vue instance Details	√	√	√
vm.$set()	This is an alias for the global Vue.set Details	√	√	√
vm.$delete()	This is an alias for global Vue.delete Details	√	√	√
vm.$on()	Monitor custom events on the current instance Details	√	√	√
vm.$once()	Listen to a custom event, but only trigger once Details	√	√	√
vm.$off()	Remove custom event listener Details	√	√	√
vm.$emit()	Trigger an event on the current instance Details	√	√	√
vm.$mount()	Manually mount an unmounted instance details	√	x	x
vm.$forceUpdate()	Force Vue instance to re-render details	√	√	√
vm.$nextTick()	Delay the callback until after the next DOM update loop Details	√	√	√
vm.$destroy()	Completely destroy an instance Details	√	√	√	-

Template directive

Vue Directive	Description	H5	App	Mini Program	Description
v-text	Update element's textContent details	√	√	√
v-html	Update the innerHTML of the element Details	√	√	x	WeChat MiniApp will be converted to rich -text
v-show	Switch the display CSS property of an element according to the true or false value of the expression Details	√	√	√
v-if	Conditionally render elements based on the truthiness of the value of the expression details	√	√	√
v-else	Add "else block" to v-if or v-else-if Details	√	√	√
v-else-if	means the "else if block" of v-if. Can be chained Details	√	√	√
v-for	Rendering elements or template blocks multiple times based on source data Details	√	√	√
v-on	Binding event listeners Details	√	√	√
v-bind	Dynamically bind one or more attributes, or a component prop to an expression Details	√	√	√
v-model	Create two-way binding on form controls or components Details	√	√	√
v-pre	Skip the compilation process of this element and its child elements Details	√	√	x
v-cloak	This directive remains on the element until the associated instance finishes compiling Details	√	x	x
v-once	Render elements and components only once Details	√	√	x	-

Special attributes

Special Properties	Description	H5	App	Mini Program	Description
key	Mainly used in Vue's virtual DOM algorithm to identify VNodes when comparing old and new nodes Details	√	√	√
ref	ref is used to register reference information for elements or subcomponents Details	√	√	√	Only for non-H5 platforms Obtaining a vue component instance cannot obtain a built-in component instance
Yes	is used for dynamic components and works based on the restrictions of templates in the DOM Details	√	√ (need to pass in String type)	x	-

Built-in components

Built-in Components	Description	H5	App	Mini Programs	Description
component	Renders a "meta-component" as a dynamic component. Determine which component is rendered according to the value of is Details	√	√	x
transition	Transition effect as a single element/component Details	√	x	x
transition-group	Transition effects as multiple elements/components Details	√	x	x
keep-alive	When wrapping dynamic components, inactive component instances are cached instead of destroying them Details	√	x	x
slot	As a content distribution slot in a component template Details	√	√	√	-
template	is not a component, it is just a wrapper element, it will not do any rendering in the page, it only accepts control properties [details](https://uniapp.dcloud.io/component/vue-component?id= template)	√	√	√	-

Global variable

The way to implement global variables needs to follow the development specifications of Vue single file mode.

Other configuration

When Vue components are compiled to the applet platform, they will be compiled into components of the corresponding platform. Some applet platforms support the options option (for specific options, please refer to the custom components section of the corresponding applet platform documentation). Generally, the default can be used, if there are special requirements The options property can be added to the Vue component.

属性	类型	默认值	描述	平台兼容性
multipleSlots	Boolean	true	在组件定义时的选项中启动多slot支持
styleIsolation	String	apply-shared	组件样式隔离方式，具体配置选项参见：组件样式隔离	微信小程序
addGlobalClass	Boolean	true	这个选项等价于设置 styleIsolation: apply-shared ，但设置了 styleIsolation 选项后这个选项会失效	微信小程序
virtualHost	Boolean	false	将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定，启用后可以通过 mergeVirtualHostAttributes 合并合并组件虚拟节点外层属性	微信小程序、支付宝小程序（默认值为 true）、抖音小程序（4.02+）

export default {
  props: ['data'],
  data(){ return { } },
  options: {
    virtualHost: true
  }
}

Common problem

1. How to get the data passed on the previous page

Obtained in onLoad, the parameter of onLoad is the data passed by other pages to open the current page.

2. How to set global data and global methods

uni-app has built-in Vuex. For use in the app, please refer to hello-uniapp store/index.js.

	//store.js
	import Vue from 'vue'
	import Vuex from 'vuex'
	Vue.use(Vuex)
	const store = new Vuex.Store({
		state: {...},
		mutations: {...},
		actions: {...}
	})

	export default store

	//main.js
	...
	import store from './store'
	Vue.prototype.$store = store
	const app = new Vue({
		store,...
	})
	...

	//test.vue When using:
	import {mapState,mapMutations} from 'vuex'

3. How to catch onError of app

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:

	export default {
		// Only apps have an onLaunch lifecycle
		onLaunch () {
		   // ...
		},

		// capture app error
		onError (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):

1. 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

	<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>

export default {
    data() {
        return {
            scrollTop: 0,
            old: {
                scrollTop: 0
            }
        }
    },
    methods: {
        scroll: function(e) {
            this.old.scrollTop = e.detail.scrollTop
        },
        goTop: function(e) {
            this.scrollTop = this.old.scrollTop
            this.$nextTick(function() {
                this.scrollTop = 0
            });
        }
    }
}

2. Monitor the scroll event, get the value of the internal change of the component, and update its binding value in real time

	<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>

	export default {
		data() {
			return {
				scrollTop: 0,
			}
		},
		methods: {
			scroll: function(e) {
				// If you use this method, please add debounce by yourself
				this.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 .