Apprenez à connaître les calculs et regardez dans Vue et parlez de leurs différences

Cet article vous présentera calculé et regardé dans Vue, et présentera la différence entre calculé et regardé. J'espère qu'il vous sera utile.

1. calculé

1. Objectif : Les attributs calculés sont des attributs calculés

2 Les avantages des attributs calculés : Il peut transformer certains attributs calculés en fonction d'autres attributs en un attribut

calculé. a un cache de dépendances Si l'attribut de dépendance de calculé ne change pas, alors calculé ne sera pas recalculé. Si une donnée dépend d’autres données, concevez les données à calculer. [Recommandations associées : "tutoriel vue.js"]

Exemple (affichage du nom d'utilisateur) :

Vue.config.productionTip = false;

new Vue({
  data: {
    user: {
      email: "jade@qq.com",
      nickname: "jade",
      phone: "18810661088"
    }
  },
  computed: {
    displayName: {
      get() {
        const user = this.user;
        return user.nickname || user.email || user.phone;
      },
      set(value) {
        console.log(value);
        this.user.nickname = value;
      }
    }
  },
  // DRY don't repeat yourself
  // 不如用 computed 来计算 displayName
  template: `
    <div>
      {{displayName}}
      <div>
      {{displayName}}
      <button @click="add">set</button>
      </div>
    </div>
  `,
  methods: {
    add() {
      console.log("add");
      this.displayName = "圆圆";
    }
  }
}).$mount("#app");

3. Si les propriétés dépendantes ne changent pas, getter/setter ne sera pas recalculé et ne sera pas mis en cache par défaut. Vue a effectué un traitement spécialgetter/setter默认不会做缓存，Vue做了特殊处理

如何缓存？可以参考以下示例：

二、watch(监听/侦听）

1、用途：当数据变化时，执行一个函数，watch是完美实现历史功能的一个函数（方法）

示例（撤销）：

import Vue from "vue/dist/vue.js";

Vue.config.productionTip = false;

new Vue({
  data: {
    n: 0,
    history: [],
    inUndoMode: false
  },
  watch: {
    n: function(newValue, oldValue) {
      console.log(this.inUndoMode);
      if (!this.inUndoMode) {
        this.history.push({ from: oldValue, to: newValue });
      }
    }
  },
  // 不如用 computed 来计算 displayName
  template: `
    <div>
      {{n}}
      <hr />
      <button @click="add1">+1</button>
      <button @click="add2">+2</button>
      <button @click="minus1">-1</button>
      <button @click="minus2">-2</button>
      <hr/>
      <button @click="undo">撤销</button>
      <hr/>

      {{history}}
    </div>
  `,
  methods: {
    add1() {
      this.n += 1;
    },
    add2() {
      this.n += 2;
    },
    minus1() {
      this.n -= 1;
    },
    minus2() {
      this.n -= 2;
    },
    undo() {
      const last = this.history.pop();
      this.inUndoMode = true;
      console.log("ha" + this.inUndoMode);
      const old = last.from;
      this.n = old; // watch n 的函数会异步调用
      this.$nextTick(() => {
        this.inUndoMode = false;
      });
    }
  }
}).$mount("#app");

加了immediate: true ，一次渲染的时候会触发watch

Vue.config.productionTip = false;

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 + &#39;hi&#39;</button>
      <button @click="obj = {a:&#39;a&#39;}">obj = 新对象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 变了");
    },
    obj:{
      handler(){
        console.log("obj 变了");
      },
      deep:true
    },
    "obj.a": function() {
      console.log("obj.a 变了");
    }
  }
}).$mount("#app");

• 语法1:

上面箭头函数的外层的函数是全局作用域，全局作用域的this就是全局对象window/global,所以你无法在这里获取this.n/this.xxx,所以，watch里面是绝对不能使用箭头函数的

• 语法2:

vm.$watch('xxx',fn,{deep:...,immediate:...})

watch前面加$这样的写法是为了避免和一个叫watch的data名重复

2、deep:true是干什么的？

如果object.a变了，请问object算不算也变了 如果需要答案是【也变了】，就用deep:true如果需要答案是【没有变】，就用deep:false

deep就是往不往里面去看，去深入的看，true就是深入进入看，默认是false(只看表层的地址）。

不光要比较obj的地址，而且要比较里面任何一个数据变了，都要认为是obj变了。

三、总结

• computed:就是计算属性的意思
• watch:就是监听的意思
• watch 支持异步代码而computed不行

computed这个值在调用的时候，不需要加括号，它会根据依赖自动缓存，就是说如果依赖不变，这个computed的值就不会重新再计算。

watch它有两个选项，第一个是immediate,表示在第一次执行时要渲染这个函数；另一个是deep,意思是如果我们要监听一个对象，是否要看它里面属性的变化。

• 如果一个数据依赖于其他数据，那么把这个数据设计为computed;

• 如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据的变化。

以上，就是computed和watchComment mettre en cache ? Vous pouvez vous référer aux exemples suivants :

2. watch (écouter/écouter)

1. Objectif

: Lorsque les données changent, exécuter une fonction, watch est le parfait implémentation de fonctions historiques Une fonction (méthode)🎜🎜🎜Exemple (annuler)🎜:🎜rrreee🎜Ajout immédiat : vrai, la montre se déclenchera lors d'un rendu🎜rrreee

• Syntaxe 1 :

🎜🎜🎜La fonction externe de la fonction flèche ci-dessus est la portée globale, et ceci dans la portée globale est l'objet global window/global, vous ne pouvez donc pas obtenir this.n/this.xxx ici, donc la montre est absolument que les fonctions fléchées ne peuvent pas être utilisées🎜

• Syntaxe 2 :

rrreee🎜Watch est précédé de $ pour éviter la duplication avec un nom de données appelé watch🎜🎜2, Qu'est-ce que deep:true faire ? 🎜🎜Si object.a change, object compte-t-il comme modifié ? Si la réponse dont vous avez besoin est [a changé], utilisez deep:true Si la réponse dont vous avez besoin est [n'a pas changé], utilisez deep:false🎜🎜 deep signifie ne pas regarder à l'intérieur, mais regarder en profondeur. <code>true signifie regarder en profondeur. La valeur par défaut est false (seule l'adresse de surface est regardée). 🎜🎜Non seulement nous devons comparer l'adresse de obj, mais aussi si des données qu'il contient changent, elles seront considérées comme obj ayant changé. 🎜

3. Résumé🎜

• calculé : cela signifie les attributs calculés
• surveiller
code> : signifie que la surveillance
• watch prend en charge le code asynchrone mais que calculé ne le fait pas

🎜calculé li> Lorsque la valeur code> est appelée, il n'est pas nécessaire d'ajouter des parenthèses. Elle sera automatiquement mise en cache en fonction des dépendances. C'est-à-dire que si les dépendances restent inchangées, la valeur de ce <code>calculée. ne sera pas recalculé. 🎜🎜watchIl a deux options, la première est immediate, ce qui signifie que cette fonction doit être rendue la première fois qu'elle est exécutée ; l'autre est deep code>, ce qui signifie que si nous voulons surveiller un objet, voulons-nous voir les changements dans ses propriétés ? 🎜<ul style="list-style-type: disc;"> <li>🎜Si une donnée dépend d'autres données, concevez les données comme <code>calculées;🎜

🎜Si vous devez faire quelque chose lorsqu'une certaine donnée change, utilisez watch pour observer les changements dans les données. 🎜

🎜Ce qui précède est la différence entre calculé et montre. 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Introduction à 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!