Vue.js Вычисляемые свойства

Ключевое слово вычисляемых свойств:computed。

Вычисляемые свойства очень полезны при работе с некоторой сложной логикой.

Вы можете посмотреть следующий пример переворота строки:

Пример 1

<div id="app"> {{ message.split('').reverse().join('') }} </div>

Попробуйте сами »

В примере 1 шаблон становится очень сложным, и его нелегко читать и понимать.

Далее давайте рассмотрим пример, в котором используются вычисляемые свойства:

Пример 2

<div id="app"> <p>Исходная строка: {{ message }}</p> <p>Перевёрнутая строка после вычисления: {{ reversedMessage }}</p> </div> <script>var vm = new Vue({ el: '#app', data: { message: 'Example!' }, computed: { // Геттер для вычисляемого свойства reversedMessage: function () { // `this` указывает на экземпляр vm return this.message.split('').reverse().join('') } } })</script>

Попробуйте сами »

В Примере 2 объявляется вычисляемое свойство с именем reversedMessage.

Предоставленная функция будет использоваться в качестве геттера для свойства vm.reversedMessage.

vm.reversedMessage зависит от vm.message. Когда vm.message изменяется, vm.reversedMessage также обновляется.

computed против methods

Мы можем использовать methods вместо computed. Эффект от обоих одинаков, но computed кэшируется на основе своих зависимостей и пересчитывается только тогда, когда связанные зависимости изменяются. При использовании methods функция всегда будет вызываться и выполняться заново при повторном рендеринге.

Пример 3

methods: { reversedMessage2: function () { return this.message.split('').reverse().join('') } }

Попробуйте сами »

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

Сеттер computed

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

Пример 4

var vm = new Vue({ el: '#app', data: { name: 'Google', url: 'http://www.google.com' }, computed: { site: { // getter get: function () { return this.name + ' ' + this.url }, // setter set: function (newValue) { var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } } }) //Когда вызывается сеттер, vm.name и vm.url также будут обновлены соответствующим образом. vm.site = 'Example http://www.example.com'; document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url);

Попробуйте сами »

Из результата выполнения примера, когда выполняется vm.site = 'Example http://www.example.com';, вызывается сеттер, и vm.name и vm.url также будут обновлены соответствующим образом.

Другие расширения