【Vue2手錄06】計算屬性Computed

一、表單元素的v-model綁定（核心場景）

v-model 是Vue實現“表單元素與數據雙向同步”的語法糖，不同表單元素的綁定規則存在差異，需根據元素類型選擇正確的綁定方式。

1.1 四大表單元素的綁定規則對比

表單元素類型	綁定數據類型	核心規則	初始值設置	關鍵注意事項
單選框（radio）	字符串/數字	綁定值與單選框的`value`屬性一致時，該選項選中	設為目標`value`（如`'male'`）	必須為每個單選框顯式設置`value`屬性
單個多選框（checkbox）	布爾值	選中時數據為`true`，未選中為`false`，無需設置`value`	`true`（默認選中）/`false`	常用于“同意協議”“記住密碼”等場景
多個多選框（checkbox）	數組	選中項的`value`自動加入數組，取消選中時自動移除	空數組`[]`（默認無選中）	所有多選框需綁定同一數組，且必須設置`value`
下拉框（select）	字符串/數組	- 單選下拉框：綁定選中項的`value`； - 多選下拉框（加`multiple`）：綁定選中項`value`組成的數組	單選：目標`value`；多選：`[]`	若未設`value`，默認用`<option>`的文本作為`value`

1.2 詳細用法與示例

1. 單選框（radio）：性別選擇

<div id="app"><label><input type="radio" name="gender" value="male" v-model="selectedGender"> 男</label><label><input type="radio" name="gender" value="female" v-model="selectedGender"> 女</label><p>選中性別：{{ selectedGender }}</p>
</div>
<script>
new Vue({el: "#app",data: {selectedGender: "male" // 初始選中“男”}
});
</script>

關鍵：name屬性確保單選框互斥（同一組只能選一個），v-model綁定值與value匹配即選中。

2. 單個多選框（checkbox）：協議同意

<div id="app"><label><input type="checkbox" v-model="isAgree"> 我已閱讀并同意用戶協議</label><button :disabled="!isAgree" style="margin-left: 8px;">提交</button><p>同意狀態：{{ isAgree }}</p>
</div>
<script>
new Vue({el: "#app",data: {isAgree: false // 初始未選中，按鈕禁用}
});
</script>

關鍵：無需設置value，v-model直接綁定布爾值，常用于控制按鈕禁用狀態。

3. 多個多選框（checkbox）：愛好選擇

<div id="app"><p>選擇愛好：</p><label><input type="checkbox" value="game" v-model="selectedHobbies"> 游戲</label><label><input type="checkbox" value="reading" v-model="selectedHobbies"> 閱讀</label><label><input type="checkbox" value="sports" v-model="selectedHobbies"> 運動</label><p>選中愛好：{{ selectedHobbies }}</p>
</div>
<script>
new Vue({el: "#app",data: {selectedHobbies: ["reading"] // 初始選中“閱讀”}
});
</script>

關鍵：所有多選框綁定同一數組，value必須唯一，數組自動維護選中狀態。

4. 下拉框（select）：省份選擇

<div id="app"><!-- 單選下拉框 --><select v-model="selectedProvince"><option value="">請選擇省份</option> <!-- 空value對應初始未選 --><option value="beijing">北京</option><option value="shanghai">上海</option><option>廣東</option> <!-- 未設value，默認用文本“廣東”作為value --></select><!-- 多選下拉框（按住Ctrl選擇） --><select v-model="selectedProvinces" multiple style="margin-top: 8px;"><option value="beijing">北京</option><option value="shanghai">上海</option></select><p>單選省份：{{ selectedProvince }}</p><p>多選省份：{{ selectedProvinces }}</p>
</div>
<script>
new Vue({el: "#app",data: {selectedProvince: "shanghai", // 初始選中“上海”selectedProvinces: ["beijing"] // 初始選中“北京”}
});
</script>

關鍵：多選下拉框需加multiple屬性，綁定數組；未設value時，v-model值為<option>的文本。

二、v-model修飾符（簡化表單處理）

表單輸入默認是字符串類型，且可能包含無效空格，Vue提供3個常用修飾符，無需手動寫JS邏輯即可優化輸入體驗。

修飾符	核心作用	適用場景	示例代碼與效果
`.trim`	自動去除輸入值的首尾空格（中間空格保留）	用戶名、手機號、郵箱等需過濾無效空格的場景	`<input v-model.trim="username">` 輸入“ 小明 ”→ 變量值“小明”
`.number`	自動將輸入值轉為數字類型（非數字保留字符串）	年齡、金額、數量等需數值運算的場景	`<input v-model.number="age" type="number">` 輸入“18”→ 變量值`18`（數字）
`.lazy`	從“input事件”觸發同步改為“change事件”觸發（失去焦點/回車時同步）	輸入內容無需實時同步的場景（如長文本輸入）	`<input v-model.lazy="desc">` 輸入時不實時同步，失去焦點后更新

示例：帶修飾符的注冊表單

<div id="app"><input v-model.trim="username" placeholder="用戶名（去首尾空格）"><br><input v-model.number="age" type="number" placeholder="年齡（轉數字）"><br><textarea v-model.lazy="desc" placeholder="描述（失焦同步）"></textarea><br><p>用戶名：{{ username }}（類型：{{ typeof username }}）</p><p>年齡：{{ age }}（類型：{{ typeof age }}）</p><p>描述：{{ desc }}</p>
</div>
<script>
new Vue({el: "#app",data: {username: "",age: "", // 初始為空，輸入后轉為數字desc: ""}
});
</script>

三、核心：計算屬性（computed）

計算屬性是Vue中“處理派生數據”的核心特性，本質是依賴其他數據動態計算出的屬性，具有緩存機制，可避免重復計算，保持模板簡潔。

3.1 為什么需要計算屬性？（解決的痛點）

直接在模板中寫復雜JS邏輯會導致模板臃腫、難維護，例如：

<!-- 模板中直接寫復雜運算：臃腫且無緩存 -->
<p>{{ msg[0].toUpperCase() + msg.substring(1) }}</p> <!-- 首字母大寫 -->
<p>{{ gender === 1 ? "男" : gender === 2 ? "女" : "未知" }}</p> <!-- 性別轉換 -->

計算屬性可將這些邏輯移到JS層，模板僅需引用屬性名，實現“關注點分離”：

<!-- 模板簡潔清晰 -->
<p>{{ formattedMsg }}</p>
<p>{{ formattedGender }}</p>
<script>
new Vue({computed: {// 計算屬性：首字母大寫formattedMsg() {return this.msg[0].toUpperCase() + this.msg.substring(1);},// 計算屬性：性別轉換formattedGender() {return this.gender === 1 ? "男" : this.gender === 2 ? "女" : "未知";}}
});
</script>

3.2 計算屬性的核心機制：緩存與依賴追蹤

1. 緩存機制（性能關鍵）

原理：計算屬性會緩存計算結果，只有當它依賴的data屬性變化時，才會重新執行計算函數；若依賴未變，多次調用會直接返回緩存值。
對比methods：methods每次調用都會重新執行函數，無緩存，性能較差。

示例：緩存機制驗證

<div id="app"><p>計算屬性結果：{{ computedResult }}</p><p>計算屬性結果：{{ computedResult }}</p> <!-- 復用緩存，不重新計算 --><p>方法結果：{{ methodResult() }}</p><p>方法結果：{{ methodResult() }}</p> <!-- 重新執行，打印2次“方法執行” --><button @click="msg = 'new message'">修改依賴</button>
</div>
<script>
new Vue({el: "#app",data: { msg: "hello" },computed: {computedResult() {console.log("計算屬性執行"); // 僅依賴變化時打印1次return this.msg.toUpperCase();}},methods: {methodResult() {console.log("方法執行"); // 每次調用都打印，共2次return this.msg.toUpperCase();}}
});
</script>

輸出結果：初始時打印“計算屬性執行”1次、“方法執行”2次；點擊按鈕修改msg后，打印“計算屬性執行”1次、“方法執行”2次。

2. 依賴追蹤

Vue會自動追蹤計算屬性依賴的所有data屬性（如formattedMsg依賴msg），當任一依賴變化時，計算屬性會“自動重新計算”并更新視圖。

3.3 計算屬性 vs methods vs watch（核心區別）

三者都能處理數據邏輯，但適用場景不同，需精準選擇：

特性	計算屬性（computed）	方法（methods）	偵聽器（watch）
核心作用	處理派生數據（如格式化、過濾、計算）	處理事件邏輯、異步操作、無返回值的操作	監聽單個數據變化，執行異步/開銷大的操作
緩存機制	有（依賴不變時復用結果）	無（每次調用重新執行）	無（數據變化時執行）
調用方式	模板中直接用屬性名（不加括號）	需加括號調用（如`method()`）	自動執行（數據變化時觸發）
返回值	必須有返回值（否則無意義）	可無返回值（如僅執行事件）	無需返回值（僅執行副作用）
適用場景	1. 數據格式化（如日期、金額）； 2. 數組過濾排序； 3. 多數據組合計算	1. 事件處理（如點擊、輸入）； 2. 同步邏輯執行	1. 異步操作（如數據變化后請求接口）； 2. 數據變化時執行復雜邏輯

示例：watch的適用場景（異步操作）

<div id="app"><input v-model="username" placeholder="輸入用戶名"><p>用戶名合法性：{{ usernameValid }}</p>
</div>
<script>
new Vue({el: "#app",data: {username: "",usernameValid: true},watch: {// 監聽username變化，執行異步驗證（計算屬性無法處理異步）username(newVal) {// 模擬后端接口驗證（異步）setTimeout(() => {this.usernameValid = newVal.length >= 3; // 用戶名≥3位為合法}, 500);}}
});
</script>

3.4 計算屬性的進階用法

1. 計算屬性的setter（修改計算屬性）

默認情況下，計算屬性是“只讀”的（僅實現getter），若需“修改計算屬性”，需顯式定義setter：

<div id="app"><p>全名：{{ fullName }}</p><input v-model="fullName" placeholder="修改全名"><p>姓：{{ firstName }}，名：{{ lastName }}</p>
</div>
<script>
new Vue({el: "#app",data: {firstName: "張",lastName: "三"},computed: {fullName: {// getter：讀取fullName時執行（默認）get() {return this.firstName + this.lastName;},// setter：修改fullName時執行set(newFullName) {// 拆分全名為姓和名（如“李四”→ firstName=“李”，lastName=“四”）const arr = newFullName.split("");this.firstName = arr[0];this.lastName = arr.slice(1).join("");}}}
});
</script>

效果：修改fullName輸入框時，setter會拆分輸入值，同步更新firstName和lastName。

2. 計算屬性傳參（間接實現）

計算屬性本質是“屬性”，不能直接傳參（如computedProp(123)會報錯），需通過“返回函數”間接實現：

<div id="app"><p>年齡判斷（18）：{{ checkAge(18) }}</p> <!-- 成年 --><p>年齡判斷（16）：{{ checkAge(16) }}</p> <!-- 未成年 -->
</div>
<script>
new Vue({el: "#app",data: { adultAge: 18 }, // 依賴的基準年齡computed: {// 計算屬性返回函數，函數接收參數checkAge() {// 函數內可訪問Vue實例的屬性（如this.adultAge）return (age) => {return age >= this.adultAge ? "成年" : "未成年";};}}
});
</script>

注意：返回的函數無緩存，每次調用都會重新執行，適用于“需動態傳參且計算邏輯簡單”的場景。

四、實戰案例：待辦事項列表（Todo List）

綜合運用v-for、v-model、數組變異方法、計算屬性，實現“添加-刪除-統計”的完整功能。

需求分析

輸入框輸入待辦內容，回車添加到列表；
點擊待辦項，刪除該條目；
統計“已完成/總數量”（用計算屬性實現）。

完整代碼實現

<div id="app"><div style="margin-bottom: 16px;"><input v-model.trim="newTodo" placeholder="輸入待辦內容，回車添加"@keyup.enter="addTodo"style="padding: 8px; width: 300px;"></div><!-- 待辦列表 --><ul style="list-style: none; padding: 0; max-width: 300px;"><li v-for="(todo, index) in todoList" :key="todo.id" style="padding: 8px; border-bottom: 1px solid #eee; cursor: pointer; display: flex; justify-content: space-between;"@click="deleteTodo(index)"><span>{{ todo.text }}</span><span style="color: #f44336;">×</span></li></ul><!-- 統計信息（計算屬性） --><p style="max-width: 300px; text-align: right;">總數量：{{ totalCount }} | 已完成：{{ completedCount }} | 未完成：{{ uncompletedCount }}</p>
</div>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script>
new Vue({el: "#app",data: {newTodo: "", // 新待辦輸入值todoList: [{ id: 1, text: "學習v-model綁定", completed: false },{ id: 2, text: "掌握計算屬性緩存", completed: true }]},computed: {// 總數量totalCount() {return this.todoList.length;},// 已完成數量completedCount() {return this.todoList.filter(todo => todo.completed).length;},// 未完成數量uncompletedCount() {return this.totalCount - this.completedCount;}},methods: {// 添加待辦（回車觸發）addTodo() {if (!this.newTodo) return; // 空內容不添加this.todoList.push({id: Date.now(), // 時間戳作為唯一ID（避免index沖突）text: this.newTodo,completed: false // 初始未完成});this.newTodo = ""; // 清空輸入框},// 刪除待辦（點擊觸發）deleteTodo(index) {this.todoList.splice(index, 1); // splice是變異方法，觸發視圖更新}}
});
</script>

關鍵要點

數組變異方法：用push（添加）、splice（刪除）確保視圖響應式更新；
唯一ID：用Date.now()作為待辦項的id，避免index作key的缺陷；
計算屬性統計：completedCount依賴todoList，待辦狀態變化時自動重新計算，無需手動更新統計。

小練習（鞏固核心知識點）

練習1：表單綁定綜合（用戶信息收集）

需求

實現用戶信息表單，包含：
- 性別（單選框：男/女）；
- 愛好（多選框：電影、音樂、旅行）；
- 城市（下拉框：北京、上海、廣州）；
- 年齡（輸入框，自動轉數字，范圍18-60）；
點擊“提交”按鈕，控制臺打印完整用戶信息；
年齡輸入非數字或超出范圍時，按鈕禁用。

練習2：計算屬性緩存（商品價格計算）

需求

定義商品列表products（含name、price、count字段）；
用計算屬性totalPrice計算“所有商品的總價”（price * count求和）；
驗證緩存機制：多次引用totalPrice，觀察是否重復計算；
修改任一商品的count，驗證totalPrice是否重新計算。

練習3：計算屬性傳參（數組過濾）

需求

定義數組users（含name、age字段）；
用計算屬性filterUsers返回函數，函數接收minAge參數；
調用函數時，過濾出age ≥ minAge的用戶（如filterUsers(18)返回成年用戶）；
在模板中分別顯示“≥18歲”和“≥25歲”的用戶列表。

練習4：計算屬性setter（全名修改）

需求

定義firstName（姓）和lastName（名）；
用計算屬性fullName實現：
- getter：返回“姓+名”（如“張三”）；
- setter：輸入“全名”時拆分出姓和名（如輸入“李四”→ firstName=“李”，lastName=“四”）；
用輸入框綁定fullName，修改輸入框時同步更新firstName和lastName。

小練習參考答案

練習1：表單綁定綜合（用戶信息收集）

<div id="app"><div style="margin-bottom: 8px;"><label>性別：</label><input type="radio" name="gender" value="男" v-model="user.gender"> 男<input type="radio" name="gender" value="女" v-model="user.gender"> 女</div><div style="margin-bottom: 8px;"><label>愛好：</label><input type="checkbox" value="電影" v-model="user.hobbies"> 電影<input type="checkbox" value="音樂" v-model="user.hobbies"> 音樂<input type="checkbox" value="旅行" v-model="user.hobbies"> 旅行</div><div style="margin-bottom: 8px;"><label>城市：</label><select v-model="user.city"><option value="">請選擇</option><option value="北京">北京</option><option value="上海">上海</option><option value="廣州">廣州</option></select></div><div style="margin-bottom: 8px;"><label>年齡：</label><input type="number" v-model.number="user.age" placeholder="18-60"></div><button @click="submit" :disabled="!isFormValid"style="padding: 8px 16px; background: #2196F3; color: white; border: none; border-radius: 4px;">提交</button>
</div>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script>
new Vue({el: "#app",data: {user: {gender: "",hobbies: [],city: "",age: ""}},computed: {// 表單合法性判斷isFormValid() {const { gender, hobbies, city, age } = this.user;// 性別、城市必選，愛好至少選1個，年齡18-60return !!gender && hobbies.length > 0 && !!city && age >= 18 && age <= 60;}},methods: {submit() {console.log("用戶信息：", this.user);alert("提交成功！");}}
});
</script>

練習2：計算屬性緩存（商品價格計算）

<div id="app"><div v-for="(product, index) in products" :key="product.id" style="margin-bottom: 8px;"><span>{{ product.name }} - ￥{{ product.price }} × </span><input type="number" v-model.number="product.count" min="1" style="width: 50px;"></div><!-- 多次引用計算屬性，驗證緩存 --><p>總價1：{{ totalPrice }}</p><p>總價2：{{ totalPrice }}</p><p>總價3：{{ totalPrice }}</p><p>計算屬性執行次數：{{ computeCount }}</p>
</div>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script>
new Vue({el: "#app",data: {computeCount: 0, // 統計計算屬性執行次數products: [{ id: 1, name: "Vue教程", price: 59, count: 1 },{ id: 2, name: "前端手冊", price: 39, count: 2 }]},computed: {totalPrice() {this.computeCount++; // 每次計算+1// 求和：price * countreturn this.products.reduce((sum, product) => {return sum + product.price * product.count;}, 0);}}
});
</script>

驗證結果：初始時computeCount=1（3次引用僅執行1次）；修改任一商品的count，computeCount變為2（僅重新執行1次）。

練習3：計算屬性傳參（數組過濾）

<div id="app"><p>≥18歲用戶：</p><ul><li v-for="user in filterUsers(18)" :key="user.id">{{ user.name }}（{{ user.age }}歲）</li></ul><p>≥25歲用戶：</p><ul><li v-for="user in filterUsers(25)" :key="user.id">{{ user.name }}（{{ user.age }}歲）</li></ul>
</div>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script>
new Vue({el: "#app",data: {users: [{ id: 1, name: "小明", age: 17 },{ id: 2, name: "小紅", age: 20 },{ id: 3, name: "小剛", age: 26 },{ id: 4, name: "小麗", age: 30 }]},computed: {// 計算屬性返回函數，接收minAge參數filterUsers() {return (minAge) => {// 過濾出age ≥ minAge的用戶return this.users.filter(user => user.age >= minAge);};}}
});
</script>

練習4：計算屬性setter（全名修改）

<div id="app"><p>姓：{{ firstName }}</p><p>名：{{ lastName }}</p><p>全名：</p><input v-model="fullName" placeholder="輸入全名"style="padding: 8px; width: 200px;">
</div>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script>
new Vue({el: "#app",data: {firstName: "張",lastName: "三"},computed: {fullName: {// getter：讀取全名時執行get() {return this.firstName + this.lastName;},// setter：修改全名時執行set(newFullName) {// 處理特殊情況（空輸入或單字）if (newFullName.length === 0) {this.firstName = "";this.lastName = "";} else if (newFullName.length === 1) {this.firstName = newFullName;this.lastName = "";} else {// 拆分：首字符為姓，剩余為名this.firstName = newFullName[0];this.lastName = newFullName.slice(1);}}}}
});
</script>