組件狀態數據
本章主要講解組件中的狀態數據，我們可以在這裏去維護一個組件的參數約束、內部響應式數據以及內部私有變量。
概述
組件狀態數據是組件開發中最為常用的功能之一。
當打開一個組件或頁面文件時，工作台左側菜單中會顯示組件數據菜單，點擊後即可打開組件數據面板。
從數據使用的角度出發，可將其分為以下幾類 輸入參數（props）、 響應數據（model）、內部私有屬性，接下來我們來詳細講解下這三種數據的用途和如何聲明一個屬性/參數。
輸入參數（props）
這是當前組件所需要的參數。這些參數具有響應式特點，一旦外部使用者傳遞的參數發生變化，會立即通知並更新組件內部的 DOM 節點。這意味着，組件能夠實時響應外部傳入數據的變動，從而動態調整自身的顯示與行為，大大增強了組件的靈活性與複用性。例如，一個按鈕組件可能通過 props 接收按鈕的文本內容、顏色等參數，當外部傳入的文本或顏色改變時，按鈕能立刻呈現相應的變化。
僅在組件類型文件內才會展示傳入參數的配置。頁面類型的組件不允許配置接受參數。
如何創建/編輯
我們可以在輸入參數(props)面板右側的加號來打開參數創建面板，在創建參數面板中我們可以配置參數的名稱、備註、類型、默認值、演示值。屬性創建教程，請閲讀本章最後屬性/參數創建和編輯小結。
如何使用
創建完參數後便可開始使用，下面將從兩個角度為您詳細介紹：
1. 聲明者視角（當前組件）
在完成參數創建後，即可在組件內部使用所創建的參數。這些參數可在佈局模板和方法邏輯中使用：
- 佈局模板：在模板裏，可通過表達式的方式
props.引用參數變量。
- 方法邏輯：在邏輯編輯面板中，可通過
this.props.的方式讀取組件參數值。
貼心提示：若您不太熟悉代碼編寫，無需過度擔憂。平台具備智能的數據管理功能，在表達式編輯面板中會提供智能語法提示，同時還設有數據管理面板。您可以在該面板中查看當前節點所使用的所有變量，只需點擊即可快速使用相應變量。
2. 使用者視角（其他組件/頁面引用當前組件）
當在其他組件或頁面中引用當前組件時，點擊該組件，即可在組件參數面板中看到已聲明的參數。
重要建議：對組件參數進行聲明時，務必儘可能完整。建議提供參數説明、交互類型、演示值等信息，以便開發人員能快速瞭解該屬性的用途。
響應數據（model）
這是組件內部的響應數據。在組件裝載開始前，該屬性會被“劫持”，進而具備數據響應能力。也就是説，當這個內部數據發生改變時，與之相關聯的組件部分會自動更新。比如在一個購物車組件中，商品數量作為響應數據，當數量改變時，購物車的總價顯示、商品列表的渲染等相關部分會自動更新，為用户提供實時反饋。
如何創建/編輯
我們可以在響應數據（model）面板右側的加號來打開參數創建面板，在創建屬性面板中我們可以配置參數的名稱、備註、類型、默認值、演示值。屬性創建教程，請閲讀本章最後屬性/參數創建和編輯小結。
認識響應式數據
在這裏，我們藉助一個 DEMO 來深入理解什麼是響應式數據。響應式數據能夠在一個值發生變更後，立即通知監聽者。在佈局模板裏，一旦值有所變更，這種變化也會即刻在頁面中實現更新。
我們通過代碼定義了一個響應式數據count。當點擊頁面上的按鈕時，count的值會加一，並且值變更後，頁面會馬上體現出這一變化 。
!!!demo1!!!
如何使用
在完成屬性創建後，即可在組件內部使用所創建的屬性。這些屬性可在佈局模板和方法邏輯中使用：
- 佈局模板：在模板裏，可通過表達式的方式
model.引用參數變量。
- 方法邏輯：在邏輯編輯面板中，可通過
this.model.的方式讀取組件參數值。
貼心提示：若您不太熟悉代碼編寫，無需過度擔憂。平台具備智能的數據管理功能，在表達式編輯面板中會提供智能語法提示，同時還設有數據管理面板。您可以在該面板中查看當前節點所使用的所有變量，只需點擊即可快速使用相應變量。
內部私有屬性
這類屬性既不支持外部調用，也不具備響應式能力，僅作為組件內部臨時使用的變量。在這裏，你可以聲明內部動態數據變量，方便在多個方法中使用。例如，在一個複雜的表單組件中，可能需要一個臨時變量來記錄表單填寫的步驟狀態，這個變量只在組件內部的方法中使用，無需對外暴露，也不需要對其變化做出響應式更新。
如何創建/編輯
我們可以在內部私有屬性面板右側的加號來打開參數創建面板，在創建屬性面板中我們可以配置參數的名稱、備註、類型、默認值、演示值。屬性創建教程，請閲讀本章最後屬性/參數創建和編輯小結。
它的使用方式與參數、響應數據一致，均可通過表達式的方式直接調用。不過，它與響應式數據不同之處在於，它不具備響應式能力。因此，如果該值在組件運行時會發生變更，那麼不建議以私有屬性的方式在模板中展現。
通常情況下，我們會在多個邏輯方法中定義一個公用屬性，以此完成特定的業務邏輯。由於它不具備響應能力，所以既不會造成額外的性能開銷，也不會污染原始數據。
屬性/參數創建和編輯
這裏我們來講解一下參數屬性的編輯面板的操作流程。（屬性和參數的創建面板基本一致，只是存在部分屬性的差異，在講解時我們會特別標註，請仔細閲讀。）
第一步（屬性基本信息）
- 屬性名稱：這裏需要我們使用英文字母完成屬性名的配置，屬性名在當前組件功能中需要保持唯一（即在傳入參數中唯一/在響應數據中唯一）
- 備註/標題：我們可以為其配置一個標題，標題的配置可以幫我們更快速的瞭解屬性的用途，例如：顏色、尺寸等。
- 提示：我們可以通過提示屬性來配置當前屬性的詳細描述，當我們在使用時，通過鼠標移入可以查看當前屬性的詳細説明。
- 分類：僅參數需要配置，我們可以在這裏配置一個參數的分類，相同的分類在組件屬性時會進行分組歸類，可以提供使用者更好的體驗性。
- 排序：可用於將屬性進行排序，值越大在屬性面板中越靠前（僅針對輸入參數）
第二步（屬性類型信息）
-
類型：當前屬性的類型。
- 字符串（
String） - 數字（
Number） - 布爾值（
Boolean） - 數組（
Array） - 對象（
Object） - 方法（
Function） - 時間（
Date） - 任意類型（
Any）
- 字符串（
- 是否非空：可配置當前值是否允許為空（
undefined）。 -
賦值方式：僅參數需要配置，當需要為其設置值時，可通過該屬性來決定採用何種交互方式為其賦值。不同的數據類型會有不同的賦值方式可選。
- 可選值：可創建 Key - Value 的數據，提供下拉框模式的值選擇。
- 多行文本：採用長文本輸入框，可實現多行文本的輸入。
- 顏色值：展現為顏色設置控件，可快速完成顏色的配置。
- CSS 尺寸值：在這裏可以配置 CSS 的尺寸值（帶單位）。
- 樣式名：展示為樣式設置控件，可快速查詢當前項目中的公開樣式，實現快速添加。
- 圖片資源選擇：提供內部靜態資源的快速選擇交互（圖片展示效果）。
- 資源選擇：提供內部靜態資源的快速選擇交互。
- Style 樣式：展現一個可視化的 Style 配置面板，可完成一些常用的樣式編輯。
- 表達式：默認使用表達式（動態腳本）進行過值配置。
- 默認值：作為參數/屬性的默認值，若未配置或未傳遞值（參數）時，會自動賦值為該默認值。
- 演示值：僅參數需要配置，該屬性用於當該組件被引入時，為該屬性立即設置一個值，通過演示值可以幫助開發人員在引入組件時有一個更好的首次展示效果，開發人員可以對其修改。
若當前屬性類型被配置為：數組/對象時，會在第二步展現深層類型設計面板，我們可以在這裏配置對象或數組的內部屬性類型。
內部屬性設計面板中的要素和上述內容基本一致，可參考上述功能描述。
