vue에서 onmounted의 역할

onMounted는 Vue의 구성 요소 마운팅 수명 주기 후크입니다. 해당 기능은 DOM 요소에 대한 참조 가져오기, 데이터 설정, HTTP 요청 전송, 이벤트 리스너 등록 등과 같은 구성 요소가 DOM에 마운트된 후 초기화 작업을 수행하는 것입니다. 구성 요소가 마운트될 때 한 번만 호출됩니다. 구성 요소가 업데이트된 후 또는 삭제되기 전에 작업을 수행해야 하는 경우 다른 수명 주기 후크를 사용할 수 있습니다.

Vue에서 onMounted의 역할

onMounted는 Vue 수명 주기 후크 중 하나입니다. 즉, 구성 요소가 DOM에 마운트된 후에 호출됩니다. 주요 기능은 다음과 같습니다.

컴포넌트 마운트와 관련된 작업 수행

컴포넌트가 DOM에 마운트된 후 다음과 같은 일부 초기화 작업을 수행할 수 있습니다.

• DOM 요소 참조 가져오기
• 데이터 설정 또는 속성
• HTTP 요청 보내기
• 이벤트 리스너 등록

전체 데이터 요청 또는 비동기 작업

컴포넌트가 마운트된 후 데이터를 얻거나 시간이 걸리는 작업을 수행해야 하는 경우 onMounted에서 수행할 수 있습니다. 훅. 이렇게 하면 데이터나 작업이 완료되면 구성 요소가 그에 따라 응답합니다.

예:

<script>
import { onMounted } from 'vue'

export default {
  onMounted() {
    // 获取 DOM 元素的引用
    const el = this.$refs.myElement

    // 设置数据
    this.data = 'Hello world!'

    // 发送 HTTP 请求
    fetch('https://example.com/api/data').then((response) => {
      this.data = response.data
    })

    // 注册事件监听器
    window.addEventListener('resize', this.onResize)
  },
  methods: {
    onResize() {
      // 窗口大小改变时响应
    }
  }
}
</script>

참고:

• onMounted 후크는 구성 요소가 마운트될 때 한 번만 호출됩니다.
• 구성 요소가 업데이트된 후 작업을 수행해야 하는 경우 onUpdated 후크를 사용할 수 있습니다.
• 구성 요소가 삭제되기 전에 정리 작업을 수행해야 하는 경우 onBeforeUnmount 후크를 사용할 수 있습니다.

위 내용은 vue에서 onmounted의 역할의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!