Maison > interface Web > Voir.js > le corps du texte

Quelle est la différence entre les données et les accessoires dans vuejs

青灯夜游
Libérer: 2021-10-26 16:12:44
original
4972 Les gens l'ont consulté

La différence entre les données et les accessoires dans vuejs : 1. Les données n'exigent pas que les utilisateurs (développeurs) transmettent des valeurs et se maintiennent, tandis que les accessoires exigent que les utilisateurs (développeurs) transmettent des valeurs ; 2. Les données sur les données sont à la fois lisibles et inscriptibles ; tandis que les données sur les accessoires peuvent uniquement être lues et ne peuvent pas être réaffectées.

Quelle est la différence entre les données et les accessoires dans vuejs

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Dans le processus d'utilisation de Vue.js, vous rencontrez souvent des données et des props. Explorons les différences entre les deux aujourd’hui. Vue.js的过程中,经常会遇到 dataprops。今天就来探索一下二者的区别。

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 }
  }
})
Copier après la connexion

props

  • 类型:Array<string>| Object
    props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。
    例 :
// 简单语法
Vue.component(&#39;props-demo-simple&#39;, {
  props: [&#39;size&#39;, &#39;myMessage&#39;]
})

// 对象语法,提供验证
Vue.component(&#39;props-demo-advanced&#39;, {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})
Copier après la connexion

两者的区别 :

区别一:

data不需要用户(开发者)传值,自身维护

props

données

  • Type : Objet Fonction
  • Restriction : La définition du composant n'accepte que les objets de données des instances Function
    Vue. Vue convertira récursivement les propriétés de data en getter/setter, afin que les propriétés de data puissent répondre à changement de données. L'objet doit être un objet pur (contenant zéro ou plusieurs paires clé/valeur) : un objet natif créé par l'API du navigateur est ignoré. En gros, data ne devrait être que des données - l'observation d'objets avec un comportement avec état n'est pas recommandée.
    Exemple :
rrreeeaccessoires

  • Type : Array<string>| Object
    props peut être un tableau ou un objet et est utilisé pour recevoir des données du composant parent. props peut être un simple tableau, ou utiliser un objet à la place, ce qui permet de configurer des options avancées telles que la détection de type, la validation personnalisée et la définition de valeurs par défaut.
    Exemple :
rrreee

La différence entre les deux :

Différence 1 :

data ne nécessite pas que les utilisateurs (développeurs) transmettent des valeurs, ils sont maintenus par eux-mêmes

props nécessite que les utilisateurs (développeurs) transmettent des valeurs

Différence 2 : 🎜🎜 1. Données Les données sont à la fois lisibles et inscriptibles 🎜🎜2. Les données sur les accessoires ne peuvent être lues et ne peuvent pas être réaffectées🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Apprentissage en programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal