Vue에 마운트된 사용 방법

Vue.js의 마운트된 후크는 구성 요소가 처음으로 DOM에 삽입된 후 호출되어 다음을 수행하는 데 사용됩니다. 1. AJAX 요청 2. 타사 라이브러리 초기화 3. 이벤트 5. 타이머 설정. 구체적인 예로는 데이터 가져오기, 이벤트 리스너 설정, jQuery 초기화 등이 있습니다.

mounted 사용법

mounted는 Vue.js 라이프사이클 후크에서 중요한 메소드로, 컴포넌트가 실제 DOM에 처음 삽입된 후에 호출됩니다. 이 메서드는 구성 요소가 마운트된 후 다음과 같은 몇 가지 추가 작업을 수행하는 데 사용됩니다.

1. AJAX 요청

마운트된 AJAX 요청을 시작하여 서버에서 데이터를 가져올 수 있습니다. 이는 구성 요소가 로드될 때 데이터를 동적으로 채우는 데 유용합니다.

2. 타사 라이브러리 초기화

mounted 메서드를 사용하여 jQuery 또는 D3 등과 같은 타사 라이브러리를 초기화할 수 있습니다. 구성 요소가 렌더링될 때까지 이러한 라이브러리가 초기화되지 않도록 합니다.

3. 요소 연산

이벤트 리스너 설정이나 요소 크기 가져오기 등 마운트된 DOM 요소를 직접 조작할 수 있습니다. 이렇게 하면 구성 요소가 처음 렌더링될 때만 이러한 작업이 수행되므로 성능이 향상됩니다.

4. 이벤트 구독

Mounted를 사용하여 다른 구성 요소나 Vuex 저장소의 이벤트를 구독할 수 있습니다. 이를 통해 서로 다른 구성 요소 간 또는 구성 요소와 스토리지 간 통신이 가능해집니다.

5. 타이머 및 간격기

타이머나 간격기를 탑재하여 정기적으로 작업을 수행할 수 있습니다. 이는 구성 요소 상태를 업데이트하거나 다른 작업을 트리거하는 데 유용합니다.

사용 예:

<code class="javascript">mounted() {
  // 发起 AJAX 请求
  this.$http.get('/api/data').then(response => {
    this.data = response.data;
  });

  // 初始化 jQuery
  $(this.$refs.container).draggable();

  // 订阅事件
  this.$on('update-data', () => {
    this.$http.get('/api/data').then(response => {
      this.data = response.data;
    });
  });

  // 设置定时器
  setTimeout(() => {
    this.message = '欢迎使用 Vue.js!';
  }, 1000);
}</code>

마운트된 메서드는 구성 요소가 처음으로 실제 DOM에 삽입된 후에만 호출된다는 점에 유의해야 합니다. 구성 요소가 다시 렌더링되거나 DOM에 다시 삽입되는 경우 이 메서드는 호출되지 않습니다.

위 내용은 Vue에 마운트된 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!