Vue 2.x differences in Weex and the Web

Platform Differences

Vue.js was originally designed for the web platform, although native applications can be developed based on Weex, but Web development and native development are different, and there are differences in functionality and development experience, which are essentially differences between native development platforms and web platforms, and can be achieved through the Weex and web Platform differences "For more details and reasons.

Weex does not support DOM-related features in Vue because of differences in the operating platform:

• Event bubbling and trapping mechanisms are not supported,,,, and .prevent .capture .stop .self Other event modifiers are meaningless in the native environment.
• Modifier for keyboard events is .{keyCode | keyAlias} meaningless in the native environment.
• vm.$elthere is no DOM element in the native environment by getting interface elements.
• You do not need to call yourself vm.$mount , and the portal component is mounted to the native app's view by default.
• No support v-html and v-text instructions.

Feature differences are only introduced in Vue Runtime

In addition to providing the default full package, Vue also provides a smaller vue.runtime.js , in this file to remove the template compilation related operations, Weex also only introduced the Vue Runtime function, in addition to reduce the code volume, but also reduce the burden of the run-time compilation template, improve performance.

The specific differences are:

• Using attributes is not supported when defining components template .
• Use is not supported x-templates .
• Use is not supported Vue.compile .

Isolate the scope of multiple pages

Weex uses the "multi-page" implementation at the native end, the different JS bundles will be executed on different native pages, that is to say, different JS bundles will share the JS variable. Even with Vue this variable, different references are made to different pages.

Based on this feature, the global functionality in Vue will only take effect within the current page:

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

Note: The functionality of the above interface is not affected, but its effective scope will be limited to the same page.

Style differences

CSS in the Web is very flexible, has accumulated a lot of attributes, support a variety of layout methods, this is its advantage, but also a bottleneck of browser performance optimization.

The styles in Weex are parsed by the native renderer, and for performance and functionality complexity, Weex has made some trade-offs with CSS features to make it more consistent with best practices.

Single-class name selectors and scopes

Only a single class name selector is supported in Weex, the relationship selector is not supported, and the property selector is not supported.

/ * Support for a single class name selector * / . one-class {font-size: 36px;} / * The relationship selector is not supported * / . Parent > . Child {padding-top: 10px;} / * Property Selector not supported, ' v-cloak ' directive not supported * / [V-cloak] {color: #FF6600;}

This is only a restriction on the style definition, does not affect the use of the style class name, you can add more than one style class name in the label, such as:

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

Scope of the component level

In Weex, the styles written in <style> the component can only be used in the current assembly, which is scoped by default scoped . In order to maintain consistency with Native, it is recommended that .vue when writing styles in a file, add scoped attributes, i.e.: <style scoped> .

Supported style properties

The style attributes supported by Weex are a subset of the CSS and will be extended, and in the implementation we refer to how often CSS properties are used in the browser, giving precedence to some of the properties with the highest frequency.

Weex supports basic box models and flexbox layouts, as well as other common styles, with reference to Weex common style documents.

When writing styles, you should also pay attention to the points:

• Write style prefixes are not required.
• Weex is not supported display: none; and therefore does not support v-show directives.
• In order to optimize the efficiency of style parsing, style attributes are temporarily not supported shorthand, involving attributes:
  • border、border-(top|bottom|left|right)
  • margin
  • padding
  • flex

Differences in the compilation environment

Using Vue.js in Weex, the platform you need to focus on is Android and IOS in addition to the WEB, and there are some differences in the development and compilation environment. For Web and native platforms, the Vue project source files are compiled into target files in two different ways:

• For WEB platforms, as with the common Vue 2.X project, you can compile your source files in any officially recommended way, such as Webpack + vue-loader or browserify + vueify.
• For Android and IOS platforms, we have a single-file component that supports compiled formats for the Weex-loader tool, which .vue means that only Webpack + Weex-loader can be used to generate the JS bundle that is available on the native side.

Using Weex-loader

Weex-loader is a loader for Webpack and uses the method to refer to its official documentation. It is necessary to note that if the portal file configured by Webpack is a .vue file of a format, additional arguments will need to be passed entry , typically set to true represent the current component as a portal component. In order to properly match the .vue file, the Weex-loader matching rules in the Webpack configuration file also need to be adjusted.

module.exports = {//For. vue file to add entry parameter entry: './path/to/app.vue?entry=true ', // Other Configuration Items ... module: {loaders: [{ //Match the. Vue file path with the entry parameter test: /\.vue (\?[ ^?] +)? $/,loaders: [' Weex-loader '}]},}

If you use a .js file as a portal file for Webpack configuration, you do not need to configure these parameters, and we recommend using Javascript files as compiled entry files.

Build a native development environment

Weex projects generate native applications, and learning some of the basics of developing native applications can help you develop Weex projects. Refer to "Integrated Weex to existing applications" for more information.

Vue 2.x differences in Weex and the Web