Vue中computed、methods、watch差別

1. computed計算屬性

計算屬性最常見的寫法就是函數寫法:

<template>
  <div class="home">
    {{formMsg}}
    <button @click="formMsg = '胡崽崽'">點選修改</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      msg: 'hello'
    }
  },
  computed: {
    formMsg() {
    // 必須要有傳回值，沒有return值為undefined，計算屬性作為屬性({{formMsg}})去使用
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>
           

當我們去點選按鈕修改

formMsg

的值時，浏覽器會報錯

這是因為計算機屬性不能直接指派，它裡面沒有設定

set

屬性，我們可以為其添加一個

set

屬性

<template>
  <div class="home">
    {{formMsg}}	// 會顯示：胡崽崽
    <button @click="formMsg = '胡崽崽'">點選修改</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      msg: 'hello'
    }
  },
  computed: {
    formMsg: {
      get() {
      	return this.msg
      },
      set(val) {
      	this.msg = val
      }
    }
  }
}
</script>
           

2. methods方法

methods 方法表示一個具體的操作，主要書寫業務邏輯。

<template>
    <div class='home'>
        你購買的數量：{{num}}<br>
        <button @click="add">增加數量</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            num:1,
        };
    },
    methods: {
        add() {
            this.num++
        }
    }
};
</script>
           

computed 和 methods 差別

在官方文檔中，最重要的兩點差別：

1. computed

   是屬性調用，而

   methods

   是函數調用

2. computed

   帶有緩存功能，而

   methods

   不會被緩存

3. watch監聽

watch屬性可以用來監聽data屬性中資料的變化。

<template>
    <div class='home'>
        <button @click="msg = '胡崽崽'">改變msg</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg:'你好'
        };
    },
    watch:{
        msg(newVal,oldVal) {
            console.log(newVal,oldVal); // 胡崽崽  你好
        }
    }
};
</script>
這種函數寫法隻能監聽基本資料類型的變化，對于引用資料類型(數組、對象)是監聽不到他們的變化

           

watch深度監聽

# 對象
<template>
    <div class='home'>
        <button @click="obj.name = 'uu盤'">改變對象中name屬性</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            obj:{
                name:'hello',
            }
        };
    },
    watch:{
    	// 方法一：監聽對象中的單個屬性變化的方法
        'obj.name'(newVal,oldVal) {
            console.log(newVal);    // uu盤
            console.log(oldVal);    // hello
        },
        // 方法二：深度監聽 可以監聽引用資料類型中所有的屬性
        obj:{
            handler(val) {
                console.log(val); // {name:'uu盤'}
            },
            deep:true,		// 開啟深度監聽
            immediate: true	// 頁面進入後資料監聽會立即執行一次
        }
    }
};
</script>
# 數組
<template>
    <div class='home'>
        <button @click="change">改變數組</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arr:[1,2,3]
        };
    },
    methods:{
        change() {
            this.arr.push(4)
        }
    },
    watch:{
        // 監視程式隻接受簡單的點分隔路徑(obj.name)
        // 'arr[0]'(newVal,oldVal) {	錯誤寫法
        //     console.log(newVal,oldVal);
        // }
        arr:{
            handler(val) {
                console.log(val);	// [1,2,3,4]
            },
            deep:true
        }
    }
};
</script>
           

總結

1. computed

   屬性的結果會被緩存，隻有當依賴值發生改變才會重新計算，一般用于複雜邏輯的時候使用，例如：購物車裡面的商品計算

2. methods

   方法表示一個具體的操作，主要書寫具體業務邏輯

3. watch

   可以讓我們監聽一個值的變化，進而做出相應的反應

   deep:代表深度監聽，不僅監聽值的變化，也監聽值屬性的變化

   handler:就是以前的監聽處理函數，它有兩個參數，一個是新值，一個是舊值