在 eeui 中使用 Vue.js

如果没有特别指示,文章中的 "Vue.js" 或者 "Vue" 都指的是 v2 版本的 Vue。

只含有运行时的构建版本

如果你熟悉 Vue.js,你应该知道 Vue.js 有两种构建版本: 运行时 + 编译器只包含运行时 (opens new window)。它们之间的区别在于编译器是否需要能够在运行时编译 template 选项。由于运行时构建版本比完整版本的构建版本轻约 30%(Vue 官方估算),为了更好的性能和更小的代码体积,eeui 集成的是运行时版本的 Vue。

具体来说,差异如下:

平台的差异

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-htmlvm.$eltemplate 选项,在不同的平台上可能无法获得相同的反应。

准确来说,vm.$el (opens new window)属性类型在web环境下是HTMLElement,但是在移动端并没有这个类型。实际上,它是一个由 eeui 文档对象模型 定义的特殊数据结构。

样式

样式表和 CSS 规则是由 eeui js 框架和原生渲染引擎管理的。要实现完整的 CSS 对象模型(CSSOM:CSS Object Model)并支持所有的 CSS 规则是非常困难的,而且没有这个必要。

出现性能考虑,eeui 目前只支持单个类选择器,并且只支持 CSS 规则的子集。详情请参阅 通用样式文本样式

在 eeui 里, 每一个 Vue 组件的样式都是 scoped (opens new window)

事件

目前在 eeui 里不支持事件冒泡和捕获,因此 eeui 原生组件不支持事件修饰符 (opens new window),例如.prevent.capture.stop.self

此外,按键修饰符 (opens new window)以及系统修饰键 (opens new window) 例如 .enter.tab.ctrl.shift 在移动端基本没有意义,在 eeui 中也不支持。

支持的功能

全局配置

Vue “全局”配置只会影响 eeui 上的单一页面,配置不会在不同的 eeui 页面之间共享。

Vue 全局配置 是否支持 说明
Vue.config.silent (opens new window) 支持 -
Vue.config.optionMergeStrategies (opens new window) 支持 -
Vue.config.devtools (opens new window) 不支持 -
Vue.config.errorHandler (opens new window) 支持 -
Vue.config.warnHandler (opens new window) 支持 -
Vue.config.ignoredElements (opens new window) 支持 不推荐
Vue.config.keyCodes (opens new window) 不支持 -
Vue.config.performance (opens new window) 不支持 -
Vue.config.productionTip (opens new window) 支持 -

全局 API

Vue 全局 API 是否支持 说明
Vue.extend (opens new window) 支持 -
Vue.nextTick (opens new window) 支持 -
Vue.set (opens new window) 支持 -
Vue.delete (opens new window) 支持 -
Vue.directive (opens new window) 支持 -
Vue.filter (opens new window) 支持 -
Vue.component (opens new window) 支持 -
Vue.use (opens new window) 支持 -
Vue.mixin (opens new window) 支持 -
Vue.version (opens new window) 支持 -
Vue.compile (opens new window) 不支持 eeui 用的是 只包含运行时构建 (opens new window)

选项

Vue 选项 是否支持 说明
data (opens new window) 支持 -
props (opens new window) 支持 -
propsData (opens new window) 支持 -
computed (opens new window) 支持 -
methods (opens new window) 支持 -
watch (opens new window) 支持 -
el (opens new window) 支持 -
template (opens new window) 不支持 eeui 用的是 只包含运行时构建 (opens new window)
render (opens new window) 支持 不推荐
renderError (opens new window) 支持 -
directives (opens new window) 支持 -
filters (opens new window) 支持 -
components (opens new window) 支持 -
parent (opens new window) 支持 不推荐
mixins (opens new window) 支持 -
extends (opens new window) 支持 -
provide/inject (opens new window) 支持 不推荐
name (opens new window) 支持 -
delimiters (opens new window) 支持 不推荐
functional (opens new window) 支持 -
model (opens new window) 支持 -
inheritAttrs (opens new window) 支持 -
comments (opens new window) 不支持 -

生命周期钩子

Vue 组件的实例生命周期钩子将在特定的阶段发出,详情请参考 Vue 组件的生命周期图示 (opens new window)

Vue 生命周期钩子 是否支持 说明
beforeCreate (opens new window) 支持 -
created (opens new window) 支持 -
beforeMount (opens new window) 支持 -
mounted (opens new window) 支持 详见下文解释
beforeUpdate (opens new window) 支持 -
updated (opens new window) 支持 -
activated (opens new window) 不支持 不支持<keep-alive>
deactivated (opens new window) 不支持 不支持<keep-alive>
beforeDestroy (opens new window) 支持 -
destroyed (opens new window) 支持 -
errorCaptured (opens new window) 支持 -

TIP

具体详见生命周期篇。

实例属性

Vue 实例属性 是否支持 说明
vm.$data (opens new window) 支持 -
vm.$props (opens new window) 支持 -
vm.$el (opens new window) 支持 -
vm.$options (opens new window) 支持 -
vm.$parent (opens new window) 支持 -
vm.$root (opens new window) 支持 -
vm.$children (opens new window) 支持 -
vm.$slots (opens new window) 支持 -
vm.$scopedSlots (opens new window) 支持 -
vm.$refs (opens new window) 支持 -
vm.$isServer (opens new window) 支持 永远是false
vm.$attrs (opens new window) 支持 -
vm.$listeners (opens new window) 支持 -

实例方法

Vue 实例方法 是否支持 说明
vm.$watch() (opens new window) 支持 -
vm.$set() (opens new window) 支持 -
vm.$delete() (opens new window) 支持 -
vm.$on() (opens new window) 支持 -
vm.$once() (opens new window) 支持 -
vm.$off() (opens new window) 支持 -
vm.$emit() (opens new window) 支持 -
vm.$mount() (opens new window) 不支持 -
vm.$forceUpdate() (opens new window) 支持 -
vm.$nextTick() (opens new window) 支持 -
vm.$destroy() (opens new window) 支持 -

模板指令

Vue 指令 是否支持 说明
v-text (opens new window) 支持 -
v-html (opens new window) 不支持 -
v-show (opens new window) 不支持 不支持 display: none;
v-if (opens new window) 支持 -
v-else (opens new window) 支持 -
v-else-if (opens new window) 支持 -
v-for (opens new window) 支持 -
v-on (opens new window) 支持 不支持事件修饰符 (opens new window)
v-bind (opens new window) 支持 -
v-model (opens new window) 支持 -
v-pre (opens new window) 支持 -
v-cloak (opens new window) 不支持 只支持单类名选择器
v-once (opens new window) 支持 -

特殊属性

Vue 特殊属性 是否支持 说明
key (opens new window) 支持 -
ref (opens new window) 支持 -
slot (opens new window) 支持 -
slot-scope (opens new window) 支持 -
scope (opens new window) 支持 不推荐
is (opens new window) 支持 -

内置组件

Vue 内置组件 是否支持 说明
component (opens new window) 支持 -
transition (opens new window) 不支持 在移动端 enterleave 的概念可能有点不同, 并且 eeui 不支持display: none;
transition-group (opens new window) 不支持 transition 一样
keep-alive (opens new window) 不支持 移动端的原生组件不能被前端缓存
slot (opens new window) 支持 -