vue计算属性与方法对比

静Yu
59 阅读1分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情

在computed选项中定义一个reversedMessage属性，它根据data中的message属性的变化自动获取反转后的message属性值。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div>在文本框中输入文字后得到反转的值</div>
    输入的值：<input type="text" v-model="message"></input><br>
    反转的值：{{reversedMessage}}
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:""
        },
        computed:{
          reversedMessage(){
              //这里的this指向当前的vm实例
              return this.message.split('').reverse().join('')
          }
        },
        methods: {
        }
    })
</script>
</body>
</html>

得到的运行结果：

image.png

从上述代码中我们可以看到，这里的写法和在定义方法是很类似的，所以我们完全可以在methods中定义一个方法来实现这个需求。只需要做简单的修改就可以。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div>在文本框中输入文字后得到反转的值</div>
    输入的值：<input type="text" v-model="message"></input><br>
    反转的值：{{reversedMessage()}}
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:""
        },
        methods: {
            reversedMessage(){
                //这里的this指向当前的vm实例
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>
</body>
</html>

在使用计算属性的时候，是把计算属性的名称直接当作属性来使用，而并不会把计算属性当作一个方法去调用。作为方法调用直接写在{{}}里，方法后面需要写().

为什么要使用计算属性而不是去定义一个方法呢？

因为，计算属性是基于它们的依赖进行缓存的。即只有在相关依赖发生改变时才会重新求值。例如在上述代码中，只要message的属性值没有发生改变，无论什么时候使用到reversedMessage属性，都会立即返回之前的计算结果，而不必再次执行函数。
反之，如果使用方法的形式实现，当使用到reversedMessage方法时，无论message属性是否发生了改变，方法都会重新执行一次，这无形中增加了系统的开销。

avatar
文章
阅读
粉丝