站長資訊網
前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具：點擊使用
一、計算屬性computed
1.1.什么是計算屬性computed
⭐⭐
computed 是基于它的依賴緩存，只有在它的相關依賴發生改變時才會進行更新。官方文檔是這樣說的：對于任何包含響應式數據的復雜邏輯，你都應該使用計算屬性。?（學習視頻分享：vue視頻教程）
1.2.復雜數據的處理-computed
⭐⭐
拼接字符串、分數是否及格、message記錄一段文字，這里是用computed實現的
<div id="app"> <!-- 插值語法表達式直接進行拼接 --> <!-- 1.拼接姓名 --> <h2>{{fullname}}</h2> <!-- 2.顯示分數及格或不及格 --> <h2>{{scorelevel}}</h2> <!-- 3.反轉單詞 --> <!-- reverse針對于數組，先用split轉為數組，在用reverse --> <h2>{{reversetext}}</h2> </div> <script src="../lib/vue.js"></script> <script> const app = Vue.createApp({ data() { return { // name firstName: "kk", lastName: "cc", // score score: 99, // 文本中單詞反轉 message: "I love stydy Vue3", }; }, computed: { fullname() { return this.firstName + " " + this.lastName; }, scorelevel() { return this.score >= 60 ? "及格" : "不及格"; }, reversetext() { return this.message.split(" ").reverse().join(" "); }, }, }); app.mount("#app");
登錄后復制
當然我們用Mustache插值語法、methods也是可以完成的，但是對于復雜數據的處理，我們往往采用computed，寫法更清晰，且計算屬性是有緩存的
1.3.計算屬性的緩存
⭐⭐
- 會基于它們的依賴關系進行緩存；
- 在數據不發生變化時，計算屬性是不需要重新計算的；
- 但是如果依賴的數據發生變化，在使用時，計算屬性依然會重新進行計算；
&tinsp;
所以這也是我們在復雜數據處理時更傾向于computed
-
在使用相同次數的fullName時，methods執行三次，computed執行一次，這正是由于computed計算屬性會被緩存
1.4.計算屬性computed的setter和getter
⭐⭐
大多數情況下，計算屬性只需要一個getter方法，那么此時computed屬性屬性值為函數
如果想要設置計算屬性的值，我們可以給計算屬性設置一個setter方法
computed: { // 語法糖 fullname() { return this.firstname + " " + this.lastname; }, // 完整寫法 fullname: { get: function () { return this.firstname + " " + this.lastname; }, set: function (value) { const names = value.split(" "); this.firstname = names[0]; this.lastname = names[1]; }, },
登錄后復制
【相關視頻教程推薦：vuejs入門教程、web前端入門】
