Detailed explanation of the difference between data and props in vue

1. The difference between the two

Difference 1:

dataNo user (developer) needs to pass the value, and maintain it itself

propsRequires user (developer) to pass the value

Difference 2:

1. The data on data is readable and writable.

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

2. Why can't props be modified?

Because Vue is a one-way data stream, in order to ensure the one-way flow of data and facilitate the tracking of data, errors can be located more quickly when the error occurs.

All props make a one-way downlink binding between their parent-child props: updates of the parent props will flow down to the child component, but the other way around will not work. This prevents accidental changes to the parent component's state from the child component, which makes the data flow of your application difficult to understand.
In addition, every time the parent component changes, all props in the child component will be refreshed to the latest value. This means you should not change the prop inside a child component. If you do this, Vue will issue a warning in the browser's console.

3. How does Vue monitor the modification of props attributes and give warnings

When the component initProps method is used, the props will be definedReactive operation. The fourth parameter passed in is a custom set function. This function will be executed when the set method of props is triggered. When the props are modified, the fourth parameter passed here will be run and then the judgment will be made. If it is not the root component and is not an updated child component, it means that the update is props, so there will be a warning.

if (.NODE_ENV !== 'production') {
  var hyphenatedKey = hyphenate(key);
  if (isReservedAttribute(hyphenatedKey) ||
      (hyphenatedKey)) {
    warn(
      ("\"" + hyphenatedKey + "\" is a reserved attribute and cannot be used as component prop."),
      vm
    );
  }
  defineReactive$$1(props, key, value, function () {
    if (!isRoot && !isUpdatingChildComponent) {
      warn(
        "Avoid mutating a prop directly since the value will be " +
        "overwritten whenever the parent component re-renders. " +
        "Instead, use a data or computed property based on the prop's " +
        "value. Prop being mutated: \"" + key + "\"",
        vm
      );
    }
  });
}

It should be noted that a prompt will be triggered when the prop modified from a child component belongs to the basic type. In this case, you cannot modify the data source of the parent component because the value is copied when the underlying type is assigned. When modifying the attribute of the reference type, the prompt will not be triggered, and the data of the parent component data source is modified.

The above is a detailed explanation of the difference between data and props in vue. For more information about the difference between vue data and props, please pay attention to my other related articles!