Метод vs вычисляется в Vue

в чем основное различие между методом и вычисленным значением в Vue.Джей?

Они выглядят одинаково и взаимозаменяемы.

4 64
javascript methods vue.js vuejs2 computed-properties

4 ответа:

вычисленные значения и методы очень различны в Vue и определенно не взаимозаменяемы в большинстве случаев.

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

более подходящим именем для вычисляемого значения является вычисляемое свойство. Фактически, при создании экземпляра Vue вычисляемые свойства преобразуются в свойство Vue с помощью геттера, а иногда и сеттера. В основном вы можете думать о вычисленном значении как о производном значении, которое будет автоматически обновляется при каждом обновлении одного из базовых значений, используемых для его вычисления. Ты же не вызов a вычисляется и не принимает никаких параметров. Ссылка на вычисляемое свойство как свойство данных. Вот классический пример из документация:

computed: {
  // a computed getter
  reversedMessage: function () {
    // `this` points to the vm instance
    return this.message.split('').reverse().join('')
  }
}

который ссылается в DOM следующим образом:

<p>Computed reversed message: "{{ reversedMessage }}"</p>

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

data:{
    names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
    startsWithB(){
        return this.names.filter(n => n.startsWith("B"))
    }
}

<p v-for="name in startsWithB">{{name}}</p>

вычисленные значения также кэшируются, чтобы избежать повторного вычисления значения, которое не нужно пересчитывать, когда оно не изменилось (как это может быть, например, в цикле).

метод

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

data:{
    names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
    startsWithB(){
        return this.startsWithChar("B")
    },
    startsWithM(){
        return this.startsWithChar("M")
    }
},
methods:{
    startsWithChar(whichChar){
        return this.names.filter(n => n.startsWith(whichCharacter))
    }
}
вю это!--31-->документация очень хорошо и легко доступны. Я рекомендую его.
89

поскольку @gleenk попросил практический пример, чтобы сделать очевидными различия в кэше и зависимостях между методами и вычисляемыми свойствами, я покажу простой сценарий:

приложение.js

new Vue({
    el: '#vue-app',
    data: {
        a: 0,
        b: 0,
        age: 20
    },
    methods: {
        addToAmethod: function(){
            console.log('addToAmethod');
            return this.a + this.age;
        },
        addToBmethod: function(){
            console.log('addToBmethod');
            return this.b + this.age;
        }
    },
    computed: {
        addToAcomputed: function(){
            console.log('addToAcomputed');
            return this.a + this.age;
        },
        addToBcomputed: function(){
            console.log('addToBcomputed');
            return this.b + this.age;
        }
    }
});

здесь у нас есть 2 метода и 2 вычисленных свойства, которые выполняют ту же задачу. Методы addToAmethod & addToBmethod и вычисленные свойства addToAcomputed & addToBcomputed все добавить +20 (т. е. age значение) либо a или b. Что касается методов, то они таковы и под названием каждый время выполнения действия над любой из перечисленных свойств, даже если зависимости для одного конкретного метода не изменились. Для вычисляемых свойств код выполняется только при изменении зависимости; например, одно из конкретных значений свойства, которое ссылается на A или B, вызовет addToAcomputed или addToBcomputed, соответственно.

метод и вычисленные описания кажутся довольно похожими, но как @Абдулла Хан уже уточнил это,это не одно и то же! Теперь давайте попробуем добавить html, чтобы выполнить все вместе и посмотреть, где разница:

.HTML (для метода) 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>VueJS stackoverflow example</title>
        <link href="style.css" rel="stylesheet" />
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="vue-app">
            <h1>Computed Properties</h1>
            <button v-on:click="a++">Add to A</button>
            <button v-on:click="b++">Add to B</button>
            <p>Age + A = {{ addToAmethod() }}</p>
            <p>Age + B = {{ addToBmethod() }}</p>
        </div>
    </body>

    <script src="app.js"></script>
</html>

methodbutton method

результат

когда я нажимаю на кнопку "добавить", все методы вызываются (см. Результат экрана журнала консоли выше),addToBmethod() также выполняется, но я этого не сделал нажмите кнопку "добавить в B" кнопка; значение свойства, которое ссылается на B, не изменилось. То же самое поведение происходит, если мы решим нажать кнопку "добавить в B", потому что снова оба метода будут вызываться независимо от изменений зависимостей. Согласно этому сценарию это плохая практика потому что мы реализуем методы каждый раз, даже когда зависимости не изменились. Это действительно потребляет ресурсы, потому что нет кэша для значения свойств, которые не изменились.

.HTML (для вычисляемого свойства) 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>VueJS stackoverflow example</title>
        <link href="style.css" rel="stylesheet" />
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="vue-app">
            <h1>Computed Properties</h1>
            <button v-on:click="a++">Add to A</button>
            <button v-on:click="b++">Add to B</button>
            <p>Age + A = {{ addToAcomputed }}</p>
            <p>Age + B = {{ addToBcomputed }}</p>
        </div>
    </body>

    <script src="app.js"></script>
</html>

computedbutton computed

результат

когда я нажимаю на кнопку "добавить", только вычисленное свойство addToAcomputed вызывается потому, что, как мы уже говорили, вычисляемые свойства выполняются только при изменении зависимости. И так как я не нажал на кнопку "добавить в B" и значение свойства age для B имеет не изменено, нет причин вызывать и выполнять вычисляемое свойство addToBcomputed. Таким образом, в определенном смысле вычисляемое свойство поддерживает "то же самое неизменное" значение для свойства B, как своего рода кэш. И в этом случае это считается хорошая практика.

21

С docs

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

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

7

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

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

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

методы

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

в методе вызова скобки есть, и вы можете отправить один или несколько параметров в этом.

1