집 > 기사 > 웹 프론트엔드 > Vue의 계산된 메소드와 메소드의 차이점에 대한 자세한 설명

Vue의 계산된 메소드와 메소드의 차이점에 대한 자세한 설명

亚连원래의: 2018-05-29 10:34:282362검색

이 글은 주로 Vue의 계산과 메소드의 차이점에 대한 자세한 설명을 소개하고 참고용으로 제공합니다.

Vue에서 계산은 표시해야 하는 데이터를 간단히 연결하는 데 사용할 수 있습니다

계산 및 메서드

데이터를 연결하고 표시하는 작업은 메서드를 사용하여 완료할 수도 있지만 페이지의 데이터가 변경되는 경우 , 메소드의 메소드는 다시 호출되며(불필요한 성능 소비 발생) 메소드의 메소드는 자신과 관련된 데이터가 변경될 때만 호출됩니다

간단한 인스턴스

계산된 것은 초기화 중에만 호출됩니다

계산 초기화 중에만 호출

변경된 데이터가 자체와 관련이 없더라도 데이터가 변경되면 메서드가 호출됩니다.

테스트 소스 코드

<!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>

위는 제가 모두를 위해 컴파일한 내용입니다. 앞으로 모든 사람에게 도움이 되길 바랍니다.

Vue의 계산된 메소드와 메소드의 차이점에 대한 자세한 설명

관련 기사