在 eeui 中使用 Vue.js
如果没有特别指示,文章中的 "Vue.js" 或者 "Vue" 都指的是 v2 版本的 Vue。
只含有运行时的构建版本
如果你熟悉 Vue.js,你应该知道 Vue.js 有两种构建版本: 运行时 + 编译器 与 只包含运行时。它们之间的区别在于编译器是否需要能够在运行时编译 template
选项。由于运行时构建版本比完整版本的构建版本轻约 30%(Vue 官方估算),为了更好的性能和更小的代码体积,eeui 集成的是运行时版本的 Vue。
具体来说,差异如下:
- 定义组件时不支持
template
选项。 - 不支持使用
x-templates
。 - 不支持使用
Vue.compile
。
平台的差异
Vue.js 最初是为 Web 平台设计的。虽然可以基于eeui开发原生应用程序,但是仍然存在许多eeui 与 Web 平台的差异。
与 Web 平台的主要差异是: 执行环境、DOM、样式和事件。
执行环境
eeui 主要用于编写多页的应用程序,每个页面都对应了原生开发中的 View 或者 Activity,并且保持自己的上下文。即使 eeui 的所有页面都使用的都是同一个 Javascript 引擎的实例(virtual machine),每个页面是执行环境也是互相隔离的(基于 Sandbox 技术)。
具体来讲,每个页面的 Vue 变量都是不同的实例,即使是写在 Vue 上的“全局”配置(Vue.config.xxx
)也只会影响 eeui 上的单个页面。
DOM
因为在 Android 和 iOS 上没有 DOM(Document Object Model),如果你要手动操作和生成 DOM 元素的话可能会遇到一些兼容性问题。在你使用现代前端框架的情况下,操作数据与组件而不是生成的元素是一个比较好的做法。
一些与 DOM 相关的特性,比如 v-html
,vm.$el
,template
选项,在不同的平台上可能无法获得相同的反应。
准确来说,vm.$el
属性类型在web环境下是HTMLElement
,但是在移动端并没有这个类型。实际上,它是一个由 eeui 文档对象模型 定义的特殊数据结构。
样式
样式表和 CSS 规则是由 eeui js 框架和原生渲染引擎管理的。要实现完整的 CSS 对象模型(CSSOM:CSS Object Model)并支持所有的 CSS 规则是非常困难的,而且没有这个必要。
出现性能考虑,eeui 目前只支持单个类选择器,并且只支持 CSS 规则的子集。详情请参阅 通用样式 与 文本样式。
在 eeui 里, 每一个 Vue 组件的样式都是 scoped。
事件
目前在 eeui 里不支持事件冒泡和捕获,因此 eeui 原生组件不支持事件修饰符,例如.prevent
,.capture
,.stop
,.self
。
此外,按键修饰符以及系统修饰键 例如 .enter
,.tab
,.ctrl
,.shift
在移动端基本没有意义,在 eeui 中也不支持。
支持的功能
全局配置
Vue “全局”配置只会影响 eeui 上的单一页面,配置不会在不同的 eeui 页面之间共享。
Vue 全局配置 | 是否支持 | 说明 |
---|---|---|
Vue.config.silent | 支持 | - |
Vue.config.optionMergeStrategies | 支持 | - |
Vue.config.devtools | 不支持 | - |
Vue.config.errorHandler | 支持 | - |
Vue.config.warnHandler | 支持 | - |
Vue.config.ignoredElements | 支持 | 不推荐 |
Vue.config.keyCodes | 不支持 | - |
Vue.config.performance | 不支持 | - |
Vue.config.productionTip | 支持 | - |
全局 API
Vue 全局 API | 是否支持 | 说明 |
---|---|---|
Vue.extend | 支持 | - |
Vue.nextTick | 支持 | - |
Vue.set | 支持 | - |
Vue.delete | 支持 | - |
Vue.directive | 支持 | - |
Vue.filter | 支持 | - |
Vue.component | 支持 | - |
Vue.use | 支持 | - |
Vue.mixin | 支持 | - |
Vue.version | 支持 | - |
Vue.compile | 不支持 | eeui 用的是 只包含运行时构建 |
选项
Vue 选项 | 是否支持 | 说明 |
---|---|---|
data | 支持 | - |
props | 支持 | - |
propsData | 支持 | - |
computed | 支持 | - |
methods | 支持 | - |
watch | 支持 | - |
el | 支持 | - |
template | 不支持 | eeui 用的是 只包含运行时构建 |
render | 支持 | 不推荐 |
renderError | 支持 | - |
directives | 支持 | - |
filters | 支持 | - |
components | 支持 | - |
parent | 支持 | 不推荐 |
mixins | 支持 | - |
extends | 支持 | - |
provide/inject | 支持 | 不推荐 |
name | 支持 | - |
delimiters | 支持 | 不推荐 |
functional | 支持 | - |
model | 支持 | - |
inheritAttrs | 支持 | - |
comments | 不支持 | - |
生命周期钩子
Vue 组件的实例生命周期钩子将在特定的阶段发出,详情请参考 Vue 组件的生命周期图示。
Vue 生命周期钩子 | 是否支持 | 说明 |
---|---|---|
beforeCreate | 支持 | - |
created | 支持 | - |
beforeMount | 支持 | - |
mounted | 支持 | 详见下文解释 |
beforeUpdate | 支持 | - |
updated | 支持 | - |
activated | 不支持 | 不支持<keep-alive> |
deactivated | 不支持 | 不支持<keep-alive> |
beforeDestroy | 支持 | - |
destroyed | 支持 | - |
errorCaptured | 支持 | - |
TIP
具体详见生命周期篇。
实例属性
Vue 实例属性 | 是否支持 | 说明 |
---|---|---|
vm.$data | 支持 | - |
vm.$props | 支持 | - |
vm.$el | 支持 | - |
vm.$options | 支持 | - |
vm.$parent | 支持 | - |
vm.$root | 支持 | - |
vm.$children | 支持 | - |
vm.$slots | 支持 | - |
vm.$scopedSlots | 支持 | - |
vm.$refs | 支持 | - |
vm.$isServer | 支持 | 永远是false |
vm.$attrs | 支持 | - |
vm.$listeners | 支持 | - |
实例方法
Vue 实例方法 | 是否支持 | 说明 |
---|---|---|
vm.$watch() | 支持 | - |
vm.$set() | 支持 | - |
vm.$delete() | 支持 | - |
vm.$on() | 支持 | - |
vm.$once() | 支持 | - |
vm.$off() | 支持 | - |
vm.$emit() | 支持 | - |
vm.$mount() | 不支持 | - |
vm.$forceUpdate() | 支持 | - |
vm.$nextTick() | 支持 | - |
vm.$destroy() | 支持 | - |
模板指令
Vue 指令 | 是否支持 | 说明 |
---|---|---|
v-text | 支持 | - |
v-html | 不支持 | - |
v-show | 不支持 | 不支持 display: none; |
v-if | 支持 | - |
v-else | 支持 | - |
v-else-if | 支持 | - |
v-for | 支持 | - |
v-on | 支持 | 不支持事件修饰符 |
v-bind | 支持 | - |
v-model | 支持 | - |
v-pre | 支持 | - |
v-cloak | 不支持 | 只支持单类名选择器 |
v-once | 支持 | - |
特殊属性
Vue 特殊属性 | 是否支持 | 说明 |
---|---|---|
key | 支持 | - |
ref | 支持 | - |
slot | 支持 | - |
slot-scope | 支持 | - |
scope | 支持 | 不推荐 |
is | 支持 | - |
内置组件
Vue 内置组件 | 是否支持 | 说明 |
---|---|---|
component | 支持 | - |
transition | 不支持 | 在移动端 enter 与 leave 的概念可能有点不同, 并且 eeui 不支持display: none; |
transition-group | 不支持 | 跟 transition 一样 |
keep-alive | 不支持 | 移动端的原生组件不能被前端缓存 |
slot | 支持 | - |