Vue中computed与methods的区别详解_vue.js

web前端|js教程 这篇文章主要介绍了Vue中computed与methods的区别详解，内容还是觉得挺不错的，现在分享给大家，也给大家做个参考。一起过来看看吧Vue中computed可以用来简单的拼接需要展示的数据computed and methods

拼接展示数据的任务, 也可以用methods完成, 但当页面的数据变化时, methods中的方法会被重新调用(产生不必要的性能消耗), 而methods内的方法只有和自身有关的数据变化时才会被调用

一个简单的实例

computed只在初始化时被调用

computed只在初始化时被调用

methods会在数据变化时被调用, 即使变动的数据与自身无关

测试源码

var vm = new Vue({ el: "#root", data: { name: "zhaozhao", age: 13, hobby: 'Python', nameAgeStyle: { fontSize: "20px", color: "#0c8ac5" } }, template: `

computed方式渲染: {{nameAndAge}}

methods 方式渲染: {{getNameAndAge()}}

爱好: {{hobby}}

{{noUse()}}

`, computed: { nameAndAge: { get(){ console.log('调用computed'); return `${this.name} ==> ${this.age}`; } } }, methods: { getNameAndAge() { console.log('调用methods'); return `${this.name} ==> ${this.age}`; }, noUse(){ console.log("=methods==nouse=="); } } })