Почему данные компонента Vue должны быть функцией?

Vue.js
Почему данные компонента Vue должны быть функцией?

предисловие

Сначала нам нужно проверить знание цепочки прототипов, на самом деле эта проблема зависит от js, а не от vue.

function Component(){
  this.data = this.data
}
Component.prototype.data = {
    name:'jack',
    age:22,
}

Во-первых, мы достигаем консенсуса (без этого консенсуса, пожалуйста, добавьте знание цепочки прототипов js):

  • Экземпляры имеют разное содержимое в своих конструкторах.
  • Component.prototype , методы или значения этой категории являются общими для всех экземпляров.

Разрешите сомнения

Исходя из этого, давайте рассмотрим этот вопрос:

function Component(){
 
}
Component.prototype.data = {
    name:'jack',
    age:22,
}
var componentA = new Component();
var componentB = new Component();
componentA.data.age=55;
console.log(componentA,componentB)

В этот момент данные компонента A и компонента B указывают на один и тот же адрес памяти, а возраст становится равным 55, что вызывает проблему!

Далее следует хорошее объяснение того, почему компонентам vue нужны функции:

function Component(){
 this.data = this.data()
}
Component.prototype.data = function (){
    return {
    name:'jack',
    age:22,
}
}
var componentA = new Component();
var componentB = new Component();
componentA.data.age=55;
console.log(componentA,componentB)

На данный момент данные компонента A и компонента B не зависят друг от друга, возраст составляет 55 и 22 года соответственно, никаких проблем!

Суммировать

Я был внезапно ошеломлен этим вопросом, но, подумав об этом, я слишком быстро забыл основы. Когда я изучал js, самое основное: разница между конструктором и прототипом была размыта. Неожиданно небольшая проблема vue заставила меня пересмотреть прошлое и узнать новое.

Категории