Was ist der Unterschied zwischen Daten und Requisiten in VueJS?

Der Unterschied zwischen Daten und Requisiten in Vuejs: 1. Daten erfordern nicht, dass Benutzer (Entwickler) Werte übergeben, und behalten sich selbst bei, während Requisiten erfordern, dass Benutzer (Entwickler) Werte übergeben. 2. Die Daten auf Daten sind sowohl lesbar als auch beschreibbar, während die Daten auf Requisiten nur gelesen und nicht neu zugewiesen werden können.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Bei der Verwendung von Vue.js stoßen Sie häufig auf Daten und Requisiten. Lassen Sie uns heute die Unterschiede zwischen den beiden untersuchen. Vue.js的过程中，经常会遇到 data和 props。今天就来探索一下二者的区别。

data

• 类型： Object | Function
• 限制 ：组件的定义只接受 Function
Vue实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。
  例：

var data = { a: 1 }

// 直接创建一个实例
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true

// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

props

• 类型：Array<string>| Object
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
  例 ：

// 简单语法
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// 对象语法，提供验证
Vue.component('props-demo-advanced', {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

两者的区别 ：

区别一：

data不需要用户（开发者）传值，自身维护

props

• Typ: Objekt Funktion
• Einschränkung: Die Definition der Komponente akzeptiert nur Datenobjekte von Function
Vue-Instanzen. Vue konvertiert die Eigenschaften von data rekursiv in getter/setter, sodass auf die Eigenschaften von data reagiert werden kann Datenänderung. Das Objekt muss ein reines Objekt sein (das null oder mehr Schlüssel/Wert-Paare enthält): ein natives Objekt, das von der API des Browsers erstellt wurde, wird ignoriert. Grob gesagt sollte es sich bei data nur um Daten handeln – die Beobachtung von Objekten mit zustandsbehaftetem Verhalten wird nicht empfohlen.
  Beispiel:

• Typ: Array<string>|. Object
props kann ein Array oder ein Objekt sein und wird zum Empfangen von Daten von der übergeordneten Komponente verwendet. props kann ein einfaches Array sein oder stattdessen ein Objekt verwenden, das die Konfiguration erweiterter Optionen wie Typerkennung, benutzerdefinierte Validierung und das Festlegen von Standardwerten ermöglicht.
  Beispiel:

Der Unterschied zwischen den beiden:

props erfordert, dass Benutzer (Entwickler) Werte übergeben

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Daten und Requisiten in VueJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!