深入了解vue中的計算屬性-Vue.js-PHP中文網

首頁

web前端

Vue.js

深入了解vue中的計算屬性

青灯夜游

Nov 02, 2020 pm 05:53 PM

vue 計算屬性

下面Vue.js教學欄位帶大家了解vue中的計算屬性。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

深入了解vue中的計算屬性

一、什麼是計算屬性

模板內的表達式非常便利，但是設計它們的初衷是用來簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：

<p id="example">
  {{ message.split('').reverse().join('') }}</p>

登入後複製

這裡的表達式包含3個操作，並不是很清晰，所以遇到複雜邏輯時應該使用Vue特帶的計算屬性computed來處理。

二、計算屬性的用法

在一個運算屬性裡可以完成各種複雜的邏輯，包括運算、函數呼叫等，只要最後回傳一個結果就可以。

我們把上面的範例用計算屬性的方式重寫一下

<p id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>　　//我们把复杂处理放在了计算属性里面了</p>

登入後複製

var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        reversedMessage: function () {            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
});

登入後複製

結果：

Original message: "Hello"

#Computed reversed message: "olleH"

除了上例簡單的用法，計算屬性還可以依賴多個Vue 實例的數據，只要其中任一數據變化，計算屬性就會重新執行，視圖也會更新。

<body>
    <p id="app">
        <button @click="add()">补充货物1</button>
        <p>总价为：{{price}}</p>
    </p></body>

登入後複製

var app = new Vue({        
       el: '#app', 
   data: {
       package1: {
           count: 5,
           price: 5
       },
       package2: {
           count: 10,
           price: 10
       }
    },
    computed: {
     price: function(){         return this.package1.count*this.package1.price+this.package2.count*this.package2.price　　//总价随着货物或价格的改变会重新计算
     }
    },
    methods: {   //对象的方法
        add: function(){            this.package1.count++
        }
    }
});

登入後複製

計算屬性還有兩個很實用的小技巧容易被忽略：一是計算屬性可以依賴其他計算屬性; 二是計算屬性不僅可以依賴當前Vue 實例的數據，還可以依賴其他實例的資料，例如：

    <p id="app1"></p>
    <p id="app2">{{ reverseText}}</p>

登入後複製

var app1 = new Vue({
   el: '#app1',
 data: {
      text: 'computed'
    }
});var app2 = new Vue({
    el: '#app2',
    computed: {
        reverseText: function(){
        return app1.text.split('').reverse().join('');  //使用app1的数据进行计算        }
    }
});

登入後複製

每一個計算屬性都包含一個getter 和一個setter ，我們上面的兩個範例都是計算屬性的預設用法，只是利用了getter 來讀取。

在你需要時，也可以提供一個setter 函數，當手動修改計算屬性的值就像修改一個普通資料一樣時，就會觸發setter 函數，執行一些自訂的操作，例如：

var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
    },
    computed: {
        fullName: {            // getter
            get: function () {                return this.firstName + ' ' + this.lastName
            },            // setter
            set: function (newValue) {                var names = newValue.split(' ');                this.firstName = names[0];                this.lastName = names[names.length - 1];
            }
        }
    }
});//现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

登入後複製

絕大多數情況下，我們只會用預設的getter 方法來讀取一個計算屬性，在業務中很少用到setter,所以在聲明一個計算屬性時，可以直接使用預設的寫法，不必將getter 和setter 都聲明。

三、計算屬性快取

上面的例子，除了使用計算屬性外，我們也可以透過在表達式中呼叫方法來達到同樣的效果，如：

<p>{{reverseTitle()}}</p>

登入後複製

// 在组件中methods: {
  reverseTitle: function () {    return this.title.split('').reverse().join('')
  }
}

登入後複製

我們可以將相同函數定義為一個方法而不是一個計算屬性，兩種方式的最終結果確實是完全相同的。只是一個使用reverseTitle()取值，一個使用reverseTitle取值。

然而，不同的是計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的相關依賴改變時才會重新求值。

這表示只要 title還沒有改變，多次存取 reverseTitle計算屬性會立即傳回先前的計算結果，而不必再執行函數。

舉個小例子：

        <p>{{reverseTitle}}</p>
        <p>{{reverseTitle1()}}</p>
        <button @click="add()">补充货物1</button>
        <p>总价为：{{price}}</p>

登入後複製

    computed: {
      reverseTitle: function(){          return this.title.split('').reverse().join('')　　//而使用计算属性，只要title没变，页面渲染是不会重新进这里来计算的，而是使用了缓存。
      },
     price: function(){         return this.package1.count*this.package1.price+this.package2.count*this.package2.price
     }
    },
    methods: {   //对象的方法
        add: function(){            this.package1.count++
        },
        reverseTitle1: function(){            return this.title.split('').reverse().join('')　　//点击补充货物，也会进这个方法，再次计算。不是刷新，而是只要页面渲染，就会进方法里重新计算。
        }
    },

登入後複製

相較之下，每當觸發重新渲染時，呼叫方法將總是會再次執行函數。

我們為什麼需要快取？假設我們有一個效能開銷比較大的的計算屬性 A，它需要遍歷一個巨大的陣列並做大量的計算。然後我們可能有其他的計算屬性依賴 A 。

如果沒有緩存，我們將不可避免的多次執行 A 的 getter！如果你不希望有緩存，請用方法來替代。

相關推薦：

2020年前端vue面試題大匯總（附答案）

vue教程推薦：2020最新的5個vue.js影片教學精選

更多程式相關知識，請造訪：程式設計教學！！

以上是深入了解vue中的計算屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7814

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1237

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

vue怎麼給按鈕添加函數 Apr 08, 2025 am 08:51 AM

可以通過以下步驟為 Vue 按鈕添加函數：將 HTML 模板中的按鈕綁定到一個方法。在 Vue 實例中定義該方法並編寫函數邏輯。

vue中的watch怎麼用 Apr 07, 2025 pm 11:36 PM

Vue.js 中的 watch 選項允許開發者監聽特定數據的變化。當數據發生變化時，watch 會觸發一個回調函數，用於執行更新視圖或其他任務。其配置選項包括 immediate，用於指定是否立即執行回調，以及 deep，用於指定是否遞歸監聽對像或數組的更改。

vue多頁面開發是啥意思 Apr 07, 2025 pm 11:57 PM

Vue 多頁面開發是一種使用 Vue.js 框架構建應用程序的方法，其中應用程序被劃分為獨立的頁面：代碼維護性：將應用程序拆分為多個頁面可以使代碼更易於管理和維護。模塊化：每個頁面都可以作為獨立的模塊，便於重用和替換。路由簡單：頁面之間的導航可以通過簡單的路由配置來管理。 SEO 優化：每個頁面都有自己的 URL，這有助於搜索引擎優化。