La diferencia entre los ejemplos calculados y de reloj en Vue

computedEjemplo

<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>

watchEjemplo

<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. Confíe en la caché de datos, solo ejecute cuando los datos cambien
2. No se admite el sistema asíncrono. No es válido cuando hay operaciones asíncronas en el calculado y es imposible monitorear los cambios de datos.
3. No es necesario definir variables en la función de datos

watch

1. Admite la operación asincrónica de cambios de datos
2. Reciba dos parámetros, el primer parámetro es el último valor; el segundo parámetro es el valor antes de la entrada
3. Los datos de seguimiento deben ser los datos de los accesorios declarados en los datos o pasados ​​por el componente principal
4. Incurrir en una gran sobrecarga de rendimiento