【Vue 開發實戰】基礎篇 # 9：合理應用計算屬性和偵聽器

說明

【Vue 開發實戰】學習筆記。

計算屬性 computed

• 減少模闆中計算邏輯
• 資料緩存.
• 依賴固定的資料類型(響應式資料)

<template>
  <div>
    <p>Reversed message1: "{{ reversedMessage1 }}"</p>
    <p>Reversed message2: "{{ reversedMessage2() }}"</p>
    <p>{{ now }}</p>
    <button @click="() => $forceUpdate()">forceUpdate</button>
    <br />
    <input v-model="message" />
  </div>
</template>
<script>export default {
  data() {
    return {
      message: "hello vue"
    };
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage1: function() {
      console.log("執行reversedMessage1");
      return this.message
        .split("")
        .reverse()
        .join("");
    },
    now: function() {
      return Date.now();
    }
  },
  methods: {
    reversedMessage2: function() {
      console.log("執行reversedMessage2");
      return this.message
        .split("")
        .reverse()
        .join("");
    }
  }
};</script>      

偵聽器 watch

• 更加靈活、通用
• watch 中可以執行任何邏輯，如函數節流,，Ajax異步擷取資料，甚至操作DOM

<template>
  <div>
    {{ $data }}
    <br />
    <button @click="() => (a += 1)">a+1</button>
  </div>
</template>
<script>export default {
  data: function() {
    return {
      a: 1,
      b: { c: 2, d: 3 },
      e: {
        f: {
          g: 4
        }
      },
      h: []
    };
  },
  watch: {
    a: function(val,) {
      this.b.c += 1;
      console.log("new: %s, old: %s", val, oldVal);
    },
    "b.c": function(val,) {
      this.b.d += 1;
      console.log("new: %s, old: %s", val, oldVal);
    },
    "b.d": function(val,) {
      this.e.f.g += 1;
      console.log("new: %s, old: %s", val, oldVal);
    },
    e: {
      handler: function(val,) {
        this.h.push("😄");
        console.log("new: %s, old: %s", val, oldVal);
      },
      deep: true
    },
    h(val,) {
      console.log("new: %s, old: %s", val, oldVal);
    }
  }
};</script>      

computed VS watch

• computed 能做的，watch都能做，反之則不行
• 能用 computed 的盡量用 computed

​

​Computed1.vue​

​

<template>
  <div>
    {{ fullName }}

    <div>firstName: <input v-model="firstName" /></div>
    <div>lastName: <input v-model="lastName" /></div>
  </div>
</template>
<script>export default {
  data: function() {
    return {
      firstName: "Foo",
      lastName: "Bar"
    };
  },
  computed: {
    fullName: function() {
      return this.firstName + " " + this.lastName;
    }
  },
  watch: {
    fullName: function(val,) {
      console.log("new: %s, old: %s", val, oldVal);
    }
  }
};</script>      

<template>
  <div>
    {{ fullName }}

    <div>firstName: <input v-model="firstName" /></div>
    <div>lastName: <input v-model="lastName" /></div>
  </div>
</template>
<script>export default {
  data: function() {
    return {
      firstName: "Foo",
      lastName: "Bar",
      fullName: "Foo Bar"
    };
  },
  watch: {
    firstName: function(val) {
      this.fullName = val + " " + this.lastName;
    },
    lastName: function(val) {
      this.fullName = this.firstName + " " + val;
    }
  }
};</script>