Vue中的方法与计算

2020/10/20 12:41 · javascript ·  · 0评论

Vue.js中的方法和计算值之间的主要区别是什么?

它们看起来相同且可互换。

Vue中的计算值和方法有很大不同,在大多数情况下绝对不能互换。

计算财产

计算值更合适的名称是计算属性实际上,当实例化Vue时,将使用getter有时是setter将计算出的属性转换为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的文档非常好,并且易于访问。我推荐它。

@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个计算属性执行相同的任务。方法addToAmethodaddToBmethod与所计算的属性addToAcomputedaddToBcomputed所有附加20(即,age值)对任一ab关于方法,每次对列出的任何属性执行操作时,都调用它们,即使一个特定方法的依存关系未更改。对于计算出的属性,仅当依赖项已更改时才执行代码;例如,引用A或B的特定属性值之一将分别触发addToAcomputedaddToBcomputed

方法和计算的描述似乎很相似,但是正如@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>

解释的结果

当我单击“添加到A”按钮时,将调用所有方法(请参见上面的控制台日志屏幕结果),该addToBmethod()方法也将执行,但是我没有按下“添加到B”按钮;引用B的属性值未更改。如果我们决定单击“添加到B”按钮,则会出现相同的行为,因为同样会独立于依赖项更改来调用这两种方法。在这种情况下,这是一种不好的做法,因为即使没有更改依赖关系,我们也会每次执行这些方法。这确实是资源消耗,因为没有用于未更改的属性值的缓存。

方法
按钮方式

计算属性案例演示

new Vue({
    el: '#vue-app',
    data: {
        a: 0,
        b: 0,
        age: 20
    },

    computed: {
        addToAcomputed: function(){
            console.log('addToAcomputed');
            return this.a + this.age;
        },
        addToBcomputed: function(){
            console.log('addToBcomputed');
            return this.b + this.age;
        }
    }
});
<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>VueJS Computed properties - 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>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>

解释的结果

当我单击按钮“添加到A”时,仅addToAcomputed调用了计算属性,因为,正如我们已经说过的那样,仅当依赖项已更改时,才执行计算属性。而且由于我没有按下按钮“添加到B”并且B的age属性值未更改,因此没有理由调用和执行计算的属性addToBcomputed因此,从某种意义上讲,计算出的属性像某种缓存一样,为B属性保持“相同”值。在这种情况下,这是一种很好的做法

计算的
计算按钮

来自 docs

..computed属性根据其依赖关系进行缓存。仅当某些依赖项已更改时,计算属性才会重新评估。

另一方面,如果您想缓存数据,请使用计算属性,而如果您不希望缓存数据,请使用简单的Method属性。

这是这个问题的细分。

何时使用方法

  • 对DOM中发生的某些事件做出反应
  • 当组件中发生某些事情时调用函数。
  • 您可以从计算的属性或观察程序中调用方法。

何时使用计算属性

  • 您需要从现有数据源中组合新数据
  • 您有一个在模板中使用的变量,该变量是根据一个或多个数据属性构建的
  • 您希望将复杂的嵌套属性名称简化为更易读和易于使用的名称(但是在原始属性更改时进行更新)
  • 您需要引用模板中的值。在这种情况下,最好创建一个计算属性,因为它已缓存。
  • 您需要聆听多个数据属性的更改

计算与方法之间的差异之一。假设我们有一个函数将返回计数器值。(counter只是变量)。让我们看看函数在计算方法中的行为

已计算

第一次执行时,函数内部的代码将被执行,vuejs会将计数器值存储在缓存中(以加快访问速度)。但是,当我们再次调用该函数时,vuejs将不会再次执行该函数内部编写的代码。它首先检查是否对计数器进行了任何更改。如果进行了任何更改,则仅它将重新执行该函数内部的代码。如果没有更改计数器,则vuejs将不会再次执行该功能。它只会从缓存中返回先前的结果。

方法

就像javascript中的常规方法一样。每当我们调用该方法时,无论对计数器所做的更改如何,它都将始终在函数内部执行代码。

不管代码中的更改如何,方法将始终重新执行代码。仅当其中一个依赖项的值发生更改时,计算的内容才会重新执行代码。否则,它将为我们提供缓存中的先前结果,而无需重新执行

计算属性

计算属性也称为计算值。这意味着它们会更新,并且可以随时更改。同样,它缓存数据,直到数据更改为止。实例化Vue时,将计算出的属性转换为属性。

我想分享的一件事是,您无法在计算属性中传递任何参数,这就是为什么在调用任何计算机属性时都不需要括号的原因。

方法

方法与功能相同,工作方式相同。此外,除非您调用方法,否则它什么也不做。而且,像所有javascript函数一样,它接受参数,并且每次调用时都会重新评估。之后,他们将无法缓存值

在调用括号的方法中,您可以在其中发送一个或多个参数。

偶然发现了同样的问题。对我来说,这样更清楚:

  1. 当Vue.js看到v-on directive后跟一个方法时,它确切知道要调用哪个方法以及何时调用它。
<button v-on:click="clearMessage">Clear message</button> // @click
// method clearMessage is only called on a click on this button

<input v-model="message" @keyup.esc="clearMessage" @keyup.enter="alertMessage" />
/* The method clearMessage is only called on pressing the escape key
and the alertMessage method on pressing the enter key */
  1. 如果在没有的情况下v-on directive调用方法,则每次在更新DOM的页面上触发事件(或仅需要重新呈现页面的一部分),都会调用该方法即使该方法与触发事件无关。
<p>Uppercase message: {{ messageUppercase() }}</p>
methods: {
   messageUppercase() {
      console.log("messageUpercase");
      return this.message.toUpperCase();
   }
}
/* The method `messageUppercase()` is called on every button click, mouse hover 
or other event that is defined on the page with the `v-on directive`. So every
time the page re-renders.*/
  1. 当更改其函数定义中this单词所引用的属性值时,才调用Computed属性
<p>Uppercase message: {{ messageUppercase }}</p> 
data() {
 return {
    message: "I love Vue.js"
   }
 },
computed: {
 messageUppercase() {
    console.log("messageUpercase");
    return this.message.toUpperCase();
 }
}
/* The computed property messageUppercase is only called when the propery message is
changed. Not on other events (clicks, mouse hovers,..) unless of course a specific 
event changes the value of message.  */

这里的好处是,如果computed未使用调用方法,则最佳做法是使用属性v-on directive

本文地址:http://javascript.askforanswer.com/vuezhongdefangfayujisuan.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!