Vue 30일 - 메소드 및 계산 속성

18272 단어 vuewebdevjavascript

This article is a chapter from 30 Days of Vue, a free resource that introduces the Vue.js framework in 30 bite sized morsels! You can view and download all the articles directly from the website - https://www.fullstack.io/30-days-of-vue/.


방법


Vue 인스턴스의 메서드는 일반 JavaScript 함수와 유사하며 명시적 호출 시에만 계산됩니다.우리는 사용 방법이 아니라 템플릿에 예상된 기능 변경 사항을 연결할 수 있다.
우리 예를 하나 봅시다.문자열에서 일련의 문자를 반전하는 데 사용되는 Vue 문서의 예제를 다시 사용합니다.먼저 message 속성을 포함하는 Vue 인스턴스를 만듭니다. 이 속성의 값은 'Greetings!'입니다.
new Vue({
  el: '#app',
  data: {
    message: 'Greetings!',
  },
});
템플릿에서 message을 직접 귀속시키고 그 반향 상태에서 message을 귀속합니다.속성을 문자 그룹(message), 반전 그룹의 요소(.split(''))로 나누고, 반전 그룹을 하나의 문자열(.reverse())에 다시 연결하여 .join('')의 값을 반전시킬 것입니다.
<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet"
      href="https://unpkg.com/bulma/css/bulma.css" />
  </head>

  <body>
    <div id="app">
      <div class="card">
        <header class="card-header card-header-title">
          <span>Original:</span>
          {{ message }}
        </header>

        <header class="card-header card-header-title">
          <span>Reversed:</span>
          {{ message.split('').reverse().join('') }}
        </header>
      </div>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
  </body>
</html>
Bulma에서 제공한 양식을 통해 우리의 간단한 응용 프로그램은 다음과 같다.

위와 같이 기능 변경 자체를 내연적으로 지정하는 것은 틀린 것이 아니다.그러나 예상된 변경이 더 이해하기 어려워질 때 방법은 일반적으로 사용하기에 더욱 적합하다.
위의 예제를 message 문자열 반전을 위해 Vue 인스턴스에서 사용하는 방법으로 변경할 수 있습니다.
new Vue({
  el: '#app',
  data: {
    message: 'Greetings!',
  },
  methods: {
    reverseString(string) {
      return string.split('').reverse().join('');
    },
  }
});
이 방법의 이름은 reverseString으로 유효한 하중이 필요합니다.템플릿에서 이 방법을 설명하고 message 속성을 유효한 부하로 전달할 수 있습니다.
<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet"
      href="https://unpkg.com/bulma/css/bulma.css" />
  </head>

  <body>
    <div id="app">
      <div class="card">
        <header class="card-header card-header-title">
          <span>Original:</span>
          {{ message }}
        </header>

        <header class="card-header card-header-title">
          <span>Reversed:</span>
          {{ reverseString(message) }}
        </header>
      </div>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
  </body>
</html>
우리의 사용자 인터페이스는 이전과 같이 메시지 메시지와 역방향 버전을 아래에 표시합니다.

기능 측면- 위의 두 예는 같은 기능을 실현했다.방법은 틀이 더욱 깨끗하고 이해하기 쉽기 때문에 더욱 적합할 수 있다.
우리는 또 다른 속성(computed 속성)을 사용하여 상술한 것과 같은 결과를 실현할 수 있다.

속성 계산


계산 특성은 보기에 표시해야 하는 정보를 처리하는 복잡한 계산에 사용됩니다.같은 간단한 응용 프로그램을 구축하는 세 번째 교체에서 우리는 reverseMessage이라는 계산 속성을 도입하여 message의 데이터 속성을 간단하게 반전시킬 것이다.
new Vue({
  el: '#app',
  data: {
    message: 'Greetings!',
  },
  computed: {
    reverseMessage() {
      return this.message.split('').reverse().join('');
    },
  }
});
템플릿에서 다른 데이터 속성을 렌더링하는 것처럼 reverseMessage을 렌더링하여 속성 값을 계산할 수 있습니다.
<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet"
      href="https://unpkg.com/bulma/css/bulma.css" />
  </head>

  <body>
    <div id="app">
      <div class="card">
        <header class="card-header card-header-title">
          <span>Original:</span>
          {{ message }}
        </header>

        <header class="card-header card-header-title">
          <span>Reversed:</span>
          {{ reverseMessage }}
        </header>
      </div>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
  </body>
</html>
이 기능을 사용하면 필요에 따라 애플리케이션이 실행됩니다.

이것은 반환값을 계산 속성이나 사용 방법으로 대체하는 데 어떤 차이가 있는지 문제를 일으켰다.

방법 및 계산 속성


위의 예에서 하나의 방법이나 하나의 계산 속성을 사용하면 거의 똑같은 결과를 얻을 수 있다.계산 속성을 사용하는 관건적인 차이점은 계산 속성은 그들이 의존하는 의존항을 바탕으로 캐시하는 것이다.
만약 우리가 성명한 reverseMessage의 계산 속성을 본다면, 우리는 그것이 데이터 의존성-message 속성을 가지고 있음을 볼 수 있다.
computed: {
  reverseMessage() {
    return this.message.split('').reverse().join('');
  },
}
reverseMessage의 값은 message의 데이터 속성에 직접 달려 있다.message의 값이 변경되면 reverseMessage도 변경됩니다.종속 데이터 속성(message)이 변하지 않는 한 (즉 변하지 않는 것), 여러 번 호출된 계산 속성(reverseMessage)은 항상 같은 캐시 값을 되돌려주기 때문에 계산 속성은 매우 유용하다.
시각적으로 간단한 예를 봅시다.computedproperty 함수에 console.log() 메시지를 놓을 수 있습니다. 함수가 실행될 때 알림:
computed: {
  reverseMessage() {
    console.log('computed function is run!');
    return this.message.split('').reverse().join('');
  },
}
템플릿에서 reverseMessage의 계산 속성을 여러 번 렌더링할 수 있습니다.
<div id="app">
  <div class="card">
    <header class="card-header card-header-title">
      <span>Original:</span>
      {{ message }}
    </header>
  </div>

  <div class="card">
    <header class="card-header card-header-title">
      <span>Reversed:</span>
      {{ reverseMessage }}
    </header>
  </div>

  <div class="card">
    <header class="card-header card-header-title">
      <span>Reversed:</span>
      {{ reverseMessage }}
    </header>
  </div>

  <div class="card">
    <header class="card-header card-header-title">
      <span>Reversed:</span>
      {{ reverseMessage }}
    </header>
  </div>
</div>
응용 프로그램을 실행하고 브라우저 콘솔을 열면 console.log() 메시지가 한 번만 기록됩니다.
reverseMessage 속성을 처음 계산하면 값이 캐시됩니다.reverseMessage의 값을 호출할 때마다 message의 속성은 변경되지 않기 때문에 캐시 결과를 되돌려주고 계산 함수를 다시 실행할 필요가 없습니다.
만약 우리가 비슷한 예시를 반복하지만, 템플릿에서 여러 번 방법을 호출하면, 방법을 설명할 때마다 console.log() 메시지를 실행합니다.

한 마디로 하면 계산 속성을 대체하는 방법을 사용할 수 있지만 만약에 우리가 데이터 속성에서 값을 계산하려고 한다면 기본적으로 계산 속성을 사용해야 한다.일단 우리의 응용 프로그램이 무수한 속성을 가지기 시작하고 모든 파생 기능의 계산 비용이 약간 높을 수 있으며, 캐시는 우리의 응용 프로그램의 성능을 향상시키는 데 도움을 줄 수 있다.
다음 표에서는 사용 방법 또는 계산 속성 간의 주요 차이점을 강조 표시합니다.

좋은 경험의 법칙을 따르다.
  • 은 변경 사항(예를 들어 단추를 누르거나 폼을 제출하는 등)에 응답하거나 실례에서 현식 기능 변경(예를 들어 생명주기 연결에서 호출하는 방법)을 실행할 때 사용됩니다.
  • 은 계산 속성을 사용하여 데이터 조작을 합니다. 예를 들어 실례의 정렬되지 않은 그룹에서 정렬된 그룹을 만듭니다.
    • 만약 당신에게 어떤 문제가 있으면 언제든지 평론을 발표해 주십시오. 나는 내가 할 수 있는 대로 대답할 것입니다.나도 항상 트위터에서 쓸 수 있어 -!
    니가 Vue의 초보라면js와 기타 관심 있는 화제 - 수시로 https://www.fullstack.io/30-days-of-vue/을 보십시오.
    rest 푸시 구현--jesey SSE
    svn은 hooks를 이용하여 원격 서버의 프로젝트를 자동으로 업데이트합니다

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage