What are the differences between data and props in vuejs

This article mainly explains "what are the differences between data and props in vuejs". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the differences between data and props in vuejs"?

The difference between data and props in vuejs: 1. Data does not need the user (developer) to pass the value, which is maintained by itself, while props needs the user (developer) to pass the value. 2. The data on data is readable and writable, while the data on props can only be read and cannot be re-assigned.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

In the process of using Vue.js, you often encounter data and props. Today, let's explore the difference between the two.

Data

Type: Object | Function

Limitation: the definition of a component only accepts Function

The data object for the Vue instance. Vue will recursively convert the properties of data to getter/setter, so that the properties of data can respond to changes in data. The object must be pure (with zero or more key/value pairs): for native objects created by the browser API, the properties on the prototype are ignored. Roughly speaking, data should only be data-it is not recommended to observe objects with stateful behavior.

Example:

Var data = {a: 1} / / directly create an instance var vm = new Vue ({data: data}) vm.a / / = > 1vm.$data = data / / = > true// Vue.extend () data must be the function var Component = Vue.extend ({data: function () {return {a: 1})

Props

Type: Array | Object

The props can be an array or object that receives data from the parent component. Props can be a simple array or use an object instead, which allows you to configure advanced options such as type detection, custom validation, and setting default values.

Example:

/ / simple syntax Vue.component ('props-demo-simple', {props: [' size', 'myMessage']}) / / object syntax Provide the difference between authentication Vue.component ('props-demo-advanced', {props: {/ / detection type height: Number, / detection type + other verification age: {type: Number, default: 0, required: true, validator: function (value) {return value > = 0}):

Difference one:

Data does not need to be passed by the user (developer) and is maintained by itself.

Props requires users (developers) to pass values

Difference two:

1. The data on data is all readable and writable.

2. The data on props can only be read and cannot be reassigned.

Thank you for your reading, the above is "what are the differences between data and props in vuejs". After the study of this article, I believe you have a deeper understanding of the difference between data and props in vuejs, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!