vue 구성 요소 데이터가 함수여야 하는 이유

vue 구성 요소 데이터가 함수여야 하는 이유

Vue 구성 요소에 대해 자세히 알아보고 데이터가 다소 혼란스러운 기능이어야 하는 이유에 대한 설명을 찾아 보십시오.

루트 인스턴스

var vm = new Vue({
  el: '#example',
  data: {
    message: 'here data is a property'
  }
})

구성 요소

var vm = new Vue({
  el: '#example',
  data: function () {
     return {
       counter: 0
     }
  }
})

Vue 문서에서는 각 구성요소에 글로벌 카운터 변수를 할당하여 이러한 차이를 설명하고 각 구성요소가 동일한 데이터를 공유한다는 사실에 대해 놀라워한다.또한 그들은 왜 그들이 이미 여기서 함수를 사용하는지 설명하지 않는다.

var data = { counter: 0 }

Vue.component('simple-counter', {
  template: '<div>{{ counter }}</div >',
  data: function () {
    return data  
  }
})

물론 데이터는 지금 공유된다.

<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>

글로벌 개체를 데이터 소스로 참조할 때 구성 요소에 자체 데이터가 없는 것은 놀랄 일이 아니다.그것은 또한 데이터가 속성으로 있는 루트 Vue 인스턴스에도 적용된다.

var mydata = { counter: 0 }

var vm1 = new Vue({
  el: '#example1',
  data: mydata
})

var vm2 = new Vue({
  el: '#example2',
  data: mydata
})

그래서 나는 왜 구성요소가 데이터 속성을 가질 수 없는가에 대해 여전히 의문이 남는다.

내가 이해한 바로는 기억력을 아끼기 위해서입니다.

각도 2 또는 (때론) 반응과 같은 많은 프레임워크는 구성요소의 각 인스턴스를 별도의 개체로 만든다.이는 각 부품에 필요한 모든 것이 모든 부품에 대해 초기화됨을 의미한다.그러나 일반적으로 각 초기화에 대해 구성 요소의 데이터만 별도로 유지하면 된다.방법 등은 그대로 유지된다.

Vue는 데이터를 객체를 반환하는 함수가 됨으로써 그러한 함정을 피한다.그것은 전체 구성요소를 완전히 재인기할 필요 없이 개별 구성요소가 별도의 내부 상태를 가질 수 있도록 한다.방법, 계산된 속성 정의 및 라이프사이클 후크는 한 번만 생성 및 저장되며 구성 요소의 모든 인스턴스에 대해 실행된다.

이것 보기

데이터 옵션은 항상 새로운 객체를 반환하는 구성요소의 맥락에서 함수가 되어야 한다.

이 예방책은 vue에 의해 만들어졌다.따라서 데이터 옵션에서 개체를 직접 정의할 때마다 vue는 실수를 범한 것으로 파악된다.

구성요소는 그 상태를 직접 변이할 수 없다.이것은 구성 요소들이 그들 자신의 상태를 가지고 있지 않은 나쁜 일들을 우리가 망치고 하는 것을 막는다.

vue가 이 예방 조치를 취하지 않으면 구성 요소에서 소유하는 다른 구성 요소를 변경할 수 있으며 이는 보안 문제가 될 수 있다.

설명서의 예:

그래도 왜 규칙이 존재하는지 이해하는 것은 좋으니 속이자.

<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>
var data = { counter: 0 }

Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // data is technically a function, so Vue won't
  // complain, but we return the same object
  // reference for each component instance
  data: function () {
    return data
  }
})

new Vue({
  el: '#example-2'
})

세 개의 구성 요소 인스턴스가 모두 동일한 데이터 개체를 공유하므로, 하나의 카운터를 증가시키면 모두 증가!와우. 대신 새로운 데이터 객체를 반환하여 이 문제를 해결하자.

data: function () {
  return {
    counter: 0
  }
}

이제 우리의 모든 카운터는 각자 내부 상태를 가지고 있다.

그것은 다른 데이터가 구성 요소의 모든 인스턴스 간에 공유될 것이기 때문에 기능이어야 한다. 왜냐하면 물체는 가치에 의한 호출이 아니라 참조에 의해 호출되기 때문이다.이는 글로벌 개체를 참조할 때뿐만 아니라 데이터가 개체 자체일 때도 발생한다.데이터가 개체를 반환하는 공장 기능인 경우 이 개체는 글로벌 데이터에 참조만 전달하는 대신 구성 요소의 새 인스턴스를 마운트할 때마다 처음부터 새로 생성된다.

왜냐하면 Vue가 데이터를 초기화하면

function initData(vm){

  let data = vm.$options.data

  data = vm._data = typeof data === ‘function’ ? getData(data, vm) : data || {}
   /*

     Because here，data is a reference from vm.$options.data， 
     if data is an object, 
     when there are many instances of this Component,
     they all use the same `data`


      if data is a function, Vue will use method getData( a wrapper to executing data function, adds some error handling)

      and return a new object, this object just belongs to current vm you are initializing

    */

   ……


  // observing data
  observe(data, true)

}

Vue가 데이터 속성을 함수로 강제하는 이유는 구성 요소의 각 인스턴스가 자체 데이터 개체를 가져야 하기 때문이다.그렇게 하지 않으면 모든 인스턴스가 동일한 객체를 공유하게 되고 우리가 어떤 것을 바꿀 때마다 모든 사례에 반영될 것이다.

var vm = 새 Vue({엘: '##',**data: 함수() {{을 돌려주다.카운터: 0}**}

참조URL: https://stackoverflow.com/questions/46826709/why-must-vue-component-data-be-a-function