全局配置 Vue 全局配置 描述 H5 App端 小程序 说明 Vue.config.silent 取消 Vue 所有的日志与警告 详情 √ √ √ Vue.config.optionMergeStrategies 自定义合并策略的选项 详情 √ √ √ Vue.config.devtools 配置是否允许 vue-devtools 检查代码 详情 √ x x 只在Web环境下支持 Vue.config.errorHandler 指定组件的渲染和观察期间未捕获错误的处理函数 详情 √ √ √ Vue.config.warnHandler 为 Vue 的运行时警告赋予一个自定义处理函数 详情 √ √ √ Vue.config.ignoredElements 须使 Vue 忽略在 Vue 之外的自定义元素 详情 √ √ √ 强烈不推荐,会覆盖uni-app框架配置的内置组件 Vue.config.keyCodes 给 v-on 自定义键位别名 详情 √ x x Vue.config.performance 设置为 true 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪 详情 √ x x 只在Web环境下支持 Vue.config.productionTip 设置为 false 以阻止 vue 在启动时生成生产提示 详情 √ √ √ -
全局 API Vue 全局 API 描述 H5 App端 小程序 说明 Vue.extend 使用基础 Vue 构造器,创建一个“子类” 详情 √ √ x 不可作为组件使用 Vue.nextTick 在下次 DOM 更新循环结束之后执行延迟回调 详情 √ x x Vue.set 向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新 详情 √ √ √ Vue.delete 删除对象的 property。如果对象是响应式的,确保删除能触发更新视图 详情 √ √ √ Vue.directive 注册或获取全局指令 详情 √ √ x Vue.filter 注册或获取全局过滤器 详情 √ √ x Vue.component 注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称 详情 √ √ √ Vue.use 安装 Vue.js 插件 详情 √ √ √ Vue.mixin 全局注册一个混入,影响注册之后所有创建的每个 Vue 实例 详情 √ √ √ nvue 页面暂不支持 Vue.version 提供字符串形式的 Vue 安装版本号 详情 √ √ √ Vue.compile 将一个模板字符串编译成 render 函数。只在完整版时可用。详情 √ x x uni-app使用的vue是只包含运行时的版本
选项 Vue 选项 描述 H5 App端 小程序 说明 data Vue 实例的数据对象 详情 √ √ √ props props 可以是数组或对象,用于接收来自父组件的数据 详情 √ √ √ propsData 创建实例时传递 props。主要作用是方便测试 详情 √ √ √ computed 计算属性将被混入到 Vue 实例中 详情 √ √ √ methods methods 将被混入到 Vue 实例中 详情 √ √ √ watch 一个对象,键是需要观察的表达式,值是对应回调函数 详情 √ √ √ el 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 详情 √ x x template 一个字符串模板作为 Vue 实例的标识使用 详情 √ x x uni-app使用的vue是只包含运行时的版本 render 字符串模板的代替方案,该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。详情 √ x x renderError 当 render 函数遭遇错误时,提供另外一种渲染输出,只在开发者环境下工作 详情 √ x x directives 包含 Vue 实例可用指令的哈希表 详情 √ √ x filters 包含 Vue 实例可用过滤器的哈希表 详情 √ √ √ components 包含 Vue 实例可用组件的哈希表 详情 √ √ √ parent 指定已创建的实例之父实例,在两者之间建立父子关系 详情 √ √ √ 不推荐 mixins 选项接收一个混入对象的数组 详情 √ √ √ extends 允许声明扩展另一个组件 详情 √ √ √ provide/inject 允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效 详情 √ √ √ name 允许组件模板递归地调用自身 详情 √ √ √ delimiters 改变纯文本插入分隔符 详情 √ x x functional 使组件无状态 (没有 data) 和无实例 (没有 this 上下文) 详情 √ x x model 允许一个自定义组件在使用 v-model 时定制 prop 和 event 详情 √ √ x inheritAttrs inheritAttrs属性默认值为true,表示允许组件的根节点继承$attrs包含的属性 详情 √ √ x comments 当设为 true 时,将会保留且渲染模板中的 HTML 注释 详情 √ x x -
生命周期 生命周期钩子 描述 H5 App端 小程序 说明 beforeCreate 在实例初始化之后被调用 详情 √ √ √ created 在实例创建完成后被立即调用 详情 √ √ √ beforeMount 在挂载开始之前被调用 详情 √ √ √ mounted 挂载到实例上去之后调用 详情 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTick 详情 √ √ √ beforeUpdate 数据更新时调用,发生在虚拟 DOM 打补丁之前 详情 √ √ √ updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子 详情 √ √ √ activated 被 keep-alive 缓存的组件激活时调用 详情 √ √ x deactivated 被 keep-alive 缓存的组件停用时调用 详情 √ √ x beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用 详情 √ √ √ destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁 详情 √ √ √ errorCaptured 当捕获一个来自子孙组件的错误时被调用 详情 √ √ √ -
页面及组件生命周期流程图
实例属性 Vue 实例属性 描述 H5 App端 小程序 说明 vm.$data Vue 实例观察的数据对象 详情 √ √ √ vm.$props 当前组件接收到的 props 对象 详情 √ √ √ vm.$el Vue 实例使用的根 DOM 元素 详情 √ x x vm.$options 用于当前 Vue 实例的初始化选项 详情 √ √ √ vm.$parent 父实例,如果当前实例有的话 详情 √ √ √ H5端 view
、text
等内置标签是以 Vue 组件方式实现,$parent
会获取这些到内置组件,导致的问题是 this.$parent
与其他平台不一致,解决方式是使用 this.$parent.$parent
获取或自定义组件根节点由 view
改为 div
vm.$root 当前组件树的根 Vue 实例 详情 √ √ √ vm.$children 当前实例的直接子组件 详情 √ √ √ H5端 view
、text
等内置标签是以 Vue 组件方式实现,$children
会获取到这些内置组件,导致的问题是 this.$children
与其他平台不一致,解决方式是使用 this.$children.$children
获取或自定义组件根节点由 view
改为 div
vm.$slots 用来访问被插槽分发的内容 详情 √ √ √ vm.$scopedSlots 用来访问作用域插槽 详情 √ √ √ vm.$refs 一个对象,持有注册过 ref attribute 的所有 DOM 元素和组件实例详情 √ √ √ 非H5端只能用于获取自定义组件,不能用于获取内置组件实例(如:view、text) vm.$isServer 当前 Vue 实例是否运行于服务器 详情 √ √ x App端总是返回false vm.$attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 详情 √ √ x vm.$listeners 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器 详情 √ √ x -
实例方法 实例方法 描述 H5 App端 小程序 说明 vm.$watch() 观察 Vue 实例上的一个表达式或者一个函数计算结果的变化 详情 √ √ √ vm.$set() 这是全局 Vue.set 的别名 详情 √ √ √ vm.$delete() 这是全局 Vue.delete 的别名 详情 √ √ √ vm.$on() 监听当前实例上的自定义事件 详情 √ √ √ vm.$once() 监听一个自定义事件,但是只触发一次 详情 √ √ √ vm.$off() 移除自定义事件监听器 详情 √ √ √ vm.$emit() 触发当前实例上的事件 详情 √ √ √ vm.$mount() 手动地挂载一个未挂载的实例 详情 √ x x vm.$forceUpdate() 迫使 Vue 实例重新渲染 详情 √ √ √ vm.$nextTick() 将回调延迟到下次 DOM 更新循环之后执行 详情 √ √ √ vm.$destroy() 完全销毁一个实例 详情 √ √ √ -
模板指令 Vue 指令 描述 H5 App端 小程序 说明 v-text 更新元素的 textContent 详情 √ √ √ v-html 更新元素的 innerHTML 详情 √ √ x 微信小程序会被转成 rich-text
v-show 根据表达式之真假值,切换元素的 display CSS属性 详情 √ √ √ v-if 根据表达式的值的 truthiness 来有条件地渲染元素 详情 √ √ √ v-else 为 v-if 或者 v-else-if 添加“else 块” 详情 √ √ √ v-else-if 表示 v-if 的“else if 块”。可以链式调用 详情 √ √ √ v-for 基于源数据多次渲染元素或模板块 详情 √ √ √ v-on 绑定事件监听器 详情 √ √ √ v-bind 动态地绑定一个或多个 attribute,或一个组件 prop 到表达式 详情 √ √ √ v-model 在表单控件或者组件上创建双向绑定 详情 √ √ √ v-pre 跳过这个元素和它的子元素的编译过程 详情 √ √ x v-cloak 这个指令保持在元素上直到关联实例结束编译 详情 √ x x v-once 只渲染元素和组件一次 详情 √ √ x -
特殊属性 特殊属性 描述 H5 App端 小程序 说明 key 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes 详情 √ √ √ ref ref 被用来给元素或子组件注册引用信息 详情 √ √ √ 非 H5 平台只能获取 vue 组件实例不能获取到内置组件实例 is 用于动态组件且基于 DOM 内模板的限制来工作 详情 √ √ (需传入 String 类型) x -
内置组件 内置组件 描述 H5 App端 小程序 说明 component 渲染一个“元组件”为动态组件。依 is 的值,来决定哪个组件被渲染 详情 √ √ x transition 作为单个元素/组件的过渡效果 详情 √ x x transition-group 作为多个元素/组件的过渡效果 详情 √ x x keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们 详情 √ x x slot 作为组件模板之中的内容分发插槽 详情 √ √ √ - template 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性 详情 √ √ √ -
全局变量 实现全局变量的方式需要遵循 Vue 单文件模式的开发规范。详细参考:uni-app全局变量的几种实现方式 。
其他配置 Vue 组件编译到小程序平台的时候会编译为对应平台的组件,部分小程序平台支持 options 选项(具体选项参考对应小程序平台文档的自定义组件部分),一般情况默认即可,如有特殊需求可在 Vue 组件中增加 options 属性。
属性 类型 默认值 描述 平台兼容性 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+)
常见问题 1. 如何获取上个页面传递的数据 在 onLoad 里得到,onLoad 的参数是其他页面打开当前页面所传递的数据。
2. 如何设置全局的数据和全局的方法 uni-app 内置了 Vuex ,在app里的使用,可参考 hello-uniapp
store/index.js
。
3. 如何捕获 app 的 onError 由于 onError 并不是完整意义的生命周期,所以只提供一个捕获错误的方法,在 app 的根组件上添加名为 onError 的回调函数即可。如下:
4. 组件属性设置不生效解决办法 当重复设置某些属性为相同的值时,不会同步到view层。 例如:每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。 这和props的单向数据流特性有关,组件内部scroll-top的实际值改动后,其绑定的属性并不会一同变化。
解决办法有两种(以scroll-view组件为例):
监听scroll事件,记录组件内部变化的值,在设置新值之前先设置为记录的当前值 监听scroll事件,获取组件内部变化的值,实时更新其绑定值 第二种解决方式在某些组件可能造成抖动,推荐第一种解决方式 。