You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ha...@apache.org on 2018/12/21 02:16:12 UTC
[incubator-weex-site] branch draft updated: Update the document of
use-vue-in-weex (#257)
This is an automated email from the ASF dual-hosted git repository.
hanks pushed a commit to branch draft
in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git
The following commit(s) were added to refs/heads/draft by this push:
new 2b44a58 Update the document of use-vue-in-weex (#257)
2b44a58 is described below
commit 2b44a58abf05d64324e0289f1aa67ca39150eeb4
Author: Hanks <zh...@gmail.com>
AuthorDate: Fri Dec 21 10:16:08 2018 +0800
Update the document of use-vue-in-weex (#257)
---
docs/guide/front-end-frameworks.md | 8 +++---
docs/guide/use-vue-in-weex.md | 49 +++++++++++++++++++++------------
docs/zh/guide/front-end-frameworks.md | 2 ++
docs/zh/guide/use-vue-in-weex.md | 52 +++++++++++++++++++++++------------
4 files changed, 73 insertions(+), 38 deletions(-)
diff --git a/docs/guide/front-end-frameworks.md b/docs/guide/front-end-frameworks.md
index 4097e8f..837d08a 100644
--- a/docs/guide/front-end-frameworks.md
+++ b/docs/guide/front-end-frameworks.md
@@ -1,7 +1,5 @@
# Front-end Frameworks in Weex
-<!-- toc -->
-
Front-end technologies seem flourishing and productive. Using front-end frameworks in production is a good way to write maintainable apps.
@@ -38,7 +36,7 @@ The comment type annotation of Rax is:
### Using Directive Prologue <badge text="0.17+" type="warn" vertical="middle"/>
-Using comments is not a robust way to declare the framework type, because it may be removed during compiling or packaging. Since the v0.17, Weex supports using [Directive Prologue](http://ecma-international.org/ecma-262/5.1/#sec-14.1)）to indicate the framework type. The format of directive prologue type annotation is `"use weex:xxx";`, the `Xxx` in it is the name of front-end framework. Both `'` (single quote) and `"` (double quotes) are fine, but must be lower case.
+Using comments is not a robust way to declare the framework type, because it may be removed during compiling or packaging. Since the v0.17, Weex supports using [Directive Prologue](http://ecma-international.org/ecma-262/5.1/#sec-14.1) to indicate the framework type. The format of directive prologue type annotation is `"use weex:xxx";`, the `Xxx` in it is the name of front-end framework. Both `'` (single quote) and `"` (double quotes) are fine, but must be lower case.
> NOTICE: **The directive prologue type annotation must be placed before all runnable codes.** Only spaces, blank lines or comments can be put before it.
@@ -77,7 +75,9 @@ The compatible type annotation of Rax is:
Weex integrated the v2 version of Vue.js since WeexSDK [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0) is released at 2017/02/17. Vue (pronounced /vjuː/, like view) is a progressive front-end framework for building user interfaces. Please refer to its [official website](https://vuejs.org/) for more information.
-Please refer to [Use Vue.js on Weex](./use-vue-in-weex.html) document to learn more technics about Weex and Vue.
+::: tip
+Please refer to [Use Vue.js in Weex](./use-vue-in-weex.html) document to learn more technics about Weex and Vue.
+:::
## Rax
diff --git a/docs/guide/use-vue-in-weex.md b/docs/guide/use-vue-in-weex.md
index de3bfbe..1d9d18c 100644
--- a/docs/guide/use-vue-in-weex.md
+++ b/docs/guide/use-vue-in-weex.md
@@ -1,8 +1,8 @@
# Use Vue.js in Weex
-<!-- toc -->
+[[toc]]
-Weex integrated the v2 version of Vue.js since WeexSDK [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0) is released at 2016/02/17. Vue (pronounced /vjuː/, like view) is a progressive front-end framework for building user interfaces. Please refer to its [official website](https://vuejs.org/) for more information.
+Weex integrated the v2 version of Vue.js since WeexSDK [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0) is released at 2016/02/17. Vue is a progressive front-end framework for building user interfaces. Please refer to its [official website](https://vuejs.org/) for more information.
> If there is no special instructions, the "Vue.js" or "Vue" in this article all refers to the v2 version of Vue.js.
@@ -10,27 +10,29 @@ Weex integrated the v2 version of Vue.js since WeexSDK [v0.10.0](https://github.
If you are familiar with Vue.js, you should know that there are two available builds of Vue.js: [the **Runtime + Compiler** build and the **Runtime-only** build](https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build). The difference between them is whether to include the compiler which is able to compile the `template` option at runtime.
-Since the runtime-only builds are roughly 30% lighter-weight than their full-build counterparts, Weex is using the runtime-only build of Vue.js for better performance and less code size.
+Since the runtime-only builds are roughly 30% lighter-weight than their full-build counterparts (according to Vue's official website), Weex is using the runtime-only build of Vue.js for better performance and less code size.
Specifically, the differences are as follows:
+ The [`template`](https://vuejs.org/v2/api/#template) option is not supported when defining a component.
-+ Does not support using [`x-templates`](https://vuejs.org/v2/guide/components.html#X-Templates).
-+ Does not support using [`Vue.compile`](https://vuejs.org/v2/api/#Vue-compile).
++ Not support [`x-templates`](https://vuejs.org/v2/guide/components.html#X-Templates).
++ Not support [`Vue.compile`](https://vuejs.org/v2/api/#Vue-compile).
## Platform Differences
-Vue.js was designed for the Web platform at the beginning. Although it can be based on Weex to develop native applications, there are still many [platform differences between Weex and web](../wiki/platform-difference.html).
+Vue.js was designed for the Web platform at the beginning. Although it can develop native apps based on Weex, there are still many [platform differences between Weex and web](./platform-difference.html).
-The key platform differences are context, DOM, styles and events.
+In short, the key platform differences are running context, DOM API, styles and events.
-### Context
+### Running Context
-Weex is mostly used to write multi-page applications, each page is a native *View* or *Activity* on mobile, and has its own context. In particular, the `Vue` instances are different in each pages, and even the "global" config of Vue (`Vue.config.xxx`) only affect the single page on Weex.
+Weex is mostly used to write multi-page applications, each page is a native *View* or *Activity* on mobile, and has its own context. Although Weex is using the same javascript engine virtual machine for each page, but execution context of them are separated by the **Sandbox** technology of Weex.
-On this basis, some SPA (single-page application) technologies of Vue, such as [Vuex](https://vuex.vuejs.org/en/) and [vue-router](https://router.vuejs.org/en/) will also take effect within the single page. More colloquially, the "page" concept is virtual in SPA technologies, but it is real on Weex.
+> You can use [BroadcastChannel](../docs/api/broadcast-channel.html) to communicate between different pages.
-However, Vuex and vue-router are standalone libraries, they all have their own concept and usage scenario, you can still [use Vuex and vue-router](./advanced/use-vuex-and-vue-router.html) on Weex.
+In particular, the `Vue` variable are different in each pages, and even the "global" config of Vue (`Vue.config.xxx`) only affect the single page on Weex.
+
+On this basis, some SPA (single-page application) technologies of Vue, such as [Vuex](https://vuex.vuejs.org/en/) and [vue-router](https://router.vuejs.org/en/) will also take effect within the single page. More colloquially, the "page" concept is virtual in SPA technologies, but it is real on Weex. However, Vuex and vue-router are standalone libraries, they all have their own concept and usage scenario, you can still [use Vuex and vue-router](./advanced/use-vuex-and-vue-router.html) on Weex.
### DOM
@@ -44,13 +46,13 @@ To be more specific, the type of [`vm.$el`](https://vuejs.org/v2/api/#vm-el) pro
The style sheet and CSS rules in managed by Weex js framework and native render engines. It would be very difficult and unnecessary to implement the whole CSSOM spec and support all CSS rules.
-For performance reasons, **Weex only support single class selector currently, and only support a subset of CSS Rules**. Please refer to *[common styles](../wiki/common-styles.html)* and *[text styles](../wiki/text-styles.html)* for more details.
+For performance reasons, **Weex only support single class selector currently, and only support a subset of CSS Rules**. Please refer to *[common styles](../docs/styles/common-styles.html)* and *[text styles](../docs/styles/text-styles.html)* for more details.
-On Weex, styles are *[scoped](https://vue-loader.vuejs.org/en/features/scoped-css.html)* by force for each Vue component.
+In Weex, styles are *[scoped](https://vue-loader.vuejs.org/en/features/scoped-css.html)* by force for each Vue component.
### Events
-Event bubbling and capturing are not supported in Weex currently, therefore, [event modifiers](https://vuejs.org/v2/guide/events.html#Event-Modifiers) such as `.prevent`, ` .capture`, `.stop`, ` .self` are not supported on Weex native components.
+Event bubbling and capturing are not supported in Weex currently, therefore, [event modifiers](https://vuejs.org/v2/guide/events.html#Event-Modifiers) such as `.prevent`, `.capture`, `.stop`, `.self` are not supported on Weex native components.
Moreover, the [keyboard event modifiers](https://vuejs.org/v2/guide/events.html#Key-Modifiers) and [system modifier keys](https://vuejs.org/v2/guide/events.html#System-Modifier-Keys), such as `.enter`, `.tab`, `.ctrl`, `.shift` mostly are meaningless on mobile device, which are also not supported in Weex.
@@ -66,7 +68,11 @@ If you want to render your page on the web, you need to require the [weex-vue-re
Moreover, there are a good deals of [syntax highlight plugins](https://github.com/vuejs/awesome-vue#source-code-editing) for all kind of editors.
-> It's a good practice to use single file component syntax in Weex.
+::: tip
+It's a good practice to use single file component syntax in Weex.
+
+Because the compiler tools are different between Weex and Vue, you have to handle all these platform differences if you are writing `render` function manually.
+:::
### Compile Targets
@@ -79,7 +85,7 @@ Use different bundles for different platforms is to make good use of the platfor
### Use weex-loader
-[weex-loader](https://github.com/weexteam/weex-loader) is a [loader](https://webpack.js.org/concepts/loaders/#using-loaders) for webpack that can transform `*.vue` file into a plain javascript module for Android and iOS platform. All features and configurations of it are same with [vue-loader](https://vue-loader.vuejs.org/en/).
+[weex-loader](https://github.com/weexteam/weex-loader) is a [loader](https://webpack.js.org/concepts/loaders/#using-loaders) of webpack that can transform `*.vue` file into a plain javascript module for Android and iOS platform. All features and configurations of it are same with [vue-loader (v14)](https://vue-loader-v14.vuejs.org/en/).
One thing should be noted that if the *entry* option of your Webpack config is a `*.vue` file, you also need to pass an additional `entry` parameter.
@@ -108,6 +114,10 @@ const webpackConfig = {
}
```
+::: tip
+Always use javascript file as the entry file.
+:::
+
## Supported Features
### Global Config
@@ -179,7 +189,7 @@ Instance lifecycle hooks of Vue components will be emitted at particular stages,
| [beforeCreate](https://vuejs.org/v2/api/#beforeCreate) | <b class="tag-yes">Yes</b> | - |
| [created](https://vuejs.org/v2/api/#created) | <b class="tag-yes">Yes</b> | - |
| [beforeMount](https://vuejs.org/v2/api/#beforeMount) | <b class="tag-yes">Yes</b> | - |
-| [mounted](https://vuejs.org/v2/api/#mounted) | <b class="tag-yes">Yes</b> | Not exactly the same with web, because there is no actually DOM in Weex. |
+| [mounted](https://vuejs.org/v2/api/#mounted) | <b class="tag-yes">Yes</b> | Not exactly the same with web. (See the following tips) |
| [beforeUpdate](https://vuejs.org/v2/api/#beforeUpdate) | <b class="tag-yes">Yes</b> | - |
| [updated](https://vuejs.org/v2/api/#updated) | <b class="tag-yes">Yes</b> | - |
| [activated](https://vuejs.org/v2/api/#activated) | <b class="tag-no">No</b> | Not support `<keep-alive>` yet. |
@@ -188,6 +198,11 @@ Instance lifecycle hooks of Vue components will be emitted at particular stages,
| [destroyed](https://vuejs.org/v2/api/#destroyed) | <b class="tag-yes">Yes</b> | - |
| [errorCaptured](https://vuejs.org/v2/api/#errorCaptured) | <b class="tag-yes">Yes</b> | New in Vue 2.5.0+, Weex SDK 0.18+ |
+::: warning About the "mounted" lifecycle.
+
+Unlike browsers, the render process of Weex is **asynchronous** by default and the render result are all native views which can't be accessed by javascript directly. So the `mounted` lifecycle will be emitted once the virtual-dom (`VNode` of Vue) is constructed, at that time, the corresponding native views many not rendered finish yet.
+:::
+
### Instance Properties
| Vue Instance Property | Supported | Notes |
diff --git a/docs/zh/guide/front-end-frameworks.md b/docs/zh/guide/front-end-frameworks.md
index b58dac7..b6e0df3 100644
--- a/docs/zh/guide/front-end-frameworks.md
+++ b/docs/zh/guide/front-end-frameworks.md
@@ -74,7 +74,9 @@ Rax 框架的类型标记如下：
Weex 从 [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0)（发布于 2017/02/17）这个版本开始，就集成了 v2 版本的 Vue.js。Vue.js 是一套用于构建用户界面的渐进式框架，详情请参阅其[官方网站](https://vuejs.org/)。
+::: tip
关于在 Weex 中使用 Vue 的技巧请参阅：[《在 Weex 中使用 Vue.js》](./use-vue-in-weex.html)。
+:::
## Rax
diff --git a/docs/zh/guide/use-vue-in-weex.md b/docs/zh/guide/use-vue-in-weex.md
index cd029b5..50098c4 100644
--- a/docs/zh/guide/use-vue-in-weex.md
+++ b/docs/zh/guide/use-vue-in-weex.md
@@ -1,33 +1,36 @@
# 在 Weex 中使用 Vue.js
-<!-- toc -->
+[[toc]]
-自2016年2月17日发布 WeexSDK [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0) 后， Weex 集成了 v2 版本的 Vue。Vue（读音 /vjuː/，类似于 view 的读音）是一套构建用户界面的渐进式框架。详情请参阅其[官方网站](https://cn.vuejs.org/)。
+在 WeexSDK [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0) （发布于 2016 年 2 月 17 日）以及后续的版本中，集成了 v2 版本的 Vue.js。Vue 是一套构建用户界面的渐进式框架，详情请参阅其[官方网站](https://cn.vuejs.org/)。
> 如果没有特别指示，文章中的 "Vue.js" 或者 "Vue" 都指的是 v2 版本的 Vue。
## 只含有运行时的构建版本
-如果你熟悉 Vue.js，你应该知道 Vue.js 有两种构建版本: [**运行时 + 编译器** 与 **只包含运行时**](https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6)。它们之间的区别在于编译器是否需要能够在运行时编译`template`选项。由于运行时构建版本比完整版本的构建版本轻约30%，为了更好的性能和更少的代码尺寸，Weex用的是只包含运行时的方式构建Vue。
+如果你熟悉 Vue.js，你应该知道 Vue.js 有两种构建版本: [**运行时 + 编译器** 与 **只包含运行时**](https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6)。它们之间的区别在于编译器是否需要能够在运行时编译 `template` 选项。由于运行时构建版本比完整版本的构建版本轻约 30%（Vue 官方估算），为了更好的性能和更小的代码体积，Weex 集成的是运行时版本的 Vue。
具体来说，差异如下：
-+ 定义组件时不支持[`template`](https://cn.vuejs.org/v2/api/#template)选项。
-+ 不支持使用[`x-templates`](https://cn.vuejs.org/v2/guide/components.html#X-Templates)。
-+ 不支持使用[`Vue.compile`](https://cn.vuejs.org/v2/api/#Vue-compile)。
++ 定义组件时不支持 [`template`](https://cn.vuejs.org/v2/api/#template) 选项。
++ 不支持使用 [`x-templates`](https://cn.vuejs.org/v2/guide/components.html#X-Templates)。
++ 不支持使用 [`Vue.compile`](https://cn.vuejs.org/v2/api/#Vue-compile)。
## 平台的差异
-Vue.js最初是为Web平台设计的。虽然可以基于Weex开发原生应用程序，但是仍然存在许多[Weex 与 Web 平台的差异](../wiki/platform-difference.html)。
+Vue.js 最初是为 Web 平台设计的。虽然可以基于Weex开发原生应用程序，但是仍然存在许多[Weex 与 Web 平台的差异](../wiki/platform-difference.html)。
-与 Web 平台的主要差异是: 上下文、DOM、样式和事件。
+与 Web 平台的主要差异是: 执行环境、DOM、样式和事件。
-### 上下文
-Weex 主要用于编写多页的应用程序，每一页相当于原生开发中的 *View* 或者 *Activity*，并且它有着自己的上下文。尤其`Vue`实例在每个页面都是不同的，甚至 Vue 的"全局"配置（`Vue.config.xxx`）也只会影响 Weex 上的单个页面。
+### 执行环境
-在此基础上，一些 Vue 的 SPA （单页面应用）技术，如 [Vuex](https://vuex.vuejs.org/zh-cn/) 和 [vue-router](https://router.vuejs.org/zh-cn/) 也将单页内生效。更通俗地说，“页面”概念在 SPA 技术中是虚拟的，但在 Weex 上却是真实的。
+Weex 主要用于编写多页的应用程序，每个页面都对应了原生开发中的 *View* 或者 *Activity*，并且保持自己的上下文。即使 Weex 的所有页面都使用的都是同一个 Javascript 引擎的实例(virtual machine)，每个页面是执行环境也是互相隔离的（基于 Sandbox 技术）。
-无论如何，Vuex 和 vue-router 都是独立的库，它们都有自己的概念和使用场景，你仍然可以在 Weex 里[使用 Vuex 和 vue-router](./advanced/use-vuex-and-vue-router.html)。
+> 使用 [BroadcastChannel](../docs/api/broadcast-channel.html) 可以实现跨页通信。
+
+具体来讲，每个页面的 Vue 变量都是不同的实例，即使是写在 Vue 上的“全局”配置（`Vue.config.xxx`）也只会影响 Weex 上的单个页面。
+
+在此基础上，一些 Vue 的 SPA （单页面应用）技术，如 [Vuex](https://vuex.vuejs.org/zh-cn/) 和 [vue-router](https://router.vuejs.org/zh-cn/) 也将单页内生效。更通俗地说，“页面”概念在 SPA 技术中是虚拟的，但在 Weex 上却是真实的。即便如此，Vuex 和 vue-router 都是独立的库，都有自己的概念和使用场景，仍然可以在 Weex 里[使用 Vuex 和 vue-router](./advanced/use-vuex-and-vue-router.html)。
### DOM
@@ -41,7 +44,7 @@ Weex 主要用于编写多页的应用程序，每一页相当于原生开发中
样式表和 CSS 规则是由 Weex js 框架和原生渲染引擎管理的。要实现完整的 CSS 对象模型（CSSOM：CSS Object Model）并支持所有的 CSS 规则是非常困难的，而且没有这个必要。
-出现性能考虑，**Weex 目前只支持单个类选择器，并且只支持 CSS 规则的子集**。详情请参阅 *[通用样式](../wiki/common-styles.html)* 与 *[文本样式](../wiki/text-styles.html)*。
+出现性能考虑，**Weex 目前只支持单个类选择器，并且只支持 CSS 规则的子集**。详情请参阅 *[通用样式](../docs/styles/common-styles.html)* 与 *[文本样式](../docs/styles/text-styles.html)*。
在 Weex 里， 每一个 Vue 组件的样式都是 *[scoped](https://vue-loader.vuejs.org/zh-cn/features/scoped-css.html)*。
@@ -65,6 +68,12 @@ Vue 中的[单文件组件](https://cn.vuejs.org/v2/guide/single-file-components
> 在 Weex 中使用单个文件组件语法是一种很好的做法。
+::: tip
+在 Weex 中使用 Vue 的单个文件组件语法是一种最佳实践。
+
+因为针对 Weex 的 Web 平台的编译工具并不一样，如果你直接写的 `render` 函数，则绕过了 weex-loader 编译模板的过程，这样的话你需要自行处理平台差异的细节。
+:::
+
### 编译目标
因为平台的差异以及为了提高网络性能，`*.vue`文件需要用两种不同的方式来编译：
@@ -76,9 +85,9 @@ Vue 中的[单文件组件](https://cn.vuejs.org/v2/guide/single-file-components
### 使用weex-loader
-[weex-loader](https://github.com/weexteam/weex-loader) 是一个 webpack 的 [loader](https://webpack.js.org/concepts/loaders/#using-loaders)，它能把`*.vue`文件转化为简单的javascript 模块用于安卓以及 iOS 平台。所有的特性和配置都是跟 [vue-loader](https://vue-loader.vuejs.org/en/) 一样的。
+[weex-loader](https://github.com/weexteam/weex-loader) 是一个 webpack 的 [loader](https://webpack.js.org/concepts/loaders/#using-loaders)，它能把`*.vue`文件转化为简单的javascript 模块用于安卓以及 iOS 平台。所有的特性和配置都是跟 [vue-loader](https://vue-loader-v14.vuejs.org/zh-cn/) 一样的。
-需要注意的是，如果您的Webpack配置的*entry*选项是一个`*.vue`文件的话，你仍需要传递一个额外的`entry`参数。
+需要注意的是，如果 Webpack 的 *entry* 配置项是一个 `*.vue` 文件的话，你仍需要传递一个额外的 `entry` 参数作为标记。
```js
const webpackConfig = {
@@ -97,7 +106,7 @@ const webpackConfig = {
}
```
-**如果你现在用的是`.js`文件做入口文件，你不需要写那些额外的参数。**推荐 webpack 配置的入口文件使用 javascript 文件。
+**如果你现在用的是`.js`文件做入口文件，你不需要写那些额外的参数。** 推荐 webpack 配置的入口文件使用 javascript 文件。
```js
{
@@ -105,6 +114,10 @@ const webpackConfig = {
}
```
+::: tip
+无论什么情况下都使用 javascript 文件作为入口文件。
+:::
+
## 支持的功能
### 全局配置
@@ -176,7 +189,7 @@ Vue 组件的实例生命周期钩子将在特定的阶段发出，详情请参
| [beforeCreate](https://cn.vuejs.org/v2/api/#beforeCreate) | <b class="tag-yes">支持</b> | - |
| [created](https://cn.vuejs.org/v2/api/#created) | <b class="tag-yes">支持</b> | - |
| [beforeMount](https://cn.vuejs.org/v2/api/#beforeMount) | <b class="tag-yes">支持</b> | - |
-| [mounted](https://cn.vuejs.org/v2/api/#mounted) | <b class="tag-yes">支持</b> | 和 Web 端不完全一样（Weex 里并没有真实 DOM） |
+| [mounted](https://cn.vuejs.org/v2/api/#mounted) | <b class="tag-yes">支持</b> | 和 Web 端不完全一样（下文有详解） |
| [beforeUpdate](https://cn.vuejs.org/v2/api/#beforeUpdate) | <b class="tag-yes">支持</b> | - |
| [updated](https://cn.vuejs.org/v2/api/#updated) | <b class="tag-yes">支持</b> | - |
| [activated](https://cn.vuejs.org/v2/api/#activated) | <b class="tag-no">不支持</b> | 不支持`<keep-alive>` |
@@ -185,6 +198,11 @@ Vue 组件的实例生命周期钩子将在特定的阶段发出，详情请参
| [destroyed](https://cn.vuejs.org/v2/api/#destroyed) | <b class="tag-yes">支持</b> | - |
| [errorCaptured](https://cn.vuejs.org/v2/api/#errorCaptured) | <b class="tag-yes">支持</b> | 在 Vue 2.5.0+， Weex SDK 0.18+ 中新增 |
+::: warning 关于 "mounted" 生命周期
+
+和浏览不同的是，Weex 的渲染流程是**异步**的，而且渲染出来的结果都是原生系统中的 View，这些数据都无法被 javascript 直接获取到。因此在 Weex 上，Vue 的 `mounted` 生命周期在当前组件的 virtual-dom (Vue 里的 VNode) 构建完成后就会触发，此时相应的原生视图未必已经渲染完成。
+:::
+
### 实例属性
| Vue 实例属性 | 是否支持 | 说明 |