update api

Author: syf20020816

docs/v0.1.0/en/api/global/component.mdx

@@ -243,4 +243,111 @@ impl FatherView{
     }
 }
 </script>
+```
+
+## `#[computed]`
+
+Computed properties are values ​​dynamically calculated based on existing properties. In GenUI, computed properties do not store state, but are automatically updated based on changes in their dependencies.
+
+| Features           | Computed                           | Two-way Binding       |
+| ------------------ | ---------------------------------- | --------------------- |
+| Store state?       | ❌ No                              | ✅ Yes                |
+| Mutable?           | ✅ Update when dependencies change | ✅ Yes                |
+| Manually editable? | ✅ But cannot use set_xxx method   | ✅ Modify via set_xxx |
+| Dependent data     | ✅ Requires dependencies           | ✅ Component state    |
+
+### Usage
+
+1. `#[computed]` needs to be declared in the method
+2. `#[computed]` depends on the fields declared in the component, which can be multiple
+3. The return value of the calculated property needs to be consistent with the component binding
+4. The calculated property is equivalent to handing over the value processing to the developer, so `set_xxx()` cannot be used in the calculated property method to change the component field. Instead, a more flexible assignment change is used
+
+```rust
+impl Hello{
+    #[computed([$(arg)*])]
+    fn $computed_fn($[&self|&mut self]?) -> $return_value_type{
+        // ...
+    }   
+}
+```
+
+> - `$(arg)*`: Depends on the parameter list, indicating that there can be one or more
+> - `$computed_fn`: Calculated attribute processing function
+> - `$[&self|&mut self]?`: Indicates that it can be `&self` or `&mut self`, which is up to you to decide
+> - `$return_value_type`: Return value type
+
+### Example
+
+The way to write a calculated property is to use a method to declare it when binding the property:
+
+```html
+<template>
+    <component name="Hello" class="hello_view" spacing="12.0">
+        <label :text="fmt_count()"></label>
+    </component>
+</template>
+
+<script>
+#[component]
+pub struct Hello{
+    count: u32,
+}
+
+impl Hello{
+    #[computed([count])]
+    fn fmt_count(&self) -> String{
+        format!("count: {}", self.count)
+    }   
+}
+</script>
+```
+
+## `nav_to!`
+
+Used to jump from a sub-page of routing management to other sub-pages.
+
+### Usage
+
+```rust
+nav_to!($page_id);
+```
+
+> - `$page_id`: id of the page
+
+```toml title="router.toml"
+[bar_pages]
+login = { path = "crate::views::login::*", component = "Login" }
+```
+
+The login key configured in `router.toml` is the page id
+
+### Example
+
+```rust
+impl Hello{
+    pub fn to_register(&mut self) {
+        nav_to!(register);
+    }
+}
+```
+
+## `nav_back!`
+
+Return the route to the previous page by pushing the stack, if any.
+
+### Usage
+
+```rust
+nav_back!();
+```
+
+### Example
+
+```
+impl Hello{
+    pub fn back(&mut self) {
+        nav_back!();
+    }
+}
 ```

docs/v0.1.0/en/api/option/lifetime.mdx

@@ -1,10 +1,12 @@
 import { Badge } from '@theme';
 
-# Life cycle <Badge text="experiment" type="danger" />
+# Life cycle  <Badge text="experiment" type="danger" />
 
 > [!WARNING]
 >
-> Currently, the complete life cycle has not been fully implemented. It is an experimental function. Open `#[before_mount]`, `#mounted`
+> Currently, the complete life cycle has not been fully implemented. It is an experimental function. 
+>
+> Open `#[before_mount]`, `#mounted`, `#[before_update]`, `#[updated]`
 
 ## `#[before_mount]`
 
@@ -38,8 +40,23 @@ impl MyView{
 
 ## `#[before_update]`
 
-Called before instance update
+Called after component properties are updated but before re-rendering the component
+
+### Usage
 
 ## `#[updated]`
 
-Called after instance update
+Called after the component properties have been updated and the component has been re-rendered.
+
+### Usage
+
+```rust
+impl Hello{
+    #[updated]
+    fn do_updated(&mut self){
+        println!("do updated => hello.gen!");
+        let new_val = self.get_count() + 1;
+        self.set_count(new_val);
+    }   
+}
+```

docs/v0.1.0/en/components/feedback/dropdown.mdx

@@ -36,7 +36,7 @@ Use dialog as drop-down option
 | `offset_x`     | X-axis offset    | `F32`         |
 | `offset_y`     | Y-axis offset    | `F32`         |
 | `visible`      | Visible or not   | `bool`        |
-| `proportionv   | Proportion       | `F32`         |
+| `proportion`   | Proportion       | `F32`         |
 | `event_key`    | Event identifier | `bool`        |
 
 ### Events Table

docs/v0.1.0/en/examples/overview.md

@@ -4,10 +4,15 @@ All official examples are stored in [made_with_GenUI](https://github.com/Privoce
 
 ## Official Examples
 
-- [Source Code: Quickstart](https://github.com/Privoce/made_with_GenUI/tree/main/quickstart)
-- [Source Code: component ref(`c_ref!`) example](https://github.com/Privoce/made_with_GenUI/tree/main/c_ref_test)
-- [Source Code: for-syntax-sugar example](https://github.com/Privoce/made_with_GenUI/tree/main/for_test)
-- [Source Code: todo app example](https://github.com/Privoce/made_with_GenUI/tree/main/todo/todo_front)
+- [Source Code: Quickstart](https://github.com/Privoce/made_with_GenUI/tree/main/tests/quickstart)
+- [Source Code: component ref (`c_ref!`)](https://github.com/Privoce/made_with_GenUI/tree/main/tests/c_ref)
+- [Source Code: `for` sugar](https://github.com/Privoce/made_with_GenUI/tree/main/tests/for_sugar)
+- [Source Code: `if_else` sugar](https://github.com/Privoce/made_with_GenUI/tree/main/tests/if_sugar)
+- [Source Code: lifecycle](https://github.com/Privoce/made_with_GenUI/tree/main/tests/lifecycle)
+- [Sourec Code: router component](https://github.com/Privoce/made_with_GenUI/tree/main/tests/router)
+- [Source Code: router with tabbar](https://github.com/Privoce/made_with_GenUI/tree/main/tests/router_tabbar)
+- [Source Code: settings](https://github.com/Privoce/made_with_GenUI/blob/main/tests/settings/views/home.gen)
+- [Source Code: todo app (`network` plugin)](https://github.com/Privoce/made_with_GenUI/blob/main/tests/todo)
 
 ## Share Examples
 

docs/v0.1.0/zh/api/global/component.mdx

@@ -246,4 +246,112 @@ impl FatherView{
     }
 }
 </script>
+```
+
+## `#[computed]`
+
+计算属性（Computed Property）是基于现有属性动态计算出的值，在 GenUI 中，计算属性不会存储状态，而是根据其依赖项的变化自动更新。
+
+| 特性           | 计算属性 (Computed)         | 双向绑定 (Two-way Binding) |
+| ------------- | -------------------------- | ------------------------- |
+| 是否存储状态    | ❌ 否                      | ✅ 是                     |
+| 是否可变       | ✅ 依赖项变化时更新           | ✅ 是                     |
+| 是否可手动修改  | ✅ 但不能使用 set_xxx 方法    | ✅ 通过 set_xxx 修改       |
+| 依赖数据       | ✅ 需要依赖项                | ✅ 组件状态                |
+
+### 用法
+
+1. `#[computed]`需要被声明在方法上
+2. `#[computed]`依赖于组件中声明的字段，可以是多个
+3. 计算属性的返回值需要和组件绑定一致
+4. 计算属性相当于将对值的处理交给开发者，所以在计算属性的方法中不可以使用`set_xxx()`对组件字段进行更改，取而代之的是更灵活的赋值更改
+
+```rust
+impl Hello{
+    #[computed([$(arg)*])]
+    fn $computed_fn($[&self|&mut self]?) -> $return_value_type{
+        // ...
+    }   
+}
+```
+
+> - `$(arg)*`: 依赖参数列表, 表示可以有一个或多个
+> - `$computed_fn`: 计算属性处理函数
+> - `$[&self|&mut self]?`: 表示可以是`&self`或`&mut self`这由您来决定
+> - `$return_value_type`: 返回值类型
+
+
+### 示例
+
+计算属性的写法为在属性绑定时使用方法进行声明:
+
+```html
+<template>
+    <component name="Hello" class="hello_view" spacing="12.0">
+        <label :text="fmt_count()"></label>
+    </component>
+</template>
+
+<script>
+#[component]
+pub struct Hello{
+    count: u32,
+}
+
+impl Hello{
+    #[computed([count])]
+    fn fmt_count(&self) -> String{
+        format!("count: {}", self.count)
+    }   
+}
+</script>
+```
+
+## `nav_to!`
+
+用于从路由管理的子页面中跳转至其他子页面中。
+
+### 用法
+
+```rust
+nav_to!($page_id);
+```
+
+> - `$page_id`: 页面id
+
+```toml title="router.toml"
+[bar_pages]
+login = { path = "crate::views::login::*", component = "Login" }
+```
+
+在`router.toml`中配置的login这个key就是页面id
+
+### 示例
+
+```rust
+impl Hello{
+    pub fn to_register(&mut self) {
+        nav_to!(register);
+    }
+}
+```
+
+## `nav_back!`
+
+通过压栈的方式让路由返回上一个页面，如果有的话。
+
+### 用法
+
+```rust
+nav_back!();
+```
+
+### 示例
+
+```
+impl Hello{
+    pub fn back(&mut self) {
+        nav_back!();
+    }
+}
 ```

docs/v0.1.0/zh/api/option/lifetime.mdx

@@ -4,7 +4,9 @@ import { Badge } from '@theme';
 
 > [!WARNING]
 >
-> 当前完整的生命周期还未全部实现，属于实验性功能，开放`#[before_mount]`, `#[mounted]`
+> 当前完整的生命周期还未全部实现，属于实验性功能
+> 
+> 开放`#[before_mount]`, `#[mounted]`, `#[before_update]`, `#[updated]`
 
 ## `#[before_mount]`
 
@@ -38,9 +40,33 @@ impl MyView{
 
 ## `#[before_update]`
 
-在实例更新前调用
+在组件属性更新后，但还未重新渲染组件前被调用
+
+### 写法
+
+```rust
+impl Hello{
+    #[before_update]
+    fn do_before_update(&mut self) -> (){
+        println!("do before update => hello.gen!");
+        self.set_my_text(format!("{} => handle before", &self.my_text));
+    }  
+}
+```
 
 ## `#[updated]`
 
-在实例更新后调用
+在组件属性更新后并已经重新对组件进行了渲染之后进行调用
+
+### 写法
 
+```rust
+impl Hello{
+    #[updated]
+    fn do_updated(&mut self){
+        println!("do updated => hello.gen!");
+        let new_val = self.get_count() + 1;
+        self.set_count(new_val);
+    }   
+}
+```

docs/v0.1.0/zh/examples/overview.md

@@ -4,10 +4,15 @@
 
 ## 官方示例
 
-- [Quickstart源码](https://github.com/Privoce/made_with_GenUI/tree/main/quickstart)
-- [组件引用示例(`c_ref!`)源码](https://github.com/Privoce/made_with_GenUI/tree/main/c_ref_test)
-- [for循环语法糖示例源码](https://github.com/Privoce/made_with_GenUI/tree/main/for_test)
-- [待办事项示例源码](https://github.com/Privoce/made_with_GenUI/tree/main/todo/todo_front)
+- [Quickstart源码](https://github.com/Privoce/made_with_GenUI/tree/main/tests/quickstart)
+- [组件引用示例(`c_ref!`)源码](https://github.com/Privoce/made_with_GenUI/tree/main/tests/c_ref)
+- [for循环语法糖示例源码](https://github.com/Privoce/made_with_GenUI/tree/main/tests/for_sugar)
+- [if条件语法糖示例源码](https://github.com/Privoce/made_with_GenUI/tree/main/tests/if_sugar)
+- [lifecycle示例源码](https://github.com/Privoce/made_with_GenUI/tree/main/tests/lifecycle)
+- [路由组件示例源码](https://github.com/Privoce/made_with_GenUI/tree/main/tests/router)
+- [路由+Tabbar示例源码](https://github.com/Privoce/made_with_GenUI/tree/main/tests/router_tabbar)
+- [settings页面源码](https://github.com/Privoce/made_with_GenUI/blob/main/tests/settings/views/home.gen)
+- [待办事项示例源码](https://github.com/Privoce/made_with_GenUI/blob/main/tests/todo)
 
 ## 分享示例