한 기사를 통해 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: '#app',
  data: {
    msg: 'Hello',
    name: 'shanshan'
  },
  computed: {
    reversedMsg: function () {
      console.log('计算执行啦');
      return this.msg.split('').reverse().join('');
    }
  }
})
vm.name = 'duyi';

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

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

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

속성 심층 계산

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

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

getter Read

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

언제 실행되나요?

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

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

setter 설정

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

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

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

Practice_이름 필터

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

Practice_모든 제품 선택

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

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

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