Vue 2.x 在 Weex 和 Web 中的差别

平台差别

Vue.js 最初是为 Web 平台设计的，虽然能够基于 Weex 开发原生应用，可是 Web 开发和原生开发毕竟不一样，在功能和开发体验上都有一些差别，这些差别从本质上讲是原生开发平台和 Web 平台之间的差别，能够经过《Weex 和 Web 平台的差别》了解更多细节和缘由。

因为运行平台存在差别，Weex 不支持 Vue 中与 DOM 相关的功能：

• 不支持事件冒泡和捕获机制，.prevent 、.capture 、.stop 、.self 等事件修饰符在原生环境中无心义。
• 键盘事件的 .{keyCode | keyAlias} 修饰符在原生环境中无心义。
• 没法经过 vm.$el 获取界面元素，原生环境中没有 DOM Element。
• 无需自行调用 vm.$mount，默认会将入口组件挂载到原生应用的视图中。
• 不支持 v-html 和 v-text 指令。

功能差别

仅引入了 Vue Runtime

Vue 除了提供默认的完整包之外，还提供一个更小巧的 vue.runtime.js，在这个文件中移除了模板编译的相关操做，Weex 中也仅引入 Vue Runtime 的功能，这样作除了能够减小代码体积之外，还能减小运行期编译模板的负担，提高性能。

具体的差别有：

• 定义组件时不支持使用 template 属性。
• 不支持使用 x-templates。
• 不支持使用 Vue.compile。

隔离多页面的做用域

Weex 在原生端使用的是“多页”的实现，不一样的 js bundle 将会在不一样的原生页面中执行；也就是说，不一样的 js bundle 之间将不一样共享 js 变量。即便是 Vue 这个变量，在不一样页面中也对应了不一样的引用。

基于这个特性，Vue 中全局功能将只在当前页面内生效：

• Vue.config
• Vue.component
• Vue.directive
• Vue.filter
• Vue.mixin
• Vue.use

注：以上接口的功能并未受影响，只是其生效范围将会限制在同一页面内。

样式差别

Web 中的 CSS 很是的灵活，积累了特别多的属性，支持多种布局方法；这是其优点，也是浏览器性能优化的一个瓶颈。

Weex 中的样式是由原生渲染器解析的，出于性能和功能复杂度的考虑，Weex 对 CSS 的特性作了一些取舍，使其更符合最佳实践。

单类名选择器和做用域

Weex 中只支持单个类名选择器，不支持关系选择器，也不支持属性选择器。

/* 支持单个类名选择器 */ .one-class { font-size: 36px; }   /* 不支持关系选择器 */ .parent > .child { padding-top: 10px; }   /* 不支持属性选择器，不支持 `v-cloak` 指令 */ [v-cloak] { color: #FF6600; }

这个只是对样式定义的限制，不影响样式类名的使用，在标签中能够添加多个样式类名，如：

<template> <div class="one two three"><div> </template>

组件级别的做用域

在 Weex 中，写在组件 <style> 里的样式只能用在当前组件中，默认是 scoped 做用域。为了保持和 Native 的一致性，建议在 .vue文件中写样式时，加上 scoped 属性，即： <style scoped>。

支持的样式属性

Weex 支持的样式特性是 CSS 的子集，而且会不断扩充；在实现过程当中咱们参考了 CSS 属性在浏览器中的使用频率，优先实现其中频率最高的一些属性。

Weex 支持了基本的盒模型和 flexbox 布局，以及其余经常使用样式，详情可参考Weex 通用样式文档。

在编写样式时，还应该注意一下几点：

• 不须要写样式前缀。
• Weex 不支持 display: none;，所以也不支持 v-show 指令。
• 为了优化样式解析的效率，样式属性暂不支持简写，涉及一下属性：
  • border 、border-(top|bottom|left|right)
  • margin
  • padding
  • flex

编译环境的差别

在 Weex 中使用 Vue.js ，你所须要关注的运行平台除了 Web 以外还有 Android 和 iOS ，在开发和编译环境上还有一些不一样点。针对 Web 和原平生台，将 Vue 项目源文件编译成目标文件，有两种不一样的方式：

• 针对 Web 平台，和普通 Vue 2.X 项目同样，可使用任意官方推荐的方式编译源文件，如 Webpack + vue-loader 或者 Browserify + vueify 。
• 针对 Android 和 iOS 平台，咱们提供了 weex-loader 工具支持编译 .vue 格式的单文件组件；也就是说，目前只能使用 Webpack + weex-loader 来生成原生端可用的 js bundle。

使用 weex-loader

weex-loader 是 Webpack 的一个加载器，使用方法参考其官方文档。须要提醒的是，若是 Webpack 配置的入口文件是个 .vue 格式的文件的话，还须要额外传递 entry 参数，一般设置为 true，表示将当前组件做为入口组件。为了能正常匹配 .vue 文件，Webpack 配置文件中 weex-loader 的匹配规则也须要有所调整。

module.exports = { // 针对 .vue 文件要添加 entry 参数 entry: './path/to/App.vue?entry=true',   // 其余配置项 ...   module: { loaders: [{   // 匹配包含了 entry 参数的 .vue 文件路径 test: /\.vue(\?[^?]+)?$/, loaders: ['weex-loader'] }] }, }

若是使用 .js 文件做为 Webpack 配置的入口文件，则不须要额外配置这些参数，咱们推荐使用 Javascript 文件做为编译的入口文件。

搭建原生开发环境

Weex 项目生成的是原生应用，学习一些开发原生应用的基础知识，会对你开发 Weex 项目颇有帮助。参考《集成 Weex 到已有应用》了解更多信息。