Вычисляемые свойства Vue3

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

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

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

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

Пример 1

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

Попробуйте »

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

Далее рассмотрим пример использования вычисляемых свойств:

Пример 2

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример теста Vue - Пример руководства (example.com)</title> <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script> </head> <body> <div id="app"> <p>Исходная строка: {{ message }}</p> <p>Вычисленная перевёрнутая строка: {{ reversedMessage }}</p> </div> <script>const app = { data() { return { message: 'EXAMPLE!!' } }, computed: { // геттер вычисляемого свойства reversedMessage: function () { // `this` указывает на экземпляр vm return this.message.split('').reverse().join('') } } } Vue.createApp(app).mount('#app')</script> </body> </html>

Попробуйте »

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

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

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

Используйте функцию `computed` для определения вычисляемых свойств:

Пример

<template>
  <div>
    <p>Название товара:{{ productName }}</p>
    <p>Цена товара:{{ formattedPrice }}</p>
    <button @click="increasePrice">Увеличить цену</button>
  </div>
</template>

<script>
import { reactive, computed } from 'vue';

export default {
  setup() {
    // реактивные данные
    const state = reactive({
      name: 'Мобильный телефон',
      price: 2000
    });

    // вычисляемое свойство
    const productName = computed(() => {
      return`Скидка ${state.name}`;
    });

    const formattedPrice = computed(() => {
      return `￥${state.price.toFixed(2)}`;
    });

    // метод
    const increasePrice = () => {
      state.price += 100;
    };

    return {
      productName,
      formattedPrice,
      increasePrice
    };
  }
};
</script>

Описание

computedФункция:

  • ВsetupИспользуется в функцииcomputedИспользуйте функцию для определения вычисляемых свойств.
  • Возвращайте вычисленное значение с помощью стрелочной функции, которая автоматически отслеживает реактивные данные, от которых она зависит (stateв объектеnameиprice）。

Используйте вычисляемые свойства:

  • productNameВычисляемые свойства являются производными отstate.name, всякий раз, когдаstate.nameкогда происходят изменения,productNameоно будет автоматически обновляться.
  • formattedPriceВычисляемые свойства являются производными отstate.price, всякий раз, когдаstate.priceкогда происходят изменения,formattedPriceоно будет автоматически обновляться.

реактивные данные:

  • Используйтеreactiveфункция создаётstateобъект, превращая его в реактивные данные и позволяя отслеживать изменения в его свойствах.

Метод:

  • increasePriceМетод используется для увеличенияstate.priceзначения, и каждый раз при нажатии кнопки,state.priceзначение увеличивается на 100, иformattedPriceвычисляемое свойство обновится соответствующим образом.

computed против methods

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

Пример 3

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

Попробуйте »

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

Сеттер computed

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

Пример 4

const app = { data() { return { name: 'Google', url: 'http://www.google.com' } }, computed: { site: { // getter get: function () { return this.name + ' ' + this.url }, // сеттер set: function (newValue) { var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } } } vm = Vue.createApp(app).mount('#app') document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url); document.write('<br>------ Обновление данных ------<br>'); //Когда вызывается сеттер, `vm.name` и `vm.url` также будут обновлены соответствующим образом vm.site = 'Пример руководства https://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также будет обновлён соответствующим образом.

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