한 기사를 통해 Vue에서 계산된 속성을 사용하는 방법을 알아보세요.-View.js-php.cn

한 기사를 통해 Vue에서 계산된 속성을 사용하는 방법을 알아보세요.

青灯夜游

풀어 주다： 2021-12-03 19:30:56

앞으로

2602명이 탐색했습니다.

Vue로 속성을 언제 계산해야 하는지 아시나요? 계산된 속성을 어떻게 사용하나요? 다음 기사에서는 Vue 계산 속성을 이해하고 Vue 계산 속성의 기본 사용법을 소개합니다. 도움이 되기를 바랍니다.

한 기사를 통해 Vue에서 계산된 속성을 사용하는 방법을 알아보세요.

계산된 속성

때로는 템플릿에 너무 많은 논리를 넣어 템플릿이 과중해지고 유지 관리가 어려워지는 경우가 있습니다. 예를 들면 다음과 같습니다.

<div id="app">
  {{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
</div>

로그인 후 복사

이러한 상황에서는 변수 메시지를 표시하려는 뒤집힌 문자열이 여기에 있다는 것을 깨닫기 위해 잠시 살펴봐야 합니다. 또한, 뒤집힌 문자열을 여러 번 사용하려는 경우. 템플릿을 사용하면 더 번거로울 것입니다. 따라서 복잡한 논리를 다룰 때는 계산된 속성을 사용해야 합니다. [관련 권장 사항: "vue.js Tutorial"]

기본 사용법

계산된 속성은 Vue 구성 개체의 속성으로 다음과 같이 사용됩니다.

<div id="app">
   <!-- 计算属性的值可以像data数据一样，直接被使用 --> 
  {{ someComputed }}
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  computed: {
     // 返回的值，就是计算属性的值
    someComputed () {
      return &#39;some values&#39;
    }
  }
})

로그인 후 복사

예를 들어, To 문자열을 가져오고 싶습니다. 문자열을 뒤집으면 계산된 속성을 사용하여 이를 수행할 수 있습니다:

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻转字符处啊: "{{ reversedMsg }}"</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  computed: {
    reversedMsg: function () {
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})

로그인 후 복사

reversedMsg 값이 msg 값에 따라 달라지므로 msg 값을 변경하면 reversedMsg 값도 그에 따라 변경됩니다.

계산된 속성과 메서드

실제로 위에서 언급한 함수는 다음과 같은 메서드를 사용하여 구현할 수도 있습니다.

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻转字符串: "{{ reversedMsg() }}"</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  methods: {
    reversedMsg: function () {
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})

로그인 후 복사

식에서 메서드를 호출해도 동일한 효과를 얻을 수 있지만 계산된 속성을 사용하는 것에는 차이가 있습니다. 방법을 사용하는 것과 근본적인 차이점이 있습니다. 메소드를 사용할 때 페이지가 다시 렌더링될 때마다 해당 메소드가 다시 실행됩니다. 예:

<div id="app">
  <p>{{ name }}</p>
  <p>{{ reversedMsg() }}</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;,
    name: &#39;shanshan&#39;
  },
  methods: {
    reversedMsg: function () {
      console.log(&#39;方法执行啦&#39;);
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})
vm.name = &#39;duyi&#39;;

로그인 후 복사

위의 예에서 name 값이 변경되면 페이지가 다시 실행되는 것을 볼 수 있습니다. -rendered, 이 순간 콘솔에 "The method is running"이라는 문자열이 출력됩니다. 이는 reversedMsg 함수가 실행된다는 의미이지만 변경된 데이터는 아무 관련이 없기 때문에 메서드를 실행할 필요는 없습니다. 이 함수 내의 논리가 매우 복잡하다면 성능 측면에서도 일종의 소비입니다.

그러나 계산된 속성을 사용하면 다음과 같은 현상은 발생하지 않습니다.

const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;,
    name: &#39;shanshan&#39;
  },
  computed: {
    reversedMsg: function () {
      console.log(&#39;计算执行啦&#39;);
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})
vm.name = &#39;duyi&#39;;

로그인 후 복사

이때 데이터 이름을 다시 할당하면 계산된 속성이 실행되지 않는 것을 볼 수 있습니다. 따라서 계산된 속성과 메서드의 가장 중요한 차이점은 계산된 속성은 반응형 종속성을 기반으로 캐시됩니다. 계산된 속성의 값은 해당 속성이 의존하는 데이터가 변경되지 않는 한 항상 캐시에 저장됩니다. 속성에 액세스할 때마다 계산되므로 함수를 다시 실행하는 대신 캐시된 결과가 즉시 반환됩니다. 이 메서드는 매번 다시 렌더링을 트리거하는 것이며 메서드를 호출하면 항상 함수가 다시 실행됩니다.

그렇다면 캐싱은 왜 필요한가요?

거대한 배열을 탐색하고 엄청난 계산을 수행해야 하는 계산된 속성 A가 있다고 가정해 보겠습니다. 그런 다음 이 계산된 속성 A를 사용해야 합니다. 캐시가 없으면 A의 기능을 다시 실행하게 되므로 성능 오버헤드가 매우 커집니다.

속성 심층 계산

계산된 속성은 객체로 작성될 수도 있습니다. getter&setter라는 두 가지 속성이 모두 함수로 작성됩니다. 다음과 같습니다:

const vm = new Vue({
  el: &#39;#app&#39;,
  computed: {
    fullName: {
      getter () {
         // 一些代码
      },
      setter () {
         // 一些代码
      }
    }
  }
})

로그인 후 복사

getter Read

앞부분에 계산된 속성을 함수로 직접 작성하는데, 이것이 getter 함수입니다. 즉, 계산된 속성에는 기본적으로 getter만 있습니다. 이 getter는 Vue 인스턴스에 자동으로 바인딩됩니다.

언제 실행되나요?

계산된 속성을 얻으면 get 함수가 실행됩니다.

const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
      }
    }
  }
})

로그인 후 복사

setter 설정

은 선택사항이며, 계산된 속성에 값을 다시 할당할 때 set 함수가 실행됩니다. 매개변수: 재설정할 값입니다. 이 setter는 Vue 인스턴스에 자동으로 바인딩됩니다.

const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;,
    firstStr: &#39;&#39;
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
      },
      setter (newVal) {
        this.firstStr = newVal[0];
      }
    }
  }
})

로그인 후 복사

계산된 속성에 값이 할당되더라도 계산된 속성은 변경되지 않습니다. 반복하자면, 계산된 속성은 종속 반응 속성이 변경될 때만 다시 계산됩니다.

Practice_이름 필터

personArr: [
  { 
    name: &#39;&#39;, 
    src: &#39;.jpg&#39;, 
    des: &#39;颈椎不好&#39;, 
    sex: &#39;m&#39;, 
    id: &#39;056482&#39; 
  },
  { 
    name: &#39;&#39;, 
    src: &#39;.jpg&#39;, 
    des: &#39;我是谁&#39;, 
    sex: &#39;f&#39;, 
    id: &#39;157894&#39; 
  },
  { 
    name: &#39;&#39;, 
    src: &#39;.jpg&#39;, des: &#39;我长得很好看&#39;, 
    sex: &#39;f&#39;, 
    id: &#39;2849245&#39; 
  },
  { 
    name: &#39;&#39;, 
    src: &#39;.jpeg&#39;, 
    des: &#39;你没有见过陌生的脸&#39;, 
    sex: &#39;m&#39;, 
    id: &#39;348515&#39; 
  },
  { 
    name: &#39;&#39;, 
    src: &#39;.jpeg&#39;, 
    des: &#39;瓜皮刘&#39;, 
    sex: &#39;m&#39;, 
    id: &#39;478454&#39;
  }
]

로그인 후 복사

Practice_모든 제품 선택

courseList: [
  {
    poster: &#39;.jpg&#39;,
    title: &#39;&#39;,
    price: 1299,
    cart: 1,
    id: 0
  },
  {
    poster: &#39;.jpg&#39;,
    title: &#39;&#39;,
    price: 1148,
    cart: 1,
    id: 1595402664708
  },
  {
    poster: &#39;.jpg&#39;,
    title: &#39;&#39;,
    price: 1,
    cart: 1,
    id: 1596305473062
  },
  {
    poster: &#39;.jpg&#39;,
    title: &#39;&#39;,
    price: 1,
    cart: 1,
    id: 1595413512182
  },
  {
    poster: &#39;.jpg&#39;,
    title: &#39;&#39;,
    price: 12798,
    cart: 1,
    id: 1596302161181
  },
  {
    poster: &#39;.jpg&#39;,
    title: &#39;&#39;,
    price: 1,
    cart: 1,
    id: 1596300025301,
  },
]

로그인 후 복사

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 입문을 방문하세요! !

위 내용은 한 기사를 통해 Vue에서 계산된 속성을 사용하는 방법을 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!