Vue.js는 계산된 속성을 학습합니다.

서문

계산된 속성은 값이 다른 값에 종속된다는 것을 선언적으로 설명하는 데 사용됩니다. 템플릿의 계산된 속성에 데이터를 바인딩하면 Vue는 종속 값으로 인해 계산된 속성이 변경될 때 DOM을 업데이트합니다. 이 기능은 매우 강력하며 코드를 더욱 선언적이고 데이터 중심적이며 유지 관리하기 쉽게 만들 수 있습니다.

Vue를 사용하기 시작하면 템플릿의 모든 데이터가 데이터 속성에 저장됩니다. 때로는 데이터 속성에 너무 많은 변수가 있으면 한 번만 사용되는 일부 변수가 나중에 같은 그룹의 동료들이 계산된 속성을 사용하는 것을 보고 API를 다시 확인해보니 이 상황에서 가장 좋은 것이 계산되는 것을 발견했습니다.

1. Computed는 템플릿을 명확하게 유지할 수 있습니다. 논리 연산을 추가하는 대신 템플릿에 표시하고 바인딩해 보세요.

2. 계산 사용의 또 다른 장점은 다른 데이터 속성이 변경되면 자동으로 변경된다는 것입니다.

예를 들어 공식 문서의 예:

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar',
 fullName: 'Foo Bar'
 }
})
vm.$watch('firstName', function (val) {
 this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) {
 this.fullName = this.firstName + ' ' + val
})

watch를 사용하면 코드 중복이 발생합니다. 예를 들어 라이브 방송 중 상태 변경을 사용하여 비디오와 같은 상위 속성을 표시할지 여부를 계산할 수 있습니다

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar'
 },
 computed: {
 fullName: function () {
  return this.firstName + ' ' + this.lastName
 }
 }
})

요약

위 내용은 모두 Vue.js의 계산된 속성에 관한 것입니다. 이 글의 내용이 모든 사람의 공부나 업무에 도움이 되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요. 의사소통하기.

Vue.js의 계산 속성 학습과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!