Вычисленные свойства и наблюдатели

Внутри-шаблонные выражения удобны только для простых операций. Когда мы добавляем слишком много логики в наши шаблоны, они становятся раздутыми и, следовательно, их трудно поддерживать:

<span id=?app?>
	{{information.split(??).reverse().join(??)}}
</span>

В приведенном выше примере шаблон больше не является декларативным и простым. Нужно еще раз взглянуть, чтобы понять, что он отображает информацию в обратном порядке. Это становится еще хуже, когда нам нужно включить перевернутое сообщение в наш шаблон более одного раза.

Таким образом, для любой сложной логики используйте вычисляемое свойство.

Основной пример

HTML

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

JS

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

Как и следовало ожидать, приведенный выше фрагмент соответственно отображает:

 Привет 
olleH

значение reversedMessage всегда зависит от свойства сообщения, поэтому vm.reversedMessage всегда меняется с изменениями vm.message.

Компьютерное кеширование против метода

HTML:

<p>Reversed message: "{{ reverseMessage() }}"</p>

JS:

// in component
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

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

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

Computed vs Watched Property

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

HTML

<div id="demo">{{ fullName }}</div>

JS

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

Ниже приведена версия вычисляемого свойства кода выше:

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

Компьютерный сеттер

По умолчанию вычисляемые свойства доступны только для получения, однако при необходимости вы можете предоставить установщик:

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// 

Запустив vm.fullName =? Aryan Yuksek ?, установщик будет вызван, и vm.lastName vm.lastName обновится соответствующим образом.

Зрителей

Хотя вычисленные свойства более подходят в большинстве случаев, пользовательский наблюдатель необходим в определенное время. По этой причине Vue предоставляет нам возможность смотреть. Опция наблюдения особенно полезна, когда мы хотим выполнить асинхронные операции. Например:

<div id="watch-example">
  <p>Ask a yes/no question: <input v-model="question"></p>
  <p>{{ answer }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script>
var watchExampleVM =new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'You have to ask a question, for me to give you an answer'
  },
  watch: {
    question: function (newQuestion,oldQuestion) {
      this.answer ='Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },
  created: function () {
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods:{
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer ='Questions usually contain a question mark. ;-)'
        return
      }
      this.answer ='Thinking...'
      var vm = this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer ='Error! Could not reach the API.'+ error
        })
    }
  }
})
</script>

Как видно, опция watch позволяет нам выполнять асинхронную операцию, ограничивать частоту выполнения этой операции и устанавливать промежуточные состояния, пока мы не получим окончательный ответ.