구성 요소 렌더링 함수의 무한 업데이트 루프

구성 요소 렌더링 함수의 무한 업데이트 루프

어떻게 하는지 이해하려고 노력중이야vue컴포넌트가 동작합니다.최종 목표는 읽기 전용에 행을 추가하는 것입니다.textarea[Go!] 버튼을 클릭했을 때,현재 저는 다음과 같은 코드를 가지고 있습니다.

// Register components
Vue.component('chatarea', {
  delimiters: ['${', '}'],
  props: ['msg'],
  template: '<textarea readonly="" rows="20">${msg}</textarea>',
})


// Create a root instance
var app = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
      messages: [
        'Hello from Vue!',
        'Other line...'
      ],
  },
  methods: {
    get_msg: function () {
      return this.messages.reverse().join('\n');
    }
  }
})

이하와 같다html원하는 방식으로 렌더링됩니다. 메시지가 역순으로 표시됩니다.

  <div class="container" id="app">

    <div class="row">
      <div class="col-md-8 offset-md-2">
        <form action="/question" enctype="multipart/form-data" method="get" v-on:submit.prevent="onSubmit">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Say Something...">
            <span class="input-group-btn">
              <button class="btn btn-secondary" type="button">Go!</button>
            </span>
          </div>
        </form>
      </div>
    </div>

    <div class="row" style="">
      <div class="col-md-8 offset-md-2">
        <chatarea :msg="get_msg()"></chatarea>
      </div>
    </div>

  </div>

그러나 다음과 같은 경고가 표시됩니다.

[Vue warn] :구성요소 렌더링 함수에 무한 업데이트 루프가 있을 수 있습니다.

제가 뭔가 잘못하고 있다는 걸 알아요여기 JSFiddle이 있습니다.

템플릿 호출get_msg역방향 메시지 배열이 재계산되어 템플릿이 재실행되어 콜됩니다.get_msg,기타.

대신 computed를 사용합니다.

computed:{
  reversedMessages(){
      return this.messages.slice().reverse().join('\n');
  }
},

그리고 템플릿을 다음으로 변경합니다.

<chatarea :msg="reversedMessages"></chatarea>

예.

언급URL : https://stackoverflow.com/questions/44075085/infinite-update-loop-in-a-component-render-function