Vue 속성 계산 학습 노트

본 고 는 Vue 가 속성 을 계산 하 는 학습 노트 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
① 템 플 릿 안의 표현 식 은 실제 적 으로 간단 한 연산 에 만 사용 되 고 복잡 한 논리 에 대해 컴퓨터 속성 을 사용 합 니 다.
② 기본 예:

<div id = "example"> 
 <p>Original message:"{{message}}"</p> 
 <p>Computed reversed message:"{{reversedMessage}}"</p> 
</div> 

var vm = new Vue({ 
 el:"#example", 
 data:{ 
 message:"Hello" 
 }, 
 computed:{ 
 //a computed getter 
 reversedMessage:function(){ 
  //'this' points to the vm instance 
  return this.message.split('').reverse().join('') 
 } 
 } 
}) 

여기 서 우 리 는 컴퓨터 속성 reversedMessage 를 설명 합 니 다.우리 가 제공 하 는 함 수 는 속성 vm.reversedMessage 의 getter 로 사 용 될 것 입 니 다.
③ 컴퓨터 캐 시 vs 방법
표현 식 의 method 를 호출 하여 같은 효 과 를 얻 을 수 있 습 니 다:

<p>Reversed message:"{{reversedMessage}}"</p> 

//in component 
methods:{ 
 reversedMessage:function(){ 
 return this.message.split('').reverse()/join('') 
 } 
} 

같은 함 수 를 컴퓨터 속성 이 아 닌 하나의 method 로 정의 할 수 있 습 니 다.최종 결과 에 대해 서 는 두 가지 방식 이 확실히 같다.그러나 서로 다른 컴퓨터 속성 은 그들의 의존 을 바탕 으로 캐 시 를 한다.계산 속성 은 관련 의존 이 바 뀌 었 을 때 만 값 을 다시 구 할 수 있 습 니 다.이것 은 message 가 바 뀌 지 않 았 다 면 reversedMessage 계산 속성 을 여러 번 방문 하면 이전의 계산 결 과 를 즉시 되 돌려 주 고 함 수 를 다시 실행 하지 않 아 도 된다 는 것 을 의미 합 니 다.
다음 계산 속성 은 더 이상 업데이트 되 지 않 습 니 다.Date.now()는 응답 식 의존 이 아니 기 때 문 입 니 다.

computed:{ 
 now:function(){ 
 return Date.now() 
 } 
} 

다시 렌 더 링 이 발생 하면 method 호출 은 항상 이 함 수 를 실행 합 니 다.
④ computed 속성 vs watch 속성

<div id= "demo">{{fullName}}</div> 

watch：

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

computed:

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

⑤ 컴 퓨 팅 세터:
계산 속성 은 기본적으로 getter 만 있 지만 필요 할 때 setter 를 제공 할 수 있 습 니 다.

// ... 
computed: { 
 fullName: { 
 // getter 
 get: function () { 
  return this.firstName + ' ' + this.lastName 
 }, 
 // setter 
 set: function (newValue) { 
  var names = newValue.split(' ') 
  this.firstName = names[0] 
  this.lastName = names[names.length - 1] 
 } 
 } 
} 
// ... 

vm.fullName='John Doe'를 실행 할 때 setter 가 호출 됩 니 다.vm.firstName 과 vm.lastName  그 만큼 업 데 이 트 됩 니 다.
⑥ 관찰자
    데이터 변화 에 대응 하려 면 비동기 작업 이나 비용 이 많이 드 는 작업 을 수행 하 는 것 이 유용 하 다.

<div id="watch-example"> 
 <p> 
 Ask a yes/no question: 
 <input v-model="question"> 
 </p> 
 <p>{{ answer }}</p> 
</div> 

<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script> 
<script src="https://unpkg.com/[email protected]/lodash.min.js"></script> 
<script> 
var watchExampleVM = new Vue({ 
 el: '#watch-example', 
 data: { 
 question: '', 
 answer: 'I cannot give you an answer until you ask a question!' 
 }, 
 watch: { 
 //    question     ，         
 question: function (newQuestion) { 
  this.answer = 'Waiting for you to stop typing...' 
  this.getAnswer() 
 } 
 }, 
 methods: { 
 // _.debounce       lodash          。 
 //       ，        yesno.wtf/api    
 // ajax               
 //        _.debounce function (and its cousin 
 // _.throttle),   : https://lodash.com/docs#debounce 
 getAnswer: _.debounce( 
  function () { 
  var vm = this 
  if (this.question.indexOf('?') === -1) { 
   vm.answer = 'Questions usually contain a question mark. ;-)' 
   return 
  } 
  vm.answer = 'Thinking...' 
  axios.get('https://yesno.wtf/api') 
   .then(function (response) { 
   vm.answer = _.capitalize(response.data.answer) 
   }) 
   .catch(function (error) { 
   vm.answer = 'Error! Could not reach the API. ' + error 
   }) 
  }, 
  //                   
  500 
 ) 
 } 
}) 
</script>

 이 예제 에서 watch 옵션 을 사용 하면 비동기 작업 을 수행 할 수 있 습 니 다.이 작업 을 수행 하 는 빈 도 를 제한 하고 최종 결 과 를 얻 기 전에 중간 상 태 를 설정 합 니 다.이것 은 계산 속성 이 할 수 없 는 것 입 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.