vue计算属性与方法对比
【摘要】 在computed选项中定义一个reversedMessage属性，它根据data中的message属性的变化自动获取反转后的message属性值。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="https://cdn.staticfile.org...
在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>
得到的运行结果：
从上述代码中我们可以看到，这里的写法和在定义方法是很类似的，所以我们完全可以在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属性是否发生了改变，方法都会重新执行一次，这无形中增加了系统的开销。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）