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