Quelles sont les différences entre les propriétés calculées de vue et les montres ?

Différences : 1. Les attributs calculés doivent être rendus dans le modèle lors de l'appel, et les métadonnées dont dépend le calcul sont modifiées ; watch n'a besoin de modifier les métadonnées que lorsqu'elle est appelée. 2. Les attributs calculés sont par défaut une dépendance profonde et les montres sont par défaut une observation superficielle. 3. Les attributs calculés conviennent au filtrage et ne peuvent pas être asynchrones ; la surveillance convient aux opérations asynchrones ou coûteuses.

calculé

calculé est une propriété calculée, elle sera calculée en fonction de les données sur lesquelles vous comptez Afficher dynamiquement les nouveaux résultats de calcul

Les propriétés calculées seront ajoutées à l'instance Vue. Le contexte this de tous les getters et setters est automatiquement lié à l'instance Vue

via les propriétés calculées sans appeler et peut être utilisé directement dans le DOM

Exemple de base

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  },
  template: `
  <div>
  <p>我是原始值: "{{ message }}"</p>
  <p>我是计算属性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要调用
  </div>
  `,
  computed: {
    // 计算属性的 getter
    computedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

Résultat :

Je suis la valeur d'origine : "Bonjour"
Je suis la valeur de l'attribut calculé : "olleH"

Si vous n'utilisez pas de propriétés calculées, alors message.split('').reverse().join('') sera écrit directement dans le modèle. Ensuite, mettre trop de logique déclarative dans le modèle. rendra le modèle lui-même en surpoids, en particulier lorsqu'un grand nombre d'expressions logiques complexes sont utilisées pour traiter les données dans la page, aura un grand impact sur la maintenabilité de la page

et si l'attribut calculé Si la dépendance reste inchangée, elle deviendra un cache, et la valeur calculée ne sera pas recalculée

Donc, si les données doivent être obtenues par une logique complexe, alors elles Il est recommandé d'utiliser des attributs calculés

watch

Un objet, la clé est la donnée correspondant aux données et la valeur est la fonction de rappel correspondante. La valeur peut également être un nom de méthode ou un objet contenant des options. Lorsque les données changent, un rappel se produit, un val (données modifiées) et un oldVal (données originales) L'instance Vue appellera
une fois instanciée, traversant chaque propriété de l'objet watch$watch()

Exemple de base

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `
    <div>
      <button @click="n += 1">n+1</button>
      <button @click="obj.a += &#39;hi&#39;">obj.a + 'hi'</button>
      <button @click="obj = {a:&#39;a&#39;}">obj = 新对象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 变了");
    },
    obj:{
      handler: function (val, oldVal) { 
      console.log("obj 变了")
    },
      deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深
    },
    "obj.a":{
      handler: function (val, oldVal) { 
      console.log("obj.a 变了")
    },
      immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
    }
  }
}).$mount("#app");

Remarque :

La fonction flèche ne doit pas être utilisé pour définir la fonction watcher , car la fonction flèche n'a pas ceci, et son this héritera de sa fonction parent, mais sa fonction parent est window, ce qui fait que this de la fonction flèche pointe vers window, pas Vue Instance

• contrôle en profondeur s'il faut voir les modifications de propriété dans cet objet
• contrôle immédiatement s'il faut exécuter cette fonction dans le premier rendu

vm.$watch() est similaire au rappel de la montre

vm.$watch('data attribut name', fn, { profond : .., immédiat : ..})

vm.$watch("n", function(val, newVal){
      console.log("n 变了");
},{deep: true, immediate: true})

La différence entre les propriétés calculées de la vue et la montre

Propriété calculée (calculée)

计算属性 vs 属性检测

计算属性（computed）	属性检测（watch）
首次运行	首次不运行
调用时需要在模板中渲染，修改计算所依赖元数据	调用时只需修改元数据
默认深度依赖	默认浅度观测
适合做筛选，不可异步	适合做执行异步或开销较大的操作

Détection d'attribut ( montre)

Courir pour la première fois

Ne pas courir pour la première fois

Vous devez effectuer le rendu dans le modèle lors de l'appel et modifier les métadonnées dont dépend le calcul

Vous devez uniquement modifier les métadonnées lors de l'appel de

Dépendance profonde par défaut

Observation de degré peu profond par défaut

Convient au filtrage, non asynchrone td>

Convient aux opérations asynchrones ou coûteuses

Si une donnée doit subir des calculs complexes , utilisez calculé

Si a Si les données doivent être surveillées et certaines opérations effectuées sur les données, utilisez watch

Recommandations associées :

Un résumé des questions d'entretien Vue frontale en 2020 (avec réponses)

Recommandation du didacticiel Vue : les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!