Vue中的偵聽屬性與計算屬性

阿新 • • 發佈：2021-01-01

計算屬性

什麼是計算屬性？（computed）
根據Vue的官方文件，我們可以瞭解到，計算屬性就是用來儲存和處理一些資料，對資料進行邏輯操作還有就是對計算屬性中的資料進行監視。計算屬性預設只有 getter，不過在需要時你也可以提供一個 setter

<div id="demo">{{ fullName }}</div>

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 也會相應地被更新。

偵聽屬性

雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什麼 Vue 通過 watch 選項提供了一個更通用的方法，來響應資料的變化。當需要在資料變化時執行非同步或開銷較大的操作時，這個方式是最有用的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
    <button @click="clickHandler">修改</button> 


</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script>
    var vm =new Vue({
        el:'#app',
        data(){
            return{
                msg:'鬼泣',
                age:'奶爸',
            }
        },
        methods:{
            clickHandler(){
                //this指向的是當前物件
				// console.log(this)
                this.msg='劍魂';
            },
        },
        watch:{
            //watch監聽多個屬性,要想監聽多個屬性,宣告多個屬性
            msg:function(value){
                console.log(value);
                if (value==='劍魂'){
                      this.msg = '阿修羅'
                }
            }
        }
    })
</script>

點選前

點選後的控制檯
點選後的瀏覽器頁面
點選後的頁面

計算屬性與偵聽屬性的區別

我們可以將同一函式定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基於它們的響應式依賴進行快取的。只在相關響應式依賴發生改變時它們才會重新求值。我們為什麼需要快取？假設我們有一個性能開銷比較大的計算屬性 A，它需要遍歷一個巨大的陣列並做大量的計算。然後我們可能有其他的計算屬性依賴於 A。如果沒有快取，我們將不可避免的多次執行 A 的 getter！如果你不希望有快取，請用方法來替代。

Vue中的偵聽屬性與計算屬性

計算屬性

偵聽屬性

計算屬性與偵聽屬性的區別

Vue中的偵聽屬性與計算屬性

解決vue無法偵聽陣列及物件屬性的變化問題

Vue中偵聽器的基本用法示例

vue中動態引數與計算屬性的使用方法

vue計算屬性與監視屬性

Vue監聽屬性和計算屬性

重學vue-- [data;methods；watch；計算屬性；過濾器]

在vue中動態修改css其中一個屬性值操作

Vue筆記（三）：計算屬性（computed）

計算屬性與監視屬性

vue中TinyMCE圖片 “data-mce-src” 屬性的問題

mysql中常用日期比較與計算函式

Python 類屬性與例項屬性，類物件與例項物件用法分析

vue中監聽資料變化 watch

CSS字型屬性與文字屬性

如何區分vue中的v-show 與 v-if

面向物件（三）-例項屬性與類屬性

vue中事件的宣告與使用

Vue中JavaScript的運用與computed和watch的對比

淺談VUE中的深拷貝與淺拷貝Object.assign()方法

Vue中的偵聽屬性與計算屬性

計算屬性

偵聽屬性

計算屬性與偵聽屬性的區別

相關推薦