vue-framework-for-Apache-Weex Differences between using Vue in Web and Weex

In Weex you can write code with Vue, a progressive framework for building user interfaces. Also you can find some tools and resources by it.

So this introduction assumes you have knowledge of Vue in the web and know the syntax and usage of Vue.

Here are some notes differences about using Vue between Weex and web.

In Weex you don't need to include Vue framework manually. It's just built-in.
You could start a Weex project with weex-toolkit. Also we will prepare one or more vue-cli template(s) in the future.
In a Weex page you don't have the host HTML code for example:

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>
    <div id="app">
      ...template content here...
    </div>
    <div>
      ...DOM out of Vue...
    </div>
    <script>
      new Vue({
        el: '#app',
        ...
      })
    </script>
  </body>
</html>

So we got some issues:

We don't support template content written in DOM.
No el to specify in Vue options. Having DOM out of Vue is not allowed.
Writing <link>, <meta> is also not allowed. (Maybe we can support some APIs to set <meta>s.)
We just write *.vue code directly.

A "hello world" example in Weex is just below:

<template>
  <div>
    <text>{{ message }}</text>
  </div>
</template>
<script>
  export const data = {
    message: 'Hello Vue!'
  }
</script>

How it works: after you finish the *.vue code, it will be transformed by weex-vue-loader into JavaScript which automatically added some code like this:

// wrap with new Vue(options)
new Vue({

  // Make weex recognize the "root" Vue component,
  // using value "body" by default.
  el: 'body',

  // content of <script>
  data: {
    message: 'Hello Vue!'
  },

  // compile <template> into render functions
  render: function () {
    with (this) {
      return _h('div', {}, [
        _h('text', { attrs: { value: message }})
      ])
    }
  },
  staticRenderFns: []
})

And it works fine in Weex.

Handling user input is working in progress.
In Weex v-html="rawHtml" is not allowed.
Btw the native components Weex supports are not same to W3C HTML Tags. See more about this here.
In Weex text node is only allowed as a child of <text> and it equals to its value attribute. So <text>Hello</text> equals to <text value="Hello"></text> and <div>Hello</div> will not work.
<style> is scoped by force.
id in <template> is not supported.
Only single-class selector in <style> is allowed. Maybe we can find some ways to support more kind of selectors.
The cost of a tag is more expensive than in web. Because each tag means a piece of full-featured native view in the deep level. So please have a tension to avoid unnecessary nested <div>s.
All the events in Weex are not propagated. So the parent will not get event when a same type event got in its child. And also we don't define any default behavior of an event. So there is not concept of .prevent, .capture, .stop, .self modifiers.
You don't worry about vendor prefixes in Weex. We don't make them happened.
You don't worry about "DOM template parsing caveats". We don't make them happened.
In Weex v-show is not supported. It may be supported in the future.
We don't support "x-templates" in <script> element.
We don't support <transition> and <transition-group>. Maybe we will support them in the future.
weex-vue-loader don't support lang attribute.
vue-router adaption work is not finished.
vuex adaption work is not finished.
devtools adaption work is not finished.
server-side rendering is not supported.
Vue.compile is not supported.
vm.$mount is not supported.
v-cloak is not supported.
Vue.mixin is not supported.
Vue.config.errorHandler is not supported.
Polyfills
- Object.assign
- Object.setPrototypeOf
- Array.from
- Promise
- Timer APIs
  - setTimeout
  - setInterval
  - clearTimeout
  - clearInterval

More informations you may need to know:

The list of components Weex supports.
The list of JavaScript APIs Weex supports.
The list of styles Weex supports.
The list of events Weex supports.
Native DOM APIs references

Something need to check in depth:

Avoid memory leaks
Deploy
test: weex-vdom-test, macaca?
community?

Nov 05 '16 03:11 Jinjiang

A few extra things I noticed, if the user writes raw render functions by hand:

Weex's class runtime module expects vnode.data.staticClass and vnode.data.class to be Arrays, but in Vue it can be a string, an Object OR an Array. To make sure a Vue component that uses render function can run in Weex, Weex's class runtime module needs to normalize these types into Arrays.

~~2. In Weex to create a text node in render functions we need to do h('text', { attrs: { value: 'Hello' }}) but in Vue you can just pass a string. Weex's createElement needs to be wrapped to normalize this.~~ Seems to already be supported judging from the tests in node.spec.js

Nov 09 '16 21:11 yyx990803

In Weex to create a text node in render functions we need to do h('text', { attrs: { value: 'Hello' }}) but in Vue you can just pass a string. Weex's createElement needs to be wrapped to normalize this.

Text node is compatible now:

// { "framework": "Vue" }

new Vue({
  el: 'body',
  render: function(createElement) {
    return createElement('div', undefined, ['Hello'])
  }
})

It just works because we did some hacks in text content:

https://github.com/vuejs/vue/blob/dev/src/platforms/weex/runtime/node-ops.js#L41:L51
https://github.com/vuejs/vue/blob/dev/src/platforms/weex/runtime/node-ops.js#L22:L32
https://github.com/vuejs/vue/blob/dev/src/platforms/weex/runtime/node-ops.js#L68:L70

Nov 10 '16 02:11 Jinjiang

Btw the native components Weex supports are not same to W3C HTML Tags. See more about this here.

Missing link for more about this here 😄

Dec 27 '16 01:12 erguotou520

Sometimes it occurs that,cannot find element root after building a vue file.( However, I cannot accurately describe when it would occur)

Do you have any suggestions about how to solve it?

Nov 10 '17 18:11 NoraGithub

@NoraGithub i've added id="root" on the root elements of each component :/

Nov 23 '17 17:11 34r7h

@irthos Thanks for your enthusiasm . I solved it by modify the webpack config.

All info is described by the commit/issue https://github.com/zwwill/yanxuan-weex-demo/pull/21

Nov 25 '17 03:11 NoraGithub

@NoraGithub how did you modify webpack.config to allow global $router?

Aug 21 '18 16:08 34r7h

vue-framework-for-Apache-Weex vue-framework-for-Apache-Weex copied to clipboard

Differences between using Vue in Web and Weex

vue-framework-for-Apache-Weex
vue-framework-for-Apache-Weex copied to clipboard