Quel est l'intérêt des propriétés de classe codées en dur dans l'API Vue Options ?

Question

Est-il utile de définir des propriétés telles que var_B lors de l'utilisation de l'API Vue Options ? Ils ne sont pas accessibles lors de la définition de méthodes ou dans les balises de modèle. Je sais que je peux définir des variables dans data() à ces fins, mais j'aimerais savoir pourquoi Vue autorise cela et s'il existe des cas d'utilisation réels

<script>
export default {
  var_B: 10, // WHY DEFINE PROPERTIES HERE AT ALL?
  data() {
    return {
      var_A: 9, 
    };
  },
  methods: {
    double() {
      this.var_A = this.var_A * var_B;
      // causes 9 x undefined  = NaN
    },
  },
};
</script>

<template lang="">
  <div>Variable A: {{ var_A }}</div> <!-- 9 -->
  <div>Variable B: {{ var_B }}</div> <!-- undefined -->
  <button @click="double">Try to Double var_A</button>
</template>

J'ai essayé d'utiliser des attributs de classe codés en dur dans les balises de modèle et les méthodes internes, mais aucun n'a fonctionné

Answer 1

data() 是一个响应式对象。 Vue 正在监视它的更改，并且如果 data() 返回的对象中声明的任何值发生更改，Vue 将更新使用它的所有位置（计算） >、方法, modèle).

Tout ce qui est placé sous Déclarer des propriétés personnalisées sur l'export de base de Vue (dans l'exemple var_b）无效。应用程序不会出错，但您在 this. (ou dans le modèle)) ne sera pas disponible

.

Si vous souhaitez lire une constante simple lors de la résolution du composant et que vous ne vous souciez pas du fait que Vue l'observe pour détecter les changements, mettez-la à la racine de  :

const b = 10
export default {
  data: () => ({
    a: 5
  }),
  computed: {
    c() { return this.a * b }
  }
}

Chaque fois que vous modifiez la valeur actuelle de a 时，c 都会自动成为 this.a * b.