Apakah kaedah untuk memulakan data dalam Vue?

Terdapat dua cara untuk memulakan data dalam Vue: 1. Mod objek, sintaks "var data = {key-value pair}"; 2. Function mode, syntax "data: function () {return { key -pasangan nilai}" }". Perlu diingatkan bahawa permulaan data dalam komponen dan lanjutan tidak boleh menjadi Objek, jika tidak ralat akan dilaporkan. Tujuan menggunakan mod fungsi untuk data dalam komponen adalah untuk menghalang objek contoh berbilang komponen daripada berkongsi data yang sama dan menyebabkan pencemaran data.

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

Data Vue mempunyai dua kaedah permulaan, fungsi dan objek, tetapi apakah senario yang boleh digunakan untuk kedua-dua situasi ini? Bolehkah ia bersifat universal? Dengan kedua-dua soalan ini, mari kita menganalisisnya bersama-sama

permulaan data

// 代码来源于官网示例

// 第一种定义方式
var data = { a: 1 }

// 直接创建一个实例
var vm = new Vue({
  data: data
})

// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
// 第二种定义方式
  data: function () {
    return { a: 1 }
  }
})

Kod di atas menerangkan secara ringkas dua cara untuk menentukan data.

• fungsi

• objek

Demo tapak web rasmi juga menekankan bahawa permulaan data dalam lanjutan tidak boleh menjadi Gunakan objek. Jadi kenapa?

Analisis kod sumber

Menurut demo laman web rasmi, pemulaan data dalam Vue.extend tidak boleh menjadi Objek paksa ia ditulis sebagai Objek?

var Component = Vue.extend({
  data: { a: 1 }
})

Selepas dijalankan, konsol chrome secara langsung melaporkan ralat, maklumatnya adalah seperti berikut

vue.esm.js?efeb:591 [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.

Dengan menganalisis kod sumber dan mesej ralat, apabila Vue.extend dicetuskan, ia akan melakukan operasi gabungan. Gabungkan komponen asas (dalam vmode, peralihan, dll.) dengan maklumat yang anda tentukan dalam lanjutkan melalui mergeField kepada pilihan Apabila digabungkan ke dalam data, ia akan mencetuskan strats.data, di mana ia akan menyemak sama ada data ialah fungsi, apa yang perlu diperhatikan di sini ialah penapis, komponen, dsb. dan data mengikuti dua set proses penggabungan Sila lihat ulasan kod untuk butiran, seperti berikut

// vue.extend 源码地址https://github.com/vuejs/vue/blob/dev/src/core/global-api/extend.js

  Vue.extend = function (extendOptions: Object): Function {
  ...
  // 在这里会触发mergeOptions方法
  Sub.options = mergeOptions(
      Super.options,
      extendOptions
    )
  ...
}

// mergeOptions 源码地址https://github.com/vuejs/vue/blob/dev/src/core/util/options.js

export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {
  ...

  const options = {}
  let key
  // parent对象内包含components、filter,、directive
  for (key in parent) {
    mergeField(key)
  }
  // child对象内对应的是Vue.extend内定义的参数
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key)
    }
  }
  function mergeField (key) {
  // 这一步是根据传入的key找到不同的合并策略filter、components、directives用到合并策略是这个方法mergeAssets和data用到的不一样，当合并到data的时候会进入专属的合并策略方法内
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key)
  }
}

// strats.data  源码地址https://github.com/vuejs/vue/blob/dev/src/core/util/options.js
strats.data = function (
  parentVal,
  childVal,
  vm
) {
  if (!vm) {
  // 如果data不是function的话会直接走下面的报错信息
    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)
};

Situasi lain

Malah, kod kami di atas hanyalah proses mudah Dalam pembangunan sebenar, situasi yang serupa termasuk: data tidak boleh ditakrifkan sebagai objek dalam subkomponen dan laluan, kerana mereka semua memanggil kaedah mergeOptions di bahagian bawah

Bilakah ia boleh ditakrifkan sebagai objek

Apabila vue dimulakan, seperti berikut

new Vue({
  data: {
    linke: '//sinker.club'
  }
})

Maksud

Baiklah, banyak yang telah diperkatakan di atas, jadi apakah maksud melakukan ini? Mengapakah situasi tersebut tidak boleh ditakrifkan sebagai objek? Malah, untuk menjawab soalan ini, anda perlu kembali ke js sendiri Seperti yang kita semua tahu, jenis data js dibahagikan kepada jenis rujukan dan asas termasuk Objek, Tatasusunan dan Fungsi tidak dijelaskan di sini.

  var obj = {link: '//www.sinker.club'}
  var obj2 = obj
  var obj3 = obj
  obj2.link = "//gitlab.sinker.club"
  console.log(obj3.link) // "//gitlab.sinker.club"

Kod di atas Ia menggambarkan masalah Memandangkan obj3 dan obj2 kedua-duanya menunjuk ke alamat yang sama dalam ingatan, pengubahsuaian obj2 sudah tentu, salinan dalam boleh digunakan untuk menangani dengan masalah ini

• JSON.parse(JSON.stringify(obj))

• deepClone(obj)

Tetapi kedua-dua kaedah ini memerlukan pembangunan atau rangka kerja Anda perlu membuat salinan mendalam setiap kali Apabila jumlah data adalah besar, ia tidak bagus untuk prestasi. Takrifkan data sebagai fungsi

function data() {
  return {
   link: '//sinker.club'
  }
}

var obj = test()
var obj2 = test()

obj2.link ="//gitlab.sinker.club"
console.log(obj.link) '//sinker.club'

Mengapa anda melakukan ini? Apakah senario penyelesaiannya?

Sebagai contoh, jika saya mentakrifkan subkomponen, data ditakrifkan sebagai objek Komponen ini dirujuk di berbilang tempat Jika salah satu data yang merujuk kepada komponen ini diubah suai. maka ia akan Menyebabkan data lain yang merujuk komponen ini berubah pada masa yang sama, tamat.

Pengetahuan lanjutan:

Apabila mentakrifkan contoh vue , atribut data boleh sama ada a Objek juga boleh menjadi fungsi

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

Atribut data yang ditakrifkan dalam komponen hanya boleh menjadi fungsi

Jika data komponen ditakrifkan secara langsung sebagai objek

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

Anda akan mendapat mesej amaran

Penjelasan:

• Komponen dalam vue digunakan untuk penggunaan 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.

[Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Apakah kaedah untuk memulakan data dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!