Разъяснение вычисляемых свойств Simple Vue.js - PullRequest
Новая
       61

Разъяснение вычисляемых свойств Simple Vue.js

0 голосов
/ 22 сентября 2018

Я не новичок в Vue.js, но я снова просматриваю документы, пытаясь понять, что пропустил в первый раз.Я сталкивался с этим утверждением в разделе базового примера использования вычисляемых свойств :

Вы можете привязывать данные к вычисленным свойствам в шаблонах, как обычное свойство.Vue знает, что vm.reversedMessage зависит от vm.message, поэтому он обновит любые привязки, которые зависят от vm.reversedMessage, когда vm.message изменится.И самое приятное то, что мы создали это отношение зависимостей декларативно: вычисляемая функция получения не имеет побочных эффектов , что облегчает тестирование и понимание.

Часть о мы создали это отношение зависимостей декларативно: вычисляемая функция получения не имеет побочных эффектов , мне не ясно.Я понимаю, что побочным эффектом является какое-то действие, которое не имеет прямого отношения к чистым намерениям функции, но я не понимаю, как оно используется в этом утверждении.

Может ли кто-нибудь объяснить, чтоможет быть наоборот?Каковы возможные побочные эффекты, которые могут произойти?

1 Ответ

0 голосов
/ 23 сентября 2018

Термин побочный эффект здесь относится к любым мутациям данных, выполняемым в получателе вычисляемого свойства.Например: 

export default {
  data() {
    return {
      firstName: 'john',
      lastName: 'doe',
      array: [1,2,3]
    }
  },
  computed: {
    fullName() {
      this.firstName = 'jane'; // SIDE EFFECT - mutates a data property
      return `${this.firstName} ${this.lastName}`
    },
    reversedArray() {
      return this.array.reverse(); // SIDE EFFECT - mutates a data property
    }
  }
}

Обратите внимание, как fullName мутирует firstName, а reversedArray мутирует array.При использовании ESLint (например, из сгенерированного проекта Vue CLI ) вы увидите предупреждение : 

[eslint] Unexpected side effect in "fullName" computed property. (vue/no-side-effects-in-computed-properties)
[eslint] Unexpected side effect in "reversedArray" computed property. (vue/no-side-effects-in-computed-properties)

demo

...