在 weiui 中使用 Vue.js

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

只含有运行时的构建版本

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

具体来说,差异如下:

平台的差异

Vue.js 最初是为 Web 平台设计的。虽然可以基于weiui开发原生应用程序,但是仍然存在许多weiui 与 Web 平台的差异

与 Web 平台的主要差异是: 执行环境、DOM、样式和事件。

执行环境

weiui 主要用于编写多页的应用程序,每个页面都对应了原生开发中的 View 或者 Activity,并且保持自己的上下文。即使 weiui 的所有页面都使用的都是同一个 Javascript 引擎的实例(virtual machine),每个页面是执行环境也是互相隔离的(基于 Sandbox 技术)。

具体来讲,每个页面的 Vue 变量都是不同的实例,即使是写在 Vue 上的“全局”配置(Vue.config.xxx)也只会影响 weiui 上的单个页面。

DOM

因为在 Android 和 iOS 上没有 DOM(Document Object Model),如果你要手动操作和生成 DOM 元素的话可能会遇到一些兼容性问题。在你使用现代前端框架的情况下,操作数据与组件而不是生成的元素是一个比较好的做法。

一些与 DOM 相关的特性,比如 v-htmlvm.$eltemplate 选项,在不同的平台上可能无法获得相同的反应。

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

样式

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

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

在 weiui 里, 每一个 Vue 组件的样式都是 scoped

事件

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

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

支持的功能

全局配置

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

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 不支持 weiui 用的是 只包含运行时构建

选项

Vue 选项 是否支持 说明
data 支持 -
props 支持 -
propsData 支持 -
computed 支持 -
methods 支持 -
watch 支持 -
el 支持 -
template 不支持 weiui 用的是 只包含运行时构建
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 不支持 在移动端 enterleave 的概念可能有点不同, 并且 weiui 不支持display: none;
transition-group 不支持 transition 一样
keep-alive 不支持 移动端的原生组件不能被前端缓存
slot 支持 -