Vue中computed和methods的区别
Vue中computed和methods的区别computed详解computed和methods的区别computed详解computed可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。下面是一个简易的计算器，来实现乘法的操作<body><div id="app">长度：<input v-model="length" t...
·
Vue中computed和methods的区别
computed详解
computed可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。下面是一个简易的计算器，来实现乘法的操作
<body>
<div id="app">
长度：<input v-model="length" type="text" /><br /> 宽度：
<input v-model="width" type="text" /><br /> 面积：
<input v-model="areas" type="text" />
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
length: '',
width: '',
},
computed: {
areas: function() {
console.log('调用computed')
return this.length * this.width
}
}
})
</script>
</body>
当在长度文本框和宽度的文本框里输入值的时候，面积会自动给出。这里的 computed 的操作比较简单，返回值也比较好写。但当遇到比较麻烦的操作时，我们就需要返回自定义的返回值。
<body>
<div id="app">
总价:<input v-model="prices" type="text"/>
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
package1: [
{
name: 'iPhone 7',
price: 7199,
count: 2
},
{
name: 'iPad',
price: 2888,
count: 1
}
],
package2: [
{
name: 'apple',
price: 3,
count: 5
},
{
name: 'banana',
price: 2,
count: 10
}
]
},
computed: {
prices: function() {
var prices = 0
for (var i = 0; i < this.package1.length; i++) {
prices += this.package1[i].price * this.package2[i].count;
}
for (var i = 0; i < this.package2.length; i++) {
prices += this.package2[i].price * this.package2[i].count;
}
return prices
}
}
})
</script>
</body>
自定的 prices 的几个值要保持一致，而且不能与 data 重复，也不需要在 data 里声明。
computed和methods的区别
我们用 computed 属性和 methods 方法编写一个计算器的乘法与加法计算。
<body>
<div id="app">
长度：<input v-model="length" type="text" /><br /> 宽度：
<input v-model="width" type="text" /><br /> 面积：
<input v-model="areas" type="text" />
<button @click="add()">+</button><br /> 和的值为：
<input v-model="num" />
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
length: '',
width: '',
num: ''
},
computed: {
areas: function() {
console.log('调用computed')
let areas = 0
areas = this.length * this.width
return areas
/*console.log("computed被调用了")*/
}
},
methods: {
add: function() {
console.log('调用methods')
this.num = parseInt(this.length) + parseInt(this.width)
},
}
})
</script>
</body>
- 用 computed 属性方法编写的逻辑运算，在调用时直接将返回时 areas 视为一个变量值就可使用，无需进行函数调用。computed 具有缓存功能，在系统刚运行的时候调用一次。只有只有当计算结果发生变化才会被调用。比如，我们在长度框与宽度框更改值的时候每次更改 computed 都会被调用一次，很浪费资源。
- 用 methods 方法编写的逻辑运算，在调用时 add() 一定要加“()”，methods 里面写的多位方法，调用方法一定要有（）。methods方法页面刚加载时调用一次，以后只有被调用的时候才会被调用。我们在长度框和宽度框的值输入完以后，点击“+” methods 方法调用一次。这里很明显我们采用 methods 会更节省资源。
目前来看 computed 属性的优势还是没有体现出来，我们再举一个例子。
<body>
<div id="app">
{{ reversedText }}
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
text: '123,456'
},
computed: {
reversedText: function() {
return this.text.split(',').reverse().join(',');
}
}
})
</script>
</body>
这个输出的结果就是 456,123
<body>
<div id="app">
{{ reversedText() }}
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
text: '123,456'
},
methods: {
reversedText: function() {
return this.text.split(',').reverse().join(',');
}
}
})
</script>
</body>
输出的结果也是 456,123 但两者之间的差别就是在计算结果不发生改变的情况下，computed 的方法只被调用了一次，即便是多处多次调用，computed 也只被调用一次，这就是 computed 缓存的优势。那么在哪些情况下更适合使用 computed ？一般使用简单的表达式对内容进行简单的转换与使用过滤器对内容进行简单的转换用的比较多。
前往低代码交流专区
更多推荐
53
0- 0
已为社区贡献4条内容
所有评论(0)