本篇文章为大家展示了computed与methods在Vue中的区别是什么，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
computed and methods
拼接展示数据的任务, 也可以用methods完成, 但当页面的数据变化时, methods中的方法会被重新调用(产生不必要的性能消耗), 而methods内的方法只有和自身有关的数据变化时才会被调用
computed只在初始化时被调用
methods会在数据变化时被调用, 即使变动的数据与自身无关
测试源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>computed的使用</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> </head> <body> <div id="root"> </div> <script> var vm = new Vue({ el: "#root", data: { name: "zhaozhao", age: 13, hobby: 'Python', nameAgeStyle: { fontSize: "20px", color: "#0c8ac5" } }, template: `<div> <div v-bind:>computed方式渲染: {{nameAndAge}}</div> <div v-bind:>methods 方式渲染: {{getNameAndAge()}}</div> <br> <input type="text" v-model="hobby"> <div>爱好: {{hobby}}</div> <div>{{noUse()}}</div> </div>`, 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=="); } } }) </script> </body> </html>
上述内容就是computed与methods在Vue中的区别是什么，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
