在 eeui 中使用 Vue.js

• 只含有运行时的构建版本
• 平台的差异
  • 执行环境
  • DOM
  • 样式
  • 事件
• 支持的功能
  • 全局配置
  • 全局 API
  • 选项
  • 生命周期钩子
  • 实例属性
  • 实例方法
  • 模板指令
  • 特殊属性
  • 内置组件

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

只含有运行时的构建版本

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

具体来说，差异如下：

• 定义组件时不支持 template (opens new window) 选项。
• 不支持使用 x-templates (opens new window)。
• 不支持使用 Vue.compile (opens new window)。

平台的差异

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 (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)	不支持	在移动端 enter 与 leave 的概念可能有点不同， 并且 eeui 不支持display: none;
transition-group (opens new window)	不支持	跟 transition 一样
keep-alive (opens new window)	不支持	移动端的原生组件不能被前端缓存
slot (opens new window)	支持	-