Gunakan menyediakan dan menyuntik dalam Vue untuk melaksanakan pemindahan data dan pengoptimuman prestasi antara komponen

Vue menggunakan menyediakan dan menyuntik untuk mencapai pemindahan data dan pengoptimuman prestasi antara komponen

Dalam Vue, pemindahan data antara komponen adalah keperluan yang sangat biasa. Kadangkala kami ingin menyediakan data pada nod dalam pepohon komponen dan kemudian menggunakan data dalam komponen turunannya Dalam kes ini, kami boleh menggunakan penyediaan dan suntikan Vue untuk mencapai ini. Selain pemindahan data, menyediakan dan menyuntik juga boleh digunakan untuk pengoptimuman prestasi, mengurangkan tahap pemindahan prop dan meningkatkan prestasi komponen.

menyediakan dan menyuntik ialah ciri lanjutan Vue yang boleh menyuntik data ke dalam kejadian komponen, menjadikannya tersedia di seluruh pepohon komponen. Penggunaannya sangat mudah, mari kita lihat contoh dahulu:

// 父组件
export default {
  provide: {
    message: 'Hello from parent'
  }
}

// 子组件
export default {
  inject: ['message'],
  mounted() {
    console.log(this.message); // 输出：Hello from parent
  }
}

Dalam komponen induk, kami menyediakan data mesej melalui pilihan sediakan, dan kemudian menyuntik data ini melalui pilihan suntikan dalam komponen anak. Data yang disediakan oleh komponen induk boleh diakses melalui ini.mesej dalam komponen anak.

Selain menyediakan satu data, kami juga boleh menyediakan objek yang mengandungi berbilang data. Dalam pilihan menyediakan, kita boleh menggunakan fungsi untuk mengembalikan objek, supaya data boleh disediakan secara dinamik.

// 父组件
export default {
  provide() {
    return {
      message: 'Hello from parent',
      count: 1
    }
  }
}

Dalam komponen kanak-kanak, suntik objek ini melalui pilihan suntikan, dan anda boleh terus mengakses data di dalamnya.

// 子组件
export default {
  inject: ['message', 'count'],
  mounted() {
    console.log(this.message); // 输出：Hello from parent
    console.log(this.count);   // 输出：1
  }
}

Salah satu faedah menggunakan provide and inject ialah pemindahan data antara komponen lebih ringkas dan mengurangkan hierarki props. Terutama apabila menghantar data merentasi komponen tahap, kaedah prop nampaknya sangat menyusahkan. Menggunakan menyediakan dan menyuntik boleh mengurangkan lebihan kod dan meningkatkan kecekapan pembangunan.

Faedah lain ialah peningkatan prestasi komponen. Apabila menggunakan prop untuk pemindahan data, setiap lapisan komponen perlu menggunakan prop untuk memindahkan data, dan prop adalah sehala dan hanya boleh dipindahkan daripada komponen peringkat atas ke komponen peringkat bawah. Menggunakan menyediakan dan menyuntik boleh melangkau komponen perantaraan dan menghantar data terus kepada komponen yang diperlukan.

Contoh berikut boleh menggambarkan masalah ini dengan lebih baik:

// 父组件
export default {
  data() {
    return {
      count: 1
    }
  },
  provide() {
    return {
      message: 'Hello from parent',
      getCount: () => this.count
    }
  }
}

// 子组件A
export default {
  inject: ['message', 'getCount'],
  mounted() {
    console.log(this.message);   // 输出：Hello from parent
    console.log(this.getCount()); // 输出：1
  }
}

// 子组件B
export default {
  inject: ['message', 'getCount'],
  mounted() {
    console.log(this.message);   // 输出：Hello from parent
    console.log(this.getCount()); // 输出：1
  }
}

// 子组件C
export default {
  inject: ['message', 'getCount'],
  mounted() {
    console.log(this.message);   // 输出：Hello from parent
    console.log(this.getCount()); // 输出：1
  }
}

Dalam contoh ini, komponen induk menyediakan data dan kaedah, yang kemudiannya disuntik ke dalam komponen anak A, komponen anak B dan komponen anak C melalui pilihan sediakan. Kita dapat melihat bahawa tanpa mengira tahap komponen anak, data dan kaedah komponen induk boleh diakses secara terus.

Untuk meringkaskan, penyediaan dan suntikan Vue ialah cara yang sangat mudah untuk memindahkan data antara komponen, yang bukan sahaja memudahkan kod, tetapi juga meningkatkan prestasi. Tetapi perlu diingatkan bahawa menyediakan dan menyuntik adalah ciri tidak responsif, iaitu, apabila data yang disediakan oleh menyediakan berubah, pemaparan semula sub-komponen tidak akan dicetuskan. Oleh itu, apabila menggunakan menyediakan dan menyuntik, anda perlu memberi perhatian kepada isu kemas kini data.

Di atas adalah pengenalan untuk menggunakan menyediakan dan menyuntik dalam Vue untuk mencapai pemindahan data dan pengoptimuman prestasi antara komponen.

Atas ialah kandungan terperinci Gunakan menyediakan dan menyuntik dalam Vue untuk melaksanakan pemindahan data dan pengoptimuman prestasi antara komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!