Vueの計算された例と時計の例の違い

computed例

<template>
  <div class="box">
    <input type="text" v-model="keyCode" placeholder="筛选" />
    <ul>
      <li v-for="(item, index) in filterCode" :key="index">{
   
   { item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
     
     
  data() {
     
     
    return {
     
     
      keyCode: "",
      list: ["apple", "huawei", "sony", "oppo", "vivo"],
    };
  },
  computed: {
     
     
    filterCode() {
     
     
      var arr = [];
      for (let i in this.list) {
     
     
        if (this.list[i].indexOf(this.keyCode) != -1) {
     
     
          arr.push(this.list[i]);
        }
      }
      return arr;
    },
  },
};
</script>

watch例

<template>
  <div class="box">
    <input type="text" v-model="firstName" placeholder="姓" />
    <input type="text" v-model="lastName" placeholder="名" />
    {
   
   { fullName }}
  </div>
</template>

<script>
export default {
     
     
  data() {
     
     
    return {
     
     
      firstName: "",
      lastName: "",
      fullName: "",
    };
  },
  watch: {
     
     
    firstName(value) {
     
     
      this.fullName = `${
       
       value}${
       
       this.lastName}`;
    },
    lastName(value) {
     
     
      this.fullName = `${
       
       this.firstName}${
       
       value}`;
    },
  },
};
</script>

computed

1. データキャッシュに依存し、データが変更されたときにのみ実行します
2. 非同期はサポートされていません。計算に非同期操作がある場合は無効であり、データの変更を監視することはできません。
3. データ関数で変数を定義する必要はありません

watch

1. データ変更の非同期操作をサポート
2. 2つのパラメーターを受け取ります。最初のパラメーターは最新の値で、2番目のパラメーターは入力前の値です。
3. 監視データは、データで宣言されているか、親コンポーネントによって渡された小道具のデータである必要があります
4. 大きなパフォーマンスオーバーヘッドが発生する