首页 > 代码库 > Vue 2.x 在 Weex 和 Web 中的差异

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

2024-09-01 12:08:15   222人阅读

平台差异

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 到已有应用》了解更多信息。

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


联系
我们