# 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端 viewtext 等内置标签是以 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
            });
        }
    }
}

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