Home > Article > Web Front-end > Detailed explanation of the difference between computed and methods in Vue_vue.js

Detailed explanation of the difference between computed and methods in Vue_vue.js

不言Original: 2018-03-31 17:29:541354browse

This article mainly introduces the detailed explanation of the difference between computed and methods in Vue. The content is quite good, so I will share it with you now and give it as a reference. Let’s take a look together

computed in Vue can be used to simply splice the data that needs to be displayed

computed and methods

Splicing display Data tasks can also be completed using 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 themselves changes. Called

A simple instance

computed is only called at initialization

Methods will be called when the data changes, even if the changed data has nothing to do with itself

Test 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: &#39;Python&#39;,
        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(&#39;调用computed&#39;);
          return `${this.name} ==> ${this.age}`;
          }
        }
      },
      methods: {
        getNameAndAge() {
          console.log(&#39;调用methods&#39;);
          return `${this.name} ==> ${this.age}`;
        },
        noUse(){
          console.log("=methods==nouse==");
        }
      }
    })
  </script>
</body>
</html>

The above is the detailed content of Detailed explanation of the difference between computed and methods in Vue_vue.js. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement ajax verification function using SSM integration frameworkNext article：How to implement ajax verification function using SSM integration framework

See more

Detailed explanation of the difference between computed and methods in Vue_vue.js

Related articles