Подтвердить что ты не робот

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

Вычисленное свойство

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

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))
    }
}

Vue документация действительно хороша и легко доступна. Я рекомендую его.

Ответ 2

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

app.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, соответственно.

Метод и вычисленные описания кажутся довольно похожими, но, поскольку @Abdullah Khan уже определил его, они не одно и то же! Теперь давайте попробуем добавить html, чтобы все выполнить вместе, и посмотрим, в чем разница.

Пример использования метода

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;
        }
    }
});
<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>VueJS Methods - stackoverflow</title>
            <link href="style.css" rel="stylesheet" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
    
        </head>
        <body>
            <div id="vue-app">
                <h1>Methods</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>

Ответ 3

Из docs

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

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

Ответ 4

Одно из различий между вычисленным и методом. Предположим, у нас есть функция, которая будет возвращать значение счетчика (счетчик просто переменный). Давайте посмотрим, как ведет себя функция в вычисляемом и методе

Компьютерная

В первый раз выполнения будет выполнен код внутри функции, и vuejs сохранит значение счетчика в кеше (для более быстрого доступа). Но когда мы снова вызываем функцию, vuejs больше не будет выполнять код, написанный внутри этой функции. Сначала проверяются любые изменения, внесенные в счетчик или нет. Если будут внесены какие-либо изменения, то только он повторно выполнит код, который находится внутри этой функции. Если в счетчике нет изменений, vuejs больше не будет выполнять функцию. Он просто вернет предыдущий результат из кэша.

Метод

Это так же, как обычный метод в JavaScript. Каждый раз, когда мы вызываем метод, он всегда выполняет код внутри функции независимо от изменений, внесенных в счетчик.

Метод всегда повторно выполняет код независимо от изменений в коде. где as computed будет выполнять код повторно только в том случае, если изменилось одно из значений зависимости. В противном случае он выдаст нам предыдущий результат из кэша без повторного выполнения.

Ответ 5

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

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

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

методы

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

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

Ответ 6

Вот разбивка этого вопроса.

Когда использовать методы

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

Когда использовать вычисляемые свойства

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