Vue의 계산된 속성에 대해 이야기해 보겠습니다.

1. 계산 속성 계산

1.1 계산 속성 계산이란 무엇입니까

⭐⭐
종속성 캐시를 기반으로 하며 관련 종속성이 변경될 때만 업데이트됩니다. 공식 문서에는 다음과 같이 나와 있습니다. 반응형 데이터가 포함된 복잡한 논리의 경우 계산된 속성을 사용해야 합니다. (학습 동영상 공유: vue 동영상 튜토리얼)

1.2. 복잡한 데이터 처리 - 계산됨

⭐⭐
문자열 연결, 점수 통과 여부, 텍스트 조각의 메시지 녹음은 계산됨을 사용하여 구현됩니다.

<div id="app">
      <!-- 插值语法表达式直接进行拼接 -->
      <!-- 1.拼接姓名 -->
      <h2>{{fullname}}</h2>

      <!-- 2.显示分数及格或不及格 -->
      <h2>{{scorelevel}}</h2>

      <!-- 3.反转单词 -->
      <!-- reverse针对于数组，先用split转为数组，在用reverse -->
      <h2>{{reversetext}}</h2>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            // name
            firstName: "kk",
            lastName: "cc",

            // score
            score: 99,

            // 文本中单词反转
            message: "I love stydy Vue3",
          };
        },
        computed: {
          fullname() {
            return this.firstName + " " + this.lastName;
          },
          scorelevel() {
            return this.score >= 60 ? "及格" : "不及格";
          },
          reversetext() {
            return this.message.split(" ").reverse().join(" ");
          },
        },
      });
      app.mount("#app");

물론 콧수염 보간 구문과 방법도 사용할 수 있지만 복잡한 데이터 처리에는 계산을 사용하는 경우가 많으며 쓰기 방법이 더 명확하고 계산된 속성이 캐시됩니다

1.3.

⭐⭐

은 종속성에 따라 캐시됩니다.
데이터가 변경되지 않으면 계산된 속성을 다시 계산할 필요가 없습니다.
그러나 종속 데이터가 변경되면 계산된 속성이 계속 사용됩니다. Recalculate;

&tinsp;

이것이 우리가 복잡한 데이터를 처리할 때 계산을 선호하는 이유입니다

• 동일한 수의 fullName을 사용할 때 메소드는 세 번 실행되고 한 번 계산됩니다. 계산 속성은 캐시됩니다

  
  

1.4. 계산된 속성은 setter 및 getter를 계산합니다.

⭐⭐

대부분의 경우 계산된 속성에는 하나의 getter 메서드만 필요하며 현재 계산된 속성에는 함수의 속성값

계산된 속성의 값을 설정하려면 계산된 속성에 대한 setter 메서드를 설정할 수 있습니다

computed: {
          // 语法糖
          fullname() {
            return this.firstname + " " + this.lastname;
          },

          // 完整写法
          fullname: {
            get: function () {
              return this.firstname + " " + this.lastname;
            },
            set: function (value) {
              const names = value.split(" ");
              this.firstname = names[0];
              this.lastname = names[1];
            },
          },

[권장 관련 동영상 튜토리얼:

vuejs 입문 튜토리얼, 웹 프론트 소개- 끝]

위 내용은 Vue의 계산된 속성에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!