站長資訊網
        最全最豐富的資訊網站

        聊聊Vue中的計算屬性computed

        聊聊Vue中的計算屬性computed

        前端(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計算屬性會被緩存

        聊聊Vue中的計算屬性computed
        聊聊Vue中的計算屬性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前端入門】

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 99久久精品国产综合一区| 无码国内精品人妻少妇蜜桃视频| 久久99精品久久久久久野外| 国产亚洲精品资在线| 精品国产成人国产在线观看| 少妇人妻精品一区二区三区| 国产麻豆精品入口在线观看| 日韩经典精品无码一区| 亚洲精品白浆高清久久久久久| 亚洲精品tv久久久久久久久| 亚洲综合精品香蕉久久网97| 精品第一国产综合精品蜜芽| 国产69精品久久久久777| 亚洲国产成人久久精品影视| 野狼第一精品社区| 99RE6热在线精品视频观看| 国内精品久久久久久野外| 3级黄性日本午夜精品| 久久久久久亚洲精品无码| 综合在线视频精品专区| 国产日韩高清三级精品人成| 狠狠色丁香婷婷综合精品视频| 精品国产a∨无码一区二区三区| 国产精品18久久久久久vr| 国产精品国产三级在线高清观看 | 极品精品国产超清自在线观看| 久久香综合精品久久伊人| 精品999在线| 精品国产三级a∨在线| 小辣椒福利视频精品导航| 四库影院永久四虎精品国产 | 99久久国产综合精品成人影院 | 中文字幕日韩精品在线| 国内精品久久久久影院优 | 国产精品三级在线| 99久久精品国产高清一区二区 | 久久激情亚洲精品无码?V| 国产精品片在线观看手机版| 国产精品内射久久久久欢欢| 国产精品亚洲产品一区二区三区 | 久久亚洲国产成人精品无码区|