diff --git a/docs/README.md b/docs/README.md
index b4a7a7049..49e938595 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -480,6 +480,136 @@ export default class Com extends wepy.component {
```
页面入口继承自`wepy.component`,属性与页面属性一样,除了不需要`config`以及页面特有的一些小程序事件等等。
+### 实例
+
+小程序在 WePY 中,被分为三个实例,`App`,`Page`,`Component`。其中`Page`实例继承自`Component`。声明方式如下:
+
+```
+import wepy from 'wepy';
+
+// 声明一个App文件
+export default class MyAPP extends wepy.app {
+}
+// 声明一个Page文件
+export default class IndexPage extends wepy.page {
+}
+// 声明一个组件文件
+export default class MyComponent extends wepy.component {
+}
+```
+
+#### App 实例
+
+App 实例中只包含小程序生命周期函数以及自定义方法与属性
+
+```
+import wepy from 'wepy';
+
+export default class MyAPP extends wepy.app {
+ customData = {};
+
+ customFunction () { }
+
+ onLaunch () {}
+
+ onShow () {}
+
+ config = {}; // 对应 app.json 文件
+}
+```
+
+在 Page 实例中,可以通过`this.$parent`来访问 App 实例。
+
+
+#### Page 和 Component 实例
+
+Page 实例中只包含小程序页面生命周期函数,自定义方法与属性以及特有属性。
+
+
+```
+import wepy from 'wepy';
+
+// export default class MyPage extends wepy.page {
+export default class MyPage extends wepy.component {
+ customData = {};
+
+ customFunction () {}
+
+ onLoad () {} // 只在 Page 实例中会存在页面生命周期函数
+
+ onShow () {} // 只在 Page 实例中会存在页面生命周期函数
+
+ // 特有属性示例
+
+ config = {}; // 对应page.json文件,只在 Page 实例中存在
+
+ data = {}; // 页面所需数据均需在这里声明
+
+ components = {}; // 声明页面所引用的子组件
+
+ mixins = []; // 声明页面所引用的Mixin实例
+
+ computed = {}; // 声明[计算属性](https://wepyjs.github.io/wepy/#/?id=computed-%e8%ae%a1%e7%ae%97%e5%b1%9e%e6%80%a7)
+
+ watch = {}; // 声明数据watcher
+
+ methods = {}; // 声明页面响应事件。注意,此处只用于声明页面bind,catch事件,自定义方法需以自定义方法的方式声明
+
+ events = {}; // 声明组件之间的事件传递
+}
+```
+
+对于 methods 属性,因为与Vue的使用习惯不一致,一直存在一个误区,这里的 methods 属性只声明页面bind,catch事件,不能声明自定义方法。示例如下:
+
+```
+// 错误示例
+import wepy from 'wepy';
+
+export default class MyPage extends wepy.component {
+
+ methods = {
+ bindtap () {
+ let rst = this.commonFunc();
+ // doSomething
+ },
+ bindinput () {
+ let rst = this.commonFunc();
+ // doSomething
+ },
+ commonFunc () {
+ return 'sth.';
+ }
+ };
+
+}
+
+
+// 正确示例
+import wepy from 'wepy';
+
+export default class MyPage extends wepy.component {
+
+ methods = {
+ bindtap () {
+ let rst = this.commonFunc();
+ // doSomething
+ },
+ bindinput () {
+ let rst = this.commonFunc();
+ // doSomething
+ },
+ };
+
+ commonFunc () {
+ return 'sth.';
+ }
+
+}
+```
+
+
+
+
### 组件
小程序支持js模块化,但彼此独立,业务代码与交互事件仍需在页面处理。无法实现组件化的松耦合与复用的效果。
例如模板A中绑定一个`bindtap="myclick"`,模板B中同样绑定一样`bindtap="myclick"`,那么就会影响同一个页面事件。对于数据同样如此。因此只有通过改变变量或者事件方法,或者给其加不同前缀才能实现绑定不同事件或者不同数据。当页面复杂之后就十分不利于开发维护。
@@ -520,6 +650,31 @@ project
```
+需要注意的是,WePY中的组件都是静态组件,是以组件ID作为唯一标识的,每一个ID都对应一个组件实例,当页面引入两个相同ID组件时,这两个组件共用同一个实例与数据,当其中一个组件数据变化时,另外一个也会一起变化。
+如果需要避免这个问题,则需要分配多个组件ID和实例。代码如下:
+```
+
+
+
+
+
+
+
+
+
+
+```
+
+
#### 循环列表组件引用
*1.4.6新增*
@@ -587,6 +742,35 @@ computed = {
}
```
+#### watcher
+
+* **类型**: `{ [key: string]: Function }`
+
+* **详细**:
+通过`watcher`我们能监听到任何数值属性的数值更新。
+
+* **示例**:
+
+```
+data = {
+ num: 1
+};
+
+watch = {
+ num (newValue, oldValue) {
+ console.log(`num value: ${oldValue} -> ${newValue}`)
+ }
+}
+
+onLoad () {
+ setInterval(() => {
+ this.num++;
+ this.$apply();
+ }, 1000)
+}
+
+```
+
#### Props 传值
**静态传值**