Cara memanggil kaedah harta terkira dalam vue

Dalam Vue, harta yang dikira ialah harta khas yang boleh mengira nilai hartanah baharu berdasarkan nilai harta sedia ada. Dalam pembangunan, kami biasanya mentakrifkan beberapa sifat yang perlu dikira sebagai sifat yang dikira supaya ia boleh digunakan secara langsung dalam templat, mengelakkan pengiraan logik yang kerap dalam kod JS.

Namun, kadangkala kita perlu memanggil kaedah harta yang dikira (bukan mengambil nilainya) dalam komponen Vue. Dalam artikel ini, kami akan memperkenalkan beberapa kaedah untuk mencapai keperluan ini.

Panggil terus sifat yang dikira

Sifat yang dikira dalam komponen Vue boleh diakses seperti sifat biasa, jadi kami boleh mengakses sifat yang dikira secara terus melalui this.计算属性名 untuk menggunakan kaedahnya. Contohnya:

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
},
methods: {
  greet() {
    console.log('Hello, ' + this.fullName);
  }
}

Dalam kod di atas, kami mentakrifkan fullName atribut yang dikira dan menggunakan atribut yang dikira ini terus dalam kaedah greet untuk mencetak rentetan "Helo, nama belakang nama pertama ".

Kaedah ini sangat mudah, tetapi perlu diingat bahawa kaedah yang sepadan dengan atribut yang dikira tidak akan dilaksanakan secara automatik apabila data berubah, dan ia perlu dipanggil secara manual untuk mendapatkan hasil pengiraan terkini.

Menggunakan pengambil harta yang dikira

Selain memanggil terus sifat yang dikira itu sendiri, anda juga boleh menggunakan fungsi getter harta yang dikira. Fungsi getter atribut yang dikira akan dipanggil secara automatik apabila atribut itu diakses Oleh itu, jika kita merangkum logik atribut yang dikira dalam fungsi getter, kita boleh memanggil fungsi tersebut di mana diperlukan untuk mendapatkan hasil pengiraan. Contohnya:

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    }
  }
},
methods: {
  greet() {
    console.log('Hello, ' + this.fullName);
    // 调用计算属性的getter函数
    console.log('Hello, ' + this.fullName.get());
  }
}

Dalam kod di atas, kami menggunakan fungsi pengambil atribut yang dikira untuk mendapatkan hasil pengiraan, yang diakses melalui this.fullName.get(). Walaupun kaedah ini memerlukan lebih banyak kod daripada memanggil sifat yang dikira secara terus, kaedah ini dapat memastikan hasil pengiraan terkini boleh diperolehi setiap kali this.fullName.get() dipanggil.

Gunakan jam tangan untuk memantau sifat yang dikira

Selain menggunakan fungsi getter, anda juga boleh menggunakan fungsi watch yang disediakan oleh Vue untuk memantau perubahan dalam sifat yang dikira, supaya apabila perubahan nilai harta yang dikira melaksanakan operasi yang sepadan. Kaedah ini memerlukan mentakrifkan fungsi mendengar dengan nama yang sama dengan atribut yang dikira dalam watch dan menghantar nilai atribut yang dikira sebagai parameter. Contohnya:

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
},
watch: {
  fullName(newVal, oldVal) {
    console.log('计算属性值从', oldVal, '变为', newVal);
  }
},
methods: {
  greet() {
    console.log('Hello, ' + this.fullName);
  }
}

Dalam kod di atas, kami mentakrifkan watch fungsi mendengar dengan nama yang sama dengan atribut yang dikira untuk memantau perubahan dalam nilai atribut yang dikira. Apabila nilai harta yang dikira berubah, fungsi ini akan dilaksanakan, supaya operasi yang sepadan boleh dilakukan dalam fungsi tersebut.

Perlu diambil perhatian bahawa nilai baharu dan nilai lama atribut yang dikira boleh diperolehi dalam fungsi pendengaran watch, tetapi jangan ubah suai nilai atribut yang dikira dalam fungsi pendengaran, jika tidak, ia akan menyebabkan gelung tak terhingga.

Ringkasan

Di atas memperkenalkan tiga kaedah pelaksanaan Dalam penggunaan sebenar, anda boleh memilih kaedah yang berbeza mengikut senario tertentu. Jika anda hanya ingin mendapatkan nilai atribut yang dikira, anda boleh terus memanggil atribut yang dikira itu sendiri jika anda perlu mendapatkan nilai atribut yang dikira beberapa kali dalam kaedah yang berbeza, adalah disyorkan untuk menggunakan fungsi getter daripada atribut yang dikira; jika anda perlu menukar nilai atribut yang dikira apabila Untuk melaksanakan beberapa operasi tambahan, anda boleh menggunakan watch untuk mendengar sifat yang dikira.

Secara amnya, apabila menggunakan atribut terhitung, ia harus dianggap sebagai atribut biasa, tetapi nilai atribut terhitung perlu dikira berdasarkan atribut sedia ada. Jika anda perlu menggunakan kaedah pengiraan sifat dalam komponen, anda boleh melakukannya melalui tiga kaedah di atas Anda boleh memilih kaedah yang paling sesuai mengikut senario tertentu.

Atas ialah kandungan terperinci Cara memanggil kaedah harta terkira dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!