Home >Web Front-end >JS Tutorial >The difference between using computed and methods in Vue
This time I will bring you the difference between the use of computed and methods in Vue. What are the precautions for using computed and methods in Vue? The following is a practical case, let's take a look.
Computed in Vue can be used to simply splice the data that needs to be displayed computed and methodsThe task of splicing and displaying data is also It can be done with methods, but when the data on the page changes, the methods in methods will be called again (causing unnecessary performance consumption), and the methods in methods will only be called when the data related to itself changesA simple example computed is only called during initializationcomputed is only called during initializationmethods will It is called when the data changes, even if the changed data has nothing to do with itselfTest source code
<!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> <p id="root"> </p> <script> var vm = new Vue({ el: "#root", data: { name: "zhaozhao", age: 13, hobby: 'Python', nameAgeStyle: { fontSize: "20px", color: "#0c8ac5" } }, template: `<p> <p v-bind:style="nameAgeStyle">computed方式渲染: {{nameAndAge}}</p> <p v-bind:style="nameAgeStyle">methods 方式渲染: {{getNameAndAge()}}</p> <br> <input type="text" v-model="hobby"> <p>爱好: {{hobby}}</p> <p>{{noUse()}}</p> </p>`, 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>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related topics on the PHP Chinese website article! Recommended reading:
jQuery Ajax verification user name steps detailed explanation
v-show adding expression steps detailed explanation
The above is the detailed content of The difference between using computed and methods in Vue. For more information, please follow other related articles on the PHP Chinese website!