Ralat Vue: Atribut yang dikira tidak boleh digunakan dengan betul, bagaimana untuk menyelesaikannya?

Ralat Vue: Atribut yang dikira tidak boleh digunakan dengan betul, bagaimana untuk menyelesaikannya?

Dalam pembangunan Vue, atribut yang dikira ialah ciri yang sangat biasa digunakan. Ia membolehkan kami mengisytiharkan sifat yang dikira dalam contoh Vue, dan apabila data bergantung berubah, nilai harta yang dikira akan dikemas kini secara automatik. Walau bagaimanapun, kadangkala kami mungkin menghadapi beberapa masalah dan tidak boleh menggunakan atribut yang dikira dengan betul Artikel ini akan memperkenalkan masalah biasa dan penyelesaian yang sepadan.

Masalah 1: Atribut yang dikira tidak dikemas kini dengan betul

Apabila kami mengisytiharkan atribut yang dikira, Vue akan mendengar secara automatik kebergantungan yang berkaitan Apabila kebergantungan berubah, ia akan mengira semula dan mengemas kini nilai atribut yang dikira. Tetapi kadangkala, atribut yang dikira tidak dikemas kini dengan betul, yang mungkin disebabkan oleh sebab berikut:

1. Kebergantungan tidak diisytiharkan dengan betul: Pastikan kebergantungan yang betul digunakan dalam fungsi atribut yang dikira jika kebergantungan tidak diisytiharkan, Vue tidak akan dapat mengesan perubahan.
2. Masalah dengan data jenis rujukan: Jika atribut yang dikira bergantung pada data jenis rujukan (seperti objek atau tatasusunan), dan nilai jenis rujukan ini tidak diubah suai, atribut yang dikira tidak boleh dikemas kini dengan betul. Kerana Vue memantau perubahan rujukan, bukan perubahan harta dalaman.

Berikut ialah contoh kod yang menunjukkan sebab mengapa harta yang dikira tidak dikemas kini dengan betul dan penyelesaiannya:

// 定义一个Vue实例
var vm = new Vue({
  data: {
    list: [1, 2, 3]
  },
  computed: {
    sum: function() {
      console.log('computed属性被计算了');
      return this.list.reduce(function(total, num) {
        return total + num;
      }, 0);
    }
  }
});

vm.sum; // 输出：6

// 问题一：computed属性没有正确更新
vm.list.push(4);
vm.sum; // 输出：6，预期输出：10

// 解决办法一：使用Vue.set()方法添加元素
vm.list.push(4);
Vue.set(vm.list, vm.list.length, 5);
vm.sum; // 输出：15，问题解决

Masalah 2: Sifat yang dikira melaporkan ralat "TypeError: Tidak dapat membaca sifat 'xxx' yang tidak ditentukan"

Apabila kita berada dalam harta yang dikira Apabila mengakses sifat sesuatu objek, kadangkala anda akan menerima mesej ralat yang serupa dengan ralat di atas. Ini mungkin kerana data yang bergantung pada harta yang dikira belum ditentukan, menyebabkan harta tersebut tidak boleh dibaca.

Cara untuk menyelesaikan masalah ini adalah dengan memastikan data bergantung telah ditakrifkan dengan betul. Anda boleh menggunakan arahan seperti v-if atau v-show dalam atribut yang dikira untuk menilai data bergantung Pengiraan hanya akan dilakukan apabila syarat dipenuhi untuk mengelakkan situasi yang tidak ditentukan.

// 定义一个Vue实例
var vm = new Vue({
  data: {
    user: undefined
  },
  computed: {
    greeting: function() {
      if (this.user) {
        return 'Hello, ' + this.user.name;
      } else {
        return 'Welcome!';
      }
    }
  },
  methods: {
    getUserData: function() {
      // 模拟异步获取用户数据
      setTimeout(function() {
        vm.user = {
          name: 'Tom'
        };
      }, 1000);
    }
  }
});

vm.greeting; // 输出：'Welcome!'
vm.getUserData();
setTimeout(function() {
  vm.greeting; // 输出：'Hello, Tom'，问题解决
}, 2000);

Melalui contoh kod dua soalan di atas, kita boleh lebih memahami dan menyelesaikan masalah yang mungkin dihadapi apabila menggunakan atribut yang dikira. Dalam perkembangan sebenar, apabila masalah dihadapi, ia boleh disiasat dan diselesaikan melalui idea di atas untuk meningkatkan kebolehbacaan dan keteguhan kod. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Ralat Vue: Atribut yang dikira tidak boleh digunakan dengan betul, bagaimana untuk menyelesaikannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!