Kenali pengiraan dan tonton dalam Vue dan bincangkan tentang perbezaan mereka

Artikel ini akan memperkenalkan anda kepada pengiraan dan menonton dalam Vue, dan memperkenalkan perbezaan antara pengiraan dan jam tangan saya harap ia akan membantu semua orang.

1 dikira

1 Tujuan: Atribut yang dikira ialah atribut yang dikira

2. Faedah atribut yang dikira: Ia boleh menukar beberapa atribut yang dikira berdasarkan atribut lain kepada satu atribut

dikira mempunyai cache kebergantungan, jika kebergantungan dikira Jika atribut tidak perubahan, dikira tidak akan dikira semula. Jika sekeping data bergantung pada data lain, maka reka bentuk data untuk dikira. [Cadangan berkaitan: "Tutorial vue.js"]

Contoh (paparan nama pengguna):

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. Jika sifat bergantung tidak berubah, ia tidak akan dikira semulaCache tidak akan dilakukan secara lalai, Vue telah melakukan pemprosesan khasgetter/setter

Bagaimana untuk cache? Anda boleh merujuk kepada contoh berikut:

2. menonton (mendengar/mendengar)

1 Tujuan : Apabila data berubah, jalankan fungsi, jam tangan ialah pelaksanaan sempurna sejarah Fungsi (kaedah) fungsi

Contoh (buat asal):

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

Ditambah

, tontonimmediate: true

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

Sintaks 1:

Fungsi luar bagi fungsi anak panah di atas ialah skop global, dan ini dalam skop global ialah tetingkap objek global/global, jadi anda tidak boleh mendapatkan this.n/this.xxx di sini, jadi fungsi anak panah tidak boleh digunakan dalam jam tangan

Sintaks 2:

Sebab untuk menambah $ di hadapan jam tangan adalah untuk mengelakkan pertindihan dengan nama data yang dipanggil jam tangan

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

2. Apakah yang dilakukan oleh

?

deep:trueJika

telah berubah, adakah

dikira sebagai perubahan? Jika jawapan yang anda perlukan adalah [telah berubah], gunakan object.a Jika jawapan yang anda perlukan adalah [belum berubah], gunakan objectdeep:truedeep:false

Maksudnya jangan melihat ke dalam, tetapi untuk melihat secara mendalam ,

bermaksud melihat dengan mendalam, lalainya ialah deep (hanya lihat pada alamat permukaan). truefalse bukan sahaja perlu membandingkan alamat

, tetapi juga perlu membandingkan jika ada data di dalamnya berubah, ia akan dianggap sebagai

telah berubah. objobj3. Ringkasan

: Ini bermakna atribut yang dikira
• computed
: Ini bermakna pemantauan
• watch
Menyokong tak segerak kod tetapi
• tidak berfungsi watchcomputed

Nilai ini tidak perlu dimasukkan ke dalam kurungan apabila dipanggil Ia akan dicache secara automatik berdasarkan kebergantungan Maksudnya, jika kebergantungan kekal tidak berubah , ini

Nilai tidak akan dikira semula. computedcomputed

Ia mempunyai dua pilihan, yang pertama ialah

, yang bermaksud bahawa fungsi ini harus diberikan pada kali pertama ia dilaksanakan; yang lain ialah watch, yang bermaksud jika kita mahu mendengar kepada objek , adakah anda mahu melihat perubahan dalam atribut di dalamnya? immediatedeep

Jika data bergantung pada data lain, maka reka data ini sebagai
• ;

  computed

Jika anda perlu menukar data apabila data tertentu Apabila melakukan sesuatu, gunakan
• untuk memerhati perubahan dalam data ini.

  watch

Di atas ialah perbezaan antara

dan

. computedwatchUntuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Pengenalan kepada Pengaturcaraan

! !

Atas ialah kandungan terperinci Kenali pengiraan dan tonton dalam Vue dan bincangkan tentang perbezaan mereka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!