計算屬性和監聽器

阿新 • • 發佈：2020-12-17

技術標籤：vue

計算屬性 computed是：return的值發生變化，計算的值跟著變
計算屬性是基於它們的響應式依賴進行快取的。只在相關響應式依賴發生改變時它們才會重新求值。
計算屬性有快取性，如果值沒有變化，則頁面不會重新渲染，這是計算屬性的一個優勢。

監聽器 watch是：監聽的物件發生變化，執行對應的函式
watch是觀察某一個屬性的變化，重新計算屬性值。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title> 

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <div>
      <h3>計算屬性 computed：</h3>
      <div>陣列list的長度為：{{length}}</div>
      <h3>監聽器 watch：</h3>
      < 
div>監聽到陣列list的長度為：{{listLength}}</div>
    </div>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data() {
        return {
          list: [1, 1, 1],
          listLength: 0
        };
      },
      computed: {
        length() {
          return this.list.length; 

        }
      },
      watch: {
        // 下面這種預設寫法的監聽器，初始化時不執行
        list(newValue, oldValue) {
          this.listLength = newValue.length;
        }
      }
    })
  </script>
</body>

</html>

在這裡插入圖片描述

一、上述程式碼和頁面中有一個問題：
我們寫了一個監聽器，用來監聽陣列list長度的變化，但是很不幸我們看到頁面上所顯示的listLength依舊是初始值0。
這是為什麼呢?
這裡就是我們需要注意的一個問題：
在我們使用watch即監聽器來實現功能的時候，如果不加特別的宣告，它表示所監聽的物件變化之後才會執行，也就是說它一開始不會執行，所以listLength沒有變化。

二、如何解決上述問題呢？
需要使用另一個寫法，即帶選項的watch，並且把immediate屬性置為true
我們使用vscode snippets外掛用vwatch-option，快捷生成的watch預設就是true

計算屬性和監聽器

vue計算屬性和監聽器

計算屬性和監聽器

Vue【資料】計算屬性和偵聽器

計算屬性和偵聽器

4. 計算屬性和監視

vue 計算屬性和監聽屬性

vue中的計算屬性和偵聽屬性

VUE 計算屬性和方法

vue中計算屬性和觀察屬性

vue 計算屬性和偵聽器的使用小結

從“心”認識Vue（二）: 計算屬性和methods方法的區別

Vue.js中計算屬性和方法的區別

Vue的計算屬性和監視

Vue.js-計算屬性和過濾器與監聽屬性/Vue.js元件

Vue學習筆記（二）動態繫結、計算屬性和事件監聽

Vue 計算屬性和多元件混入使用經驗總結

簡單聊聊Vue中的計算屬性和屬性偵聽

計算屬性和偵聽器詳情

computed(計算屬性)和methods的區別

setup計算屬性和鉤子函式

計算屬性和監聽器

相關推薦