Mengapakah data dalam komponen vue merupakan fungsi?

Sebab: Untuk menghalang objek contoh berbilang komponen daripada berkongsi data yang sama dan menyebabkan pencemaran data dalam bentuk fungsi, apabila initData digunakan sebagai fungsi kilang, objek data baharu akan dikembalikan. Apabila data dalam komponen ditulis sebagai fungsi, data ditakrifkan dalam bentuk nilai pulangan fungsi, supaya setiap kali komponen digunakan semula, data baharu akan dikembalikan dengan skopnya sendiri, sama seperti mencipta data peribadi untuk setiap contoh komponen Ruang data membolehkan setiap contoh komponen mengekalkan datanya sendiri.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

1 Perbezaan antara contoh dan data definisi komponen

Apabila mentakrifkan contoh vue, atribut data boleh menjadi objek atau objek. Atribut data yang ditakrifkan dalam fungsi

const app = new Vue({
    el:"#app",
    // 对象格式
    data:{
        foo:"foo"
    },
    // 函数格式
    data(){
        return {
             foo:"foo"
        }
    }
})

hanya boleh menjadi fungsi

Jika data komponen ditakrifkan secara langsung sebagai objek

Vue.component('component1',{
    template:`<div>组件</div>`,
    data:{
        foo:"foo"
    }})

, anda akan. dapatkan mesej amaran.

Nota amaran: Data yang dikembalikan harus menjadi fungsi dalam setiap contoh komponen

2. Data komponen fungsi definisi dan Perbezaan antara objek

Seperti yang dinyatakan di atas, data komponen mesti menjadi fungsi Saya tertanya-tanya jika anda pernah memikirkan mengapa ini?

Apabila kita mentakrifkan komponen, Vue akhirnya akan membentuk contoh komponen melalui Vue.extend()

Di sini kita meniru pembina komponen, mentakrifkan atribut data dan mengambil bentuk objek

function Component(){
 
}
Component.prototype.data = {
	count : 0
}

Buat dua kejadian komponen

const componentA = new Component()
const componentB = new Component()

Ubah suai nilai atribut data komponen componentA dan nilai dalam componentB juga telah berubah

console.log(componentB.data.count)  // 0
componentA.data.count = 1
console.log(componentB.data.count)  // 1

Sebab untuk ini Ini kerana kedua-duanya berkongsi alamat memori yang sama, dan kandungan yang diubah suai oleh komponenA juga mempengaruhi komponenB. [Belajar perkongsian video: tutorial video vue, video bahagian hadapan web]

Jika kita menggunakan bentuk fungsi, ini tidak akan berlaku (objek dikembalikan oleh fungsi Alamat memori tidak sama)

function Component(){
this.data = this.data()
}
Component.prototype.data = function (){
    return {
   count : 0
    }
}

Ubah suai nilai atribut data komponen komponenA, nilai dalam komponenB tidak akan terjejas

console.log(componentB.data.count)  // 0
componentA.data.count = 1
console.log(componentB.data.count)  // 0

Komponen vue mungkin mempunyai banyak kejadian, menggunakan fungsi Kembalikan borang data baharu supaya data setiap objek tika tidak akan dicemari oleh data objek tika lain

3 🎜>

Mula-mula, anda boleh melihat kod untuk vue untuk memulakan data Takrifan data boleh menjadi fungsi atau objek

Lokasi kod sumber:

/vue-dev/src/core/instance/state.js

data boleh sama ada objek atau fungsi , maka mengapa amaran di atas muncul?

function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
    ...
}

Jangan risau, teruskan membaca di bawah

Apabila komponen dibuat, pilihan akan digabungkan

Lokasi kod sumber:

/vue-dev/src/core/util/options.js Komponen tersuai Akan memasukkan mergeOptions untuk pilihan penggabungan

Tentukan data dan lakukan pengesahan data

Vue.prototype._init = function (options?: Object) {
    ...
    // merge options
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    ...
  }

Lokasi kod sumber:

/vue-dev/src/core/instance/init.jsPada masa ini, instance vm ialah undefined, masukkan if judgment , jika jenis data bukan fungsi, amaran akan muncul

strats.data = function (
  parentVal: any,
  childVal: any,
  vm?: Component
): ?Function {
  if (!vm) {
    if (childVal && typeof childVal !== "function") {
      process.env.NODE_ENV !== "production" &&
        warn(
          'The "data" option should be a function ' +
            "that returns a per-instance value in component " +
            "definitions.",
          vm
        );
      return parentVal;
    }
    return mergeDataOrFn(parentVal, childVal);
  }
  return mergeDataOrFn(parentVal, childVal, vm);
};

4. Kesimpulan The Data objek instance root boleh menjadi objek atau objek Ia adalah fungsi (contoh akar ialah singleton) dan tidak akan menyebabkan pencemaran data

Data objek contoh komponen mestilah fungsi menghalang berbilang objek contoh komponen daripada berkongsi data yang sama dan menyebabkan pencemaran data. Dalam bentuk fungsi, ia akan digunakan sebagai fungsi kilang apabila initData akan mengembalikan objek data baharu

Penerangan:

The komponen dalam vue digunakan Boleh diguna semula, untuk mengelakkan penggunaan semula data, tentukan ia sebagai fungsi.
Data data dalam komponen vue hendaklah diasingkan antara satu sama lain dan tidak menjejaskan satu sama lain Setiap kali komponen digunakan semula, data data hendaklah disalin sekali tempat tertentu diduplikasi Apabila data data dalam komponen tempatan yang digunakan ditukar, data data komponen tempatan yang digunakan semula tidak akan terjejas. Ia adalah perlu untuk mengembalikan objek sebagai status komponen melalui fungsi data.
Apabila kita menulis data dalam komponen sebagai fungsi, data ditakrifkan dalam bentuk nilai pulangan fungsi, supaya setiap kali komponen digunakan semula, data baru akan dikembalikan, dengan Skopnya sendiri adalah serupa dengan mencipta ruang data peribadi untuk setiap tika komponen, membenarkan setiap tika komponen mengekalkan datanya sendiri.
Apabila tarikh komponen kami hanya ditulis dalam bentuk objek, kejadian ini menggunakan pembina yang sama Disebabkan ciri-ciri JavaScript, semua kejadian komponen berkongsi satu data, jadi Ia akan membawa kepada keputusan yang mengubah segala-galanya.

(Belajar perkongsian video: pembangunan bahagian hadapan web, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Mengapakah data dalam komponen vue merupakan fungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!