English
English
# vue
uni-app x的vue规范，按照vue3规范实现，但目前不支持setup组合式写法，仅支持option选项式写法。
本文暂时只包括兼容性表格，vue功能详情另见 vue3概述、Vue3 API。
uni-app x中vue的用法，有单独的示例应用：hello uvue。这里都是可以跑通的使用样例代码。
# 全局 API兼容性
# 应用实例
注意：
- app.use:
app.use支持通过对象字面量、函数及definePlugin方式定义插件。
支持传递插件参数，当传递插件参数时，app的类型需要指定为VueApp。
// main.uts
export function createApp() {
const app = createSSRApp(App)
// 通过对象字面量方式注册插件
app.use({
install(app) {
app.config.globalProperties.plugin1 = "plugin1"
}
})
// 通过函数方式注册插件
app.use(function (app) {
app.config.globalProperties.plugin2 = "plugin2"
})
// 通过 definePlugin + 对象字面量方式注册插件
const plugin3= definePlugin({
install(app) {
app.config.globalProperties.plugin3 = "plugin3"
}
})
app.use(plugin3)
// 通过 definePlugin + 函数方式注册插件
const plugin4= definePlugin(function (app) {
app.config.globalProperties.plugin4 = "plugin4"
})
app.use(plugin4)
// 注册插件时传递参数
// 注意：当传递插件参数时，app 的类型需要指定为 VueApp
app.use(function (app: VueApp, arg1:string, arg2:string) {
app.config.globalProperties.plugin5 = `${arg1}-${arg2}`
}, "arg1", "arg2");
}
- app.config.globalProperties: 请注意，
globalProperties是一个保留关键字，因此在项目中请勿声明名为globalProperties的变量。
在向globalProperties注册方法时，请使用直接函数表达式方式进行赋值。不支持先声明函数，再将其注册到globalProperties上的方式。同时，注册的函数一旦被赋值，不允许进行修改。
# 通用
# 响应式兼容性
# 响应式: 核心
# 响应式: 工具
# 响应式: 进阶
# 函数 event 参数的类型
# 指令
注意：
- v-html: 在
App-android平台，v-html指令通过编译为 rich-text 组件实现。因此，v-html指令的内容必须是rich-text支持的格式, 并且要遵循标签嵌套规则，例如，swiper标签内只允许嵌套swiper-item标签。
同时，受限于rich-text组件不支持class样式，v-html指令中同样不支持class样式。
绑定v-html的标签内的内容会被忽略，v-html指令的内容会编译为rich-text组件渲染为该标签的子节点。
# 事件处理
- 事件修饰符 只支持
stop和once。
# script
- 仅支持
export default {}方式定义组件。 data仅支持函数返回对象字面量方式。
<script lang="uts">
export default {
data() {
return {
// 必须写这里
}
}
}
</script>
# 应用生命周期
uni-app x 新增了 onLastPageBackPress 和 onExit 应用级生命周期，Android退出应用逻辑写在app.uvue里，新建项目的模板自动包含相关代码。如需修改退出逻辑，请直接修改相关代码。
# 组件
# 特殊元素
- App 端，如需页面级滚动，根节点必须是
scroll-view标签。
# 特殊 Attributes
# 生命周期选项
# 插件
暂不支持vue插件，比如pinia、vuex、i18n、router。简单的状态管理可以参考文档全局变量和状态管理。
# 选项式 API兼容性
# 状态选项
# 渲染选项
# 组合选项
注意：
- inject: 当使用
inject声明从上层提供方注入的属性时，支持两种写法：字符串数组和对象。推荐使用对象写法，因为当使用数组方法时，类型会被推导为any | null类型。
使用对象写法时，额外增加type属性用于标记类型。如果注入的属性类型不是基础数据类型，需要通过PropType来标记类型。
export default {
inject: {
provideString: {
type: String,
default: 'default provide string value'
},
provideObject: {
type: Object as PropType<UTSJSONObject>
},
provideMap: {
type: Object as PropType<Map<string, string>>,
default: (): Map<string, string> => {
return new Map<string, string>([['key', 'default provide map value']])
}
}
}
}
- mixins:
mixins仅支持通过字面量对象方式和defineMixin函数方式定义。
const mixin1 = defineMixin({
onLoad() {
console.log('mixin1 onLoad')
}
})
export default {
mixins: [
mixin1,
{
data() {
return {
mixin2: 'mixin2'
}
}
}
]
}
同名属性会被覆盖，同名生命周期会依次执行。
同名属性的优先级如下：
- 在
app.mixin内嵌入的 mixin < 在app.mixin中声明的 mixin < 在page.mixin内嵌入的 mixin < 在page.mixin中声明的 mixin < 在component.mixin内嵌入的 mixin < 在component.mixin中声明的 mixin
同名生命周期的执行顺序如下：
- 在
app.mixin内嵌入的 mixin - 在
app.mixin中声明的 mixin - 在
page.mixin内嵌入的 mixin - 在
page.mixin中声明的 mixin - 在
component.mixin内嵌入的 mixin - 在
component.mixin中声明的 mixin