1. Atributo calculado calculado

1.1 ¿Qué es una propiedad computada?

computedSí , según los cálculos realizados , sólo cuando vuesucede .计算属性依赖关系缓存相关依赖改变更新

<template>
  <div id="example">
    <p>Original message: "{
   
   { message }}"</p>
    <p>Computed reversed message: "{
   
   { reversedMessage }}"</p>
  </div>
</template>

<script>
export default {
      
      
  name: "CT",
  data() {
      
      
    return {
      
      
      message: "Hello",
    };
  },
  computed: {
      
      
    // 计算属性的 getter
    reversedMessage: function () {
      
      
      // `this` 指向 vm 实例
      return this.message.split("").reverse().join("");
    },
  },
};
</script>

propertyLas propiedades calculadas se pueden enlazar en plantillas como de costumbre . VueSabe vm.reversedMessageque depende de vm.message, por lo que cuando vm.messagese producen cambios, todos vm.reversedMessagelos enlaces que dependen de también se actualizan. Y la mejor parte es que hemos 声明creado esto de una manera : no hay funciones 依赖关系para las propiedades calculadas , lo que hace que sea más fácil de probar y comprender.getter 副作用 (side effect)

1.2 computado usa la propiedad getter por defecto

vue组件El uso reversedMessagedel atributo in vuellamará automáticamente computedal siguiente reversedMessage方法.

1.3 Dependencia de respuesta calculada (caché)

computedCada propiedad calculada de estará activa 缓存, siempre que cambie la propiedad de la que depende la propiedad calculada, la propiedad calculada se volverá a ejecutar y la vista se actualizará. En el siguiente código, la propiedad calculada totaldepende de las dos propiedades ay se volverá a ejecutar bsiempre que una de sus propiedades cambie .total
computedLas propiedades calculadas se almacenan en caché y se usan dos veces en el código siguiente total, pero solo se muestran una vez en la consola compouted total .

<template>
  <div>
    <p>BT</p>
    <a @click="addA()">addA</a> | <a @click="addB()">addB</a>
    <p>total: {
   
   { total }}</p>
    <p>total: {
   
   { total }}</p>
  </div>
</template>

<script>
export default {
      
      
  name: "BT",
  data() {
      
      
    return {
      
      
      a: 1,
      b: 2,
    };
  },
  computed: {
      
      
    total() {
      
      
      console.log("compouted total ");
      return this.a + this.b;
    },
  },
  mounted() {
      
      },
  methods: {
      
      
    addA() {
      
      
      this.a++;
    },
    addB() {
      
      
      this.b++;
    },
  },
};
</script>

1.4 Getters y setters para propiedades calculadas

En Vue, computedel atributo se puede considerar igual dataque , que se puede leer y configurar, por lo que computedse puede dividir getter（读取）en y setter（设值）, en general, no hay setter, y computedel valor predeterminado es solo getter, es decir, solo 读取, no 改变设值.
Las propiedades calculadas de Vue.js solo tienen getter de forma predeterminada, porque es el valor predeterminado, por lo que a menudo lo omitimos, como en el siguiente código:

<div id="demo">{
   
   { fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

De hecho, el código completo en computado debe escribirse de la siguiente manera:

computed: {
    fullName: {
      get(){
         return this.firstName + ' ' + this.lastName
      }
    }
  }

establecedor de propiedades calculadas

computed: {
    
    
    fullName: {
    
    
      get(){
    
    
         return this.firstName + ' ' + this.lastName
      },
      set(newVal){
    
    
      	console.log(newVal)
      }
    }
 }

1.5 Resumen de propiedades calculadas

Los atributos computacionales computedescritos en no se datareescriben en , se pueden obtener o modificar datacomo los datos envm.
Siempre que se obtenga una propiedad calculada, se activará la getfunción correspondiente
Mientras el valor dependiente (debe tener settery getterdatos de respuesta) cambie, volverá a calcular su propio valor
computedCada propiedad calculada de estará activa 缓存, siempre que cambie la propiedad de la que depende la propiedad calculada, la propiedad calculada se volverá a ejecutar y la vista se actualizará.
Las propiedades calculadas deben tener geto noset
setNo reasigne la propiedad calculada en el , de lo contrario generará死循环
第一次El valor dependiente no ha cambiado cuando se obtiene, pero lo hará默认执行一次

dos, reloj

2.1 ¿Qué escena se usa para manejar el reloj?

vueSe watchusa para monitorear en 数据的变化, y algunas otras operaciones se pueden realizar una vez que ocurre un cambio.

<template>
  <div>
    <p>BT</p>
    <a @click="addA()">addA</a> | <a @click="addB()">addB</a>
    <p>a: {
   
   { a }}</p>
    <p>b: {
   
   { b }}</p>
  </div>
</template>

<script>
export default {
      
      
  name: "BT",
  data() {
      
      
    return {
      
      
      a: 1,
      b: 2,
    };
  },
  computed: {
      
      },
  watch: {
      
      
    a() {
      
      
      console.log('a watch');
    }
  },
  mounted() {
      
      },
  methods: {
      
      
    addA() {
      
      
      this.a++;
    },
    addB() {
      
      
      this.b++;
    },
  },
};
</script>

2.2 parámetros del reloj

watchEs decir, cuando 第一次绑定se establece el valor, la función de monitoreo no se ejecutará y solo se ejecutará cuando cambie el valor. Si necesita 第一次绑定ejecutar la función en cualquier momento, necesita usar immediateatributos. Por 父组件向子组件 动态传值ejemplo , cuando el componente secundario propsobtiene Nola cognición del componente principal por primera vez, también necesita ejecutar la función.
handlerMétodo: immediateIndica si se ejecutará cuando se vincula por primera vez en el reloj. handlerEl valor indica que el método se ejecutará inmediatamente cuando se declare trueen el reloj. Si el valor es el mismo que el uso general , será se ejecuta cuando se utilizan los datoswatchhandlerfalsewatch发生变化
deep, cuando es necesario monitorear un 对象cambio, los métodos ordinarios watchno pueden monitorear 对象内部属性el cambio, solo datalos datos en él pueden ser firmes al cambio. En este momento, deepel atributo debe configurarse 深度监听, configurarse deep: true,当对象的属性较多时，每个属性的变化都会执行handler

<template>
  <div>
    <p @click="click()">AT</p>
    <BT :age="age"></BT>
  </div>
</template>

<script>
import BT from "./BT.vue";

export default {
      
      
  name: "AT",
  components: {
      
       BT },
  data() {
      
      
    return {
      
      
      age: 10,
    };
  },
  methods: {
      
      
    click() {
      
      
      this.age = Math.floor(Math.random() * 20 + 18);
    },
  },
};
</script>

<template>
  <div>
    <p>BT</p>
    <a @click="nameChange()">nameChange</a> |
    <a @click="ageChange()">ageChange</a>
    <p>name: {
   
   { person.name }}</p>
    <p>age: {
   
   { person.age }}</p>
  </div>
</template>

<script>
export default {
      
      
  name: "BT",
  props: {
      
      
    age: {
      
      
      type: Number,
    },
  },
  data() {
      
      
    return {
      
      
      person: {
      
      
        name: "BT",
        age: 20,
      },
    };
  },
  computed: {
      
      },
  watch: {
      
      
    person: {
      
      
      handler(newVal, oldVal) {
      
      
        console.log("newVal: ", newVal, "oldVal: ", oldVal);
      },
      deep: true,
      immediate: true
    },
    age: {
      
      
      handler(newVal, oldVal) {
      
      
        console.log("newVal: ", newVal, "oldVal: ", oldVal);
      },
      immediate: true
    },
  },
  mounted() {
      
      },
  methods: {
      
      
    nameChange() {
      
      
      this.person.name = "BT" + new Date();
    },
    ageChange() {
      
      
      this.person.age = Math.floor(Math.random() * 20 + 18);
    },
  },
};
</script>

2.3 Objeto de escucha

watchPuede ser monitoreado 对象, o puede ser monitoreado en el objeto 某个属性. Tenga en cuenta que al escuchar un objeto, puede deepdecidir si usarlo o no configurando parámetros 深度监听.

<template>
  <div>
    <p>BT</p>
    <a @click="nameChange()">nameChange</a> |
    <a @click="ageChange()">ageChange</a>
    <p>name: {
   
   { person.name }}</p>
    <p>age: {
   
   { person.age }}</p>
  </div>
</template>

<script>
export default {
      
      
  name: "BT",
  data() {
      
      
    return {
      
      
      person: {
      
      
        name: "BT",
        age: 20,
      },
    };
  },
  computed: {
      
      },
  watch: {
      
      
    person: {
      
      
      handler(newVal, oldVal) {
      
      
        console.log("newVal: ", newVal, "oldVal: ", oldVal);
      },
      deep: true
    },
    "person.age": {
      
      
      handler(newVal, oldVal) {
      
      
        console.log("newVal: ", newVal, "oldVal: ", oldVal);
      },
    },
  },
  mounted() {
      
      },
  methods: {
      
      
    nameChange() {
      
      
      this.person.name = "BT" + new Date();
    },
    ageChange() {
      
      
      this.person.age = Math.floor(Math.random() * 20 + 18);
    },
  },
};
</script>

2.4 No use funciones de flecha

watchNo use funciones de flecha en , es decir, no use funciones de flecha para definir watcherfunciones. Debido a que el puntero en la función de flecha thisapunta al ámbito actual, para la función de flecha, el thispuntero en la función de flecha 定义时的对象no es 函数运行时el objeto donde se encuentra, es decir, windowel objeto en el momento de la definición global.

3. La diferencia entre reloj y computado

computeddebe gettener un valor de retorno ( return), pero watch returnopcional
computedSoporte 缓存, solo cuando los datos dependientes cambien, el cálculo se recalculará watchy el almacenamiento en caché no es compatible.Si los datos cambian, la operación correspondiente se activará directamente
computedSí 自定义名称, pero watchsolo atributos 监听 propscon datael mismo nombre que en el interior
computedAdecuado para operaciones complejas, pero watchadecuado para algunas funciones consumibles, comoAjax
computedNo compatible 异步, no es válido cuando computedhay operaciones asíncronas en él y no puede monitorear los cambios de datos, pero es watchcompatible异步
computedEl valor del atributo irá de forma predeterminada 缓存, y el atributo calculado se basa en sus dependencias de respuesta 缓存, es decir, el valor calculado se basa en los datos datadeclarados o pasados por el componente principal , y la función de escucha acepta dos parámetros, el primero es , la segunda es la entradaprops中watch最新的值之前的值
Si un atributo se calcula a partir de otros atributos, generalmente se usa este atributo 依赖其他属性, 多对一o , cuando un atributo cambia, se necesita realizar la operación correspondiente, generalmente se usa一对一computed一对多watch

Atributo calculado de Vuejs observado y atributo de escucha