Apprenez à connaître les calculs et regardez dans Vue et parlez de leurs différences-Voir.js-php.cn

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

青灯夜游

Libérer： 2021-12-07 19:20:50

avant

1914 Les gens l'ont consulté

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.

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

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&#39;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");

Copier après la connexion

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");

Copier après la connexion

加了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");

Copier après la connexion

语法1:

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

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

语法2:

vm.$watch(&#39;xxx&#39;,fn,{deep:...,immediate:...})

Copier après la connexion

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é. 🎜