Vue 라이프사이클 후크 기능에 대한 간략한 소개(코드 예시)

이 글은 Vue 라이프 사이클 후크 기능에 대한 간략한 소개(코드 예제)를 제공합니다. 이는 특정 참조 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

그림부터 시작하겠습니다

아래 그림은 공식적으로 표시된 라이프 사이클 다이어그램입니다

Vue 인스턴스의 라이프 사이클 후크 기능(8)
1. beforeCreate
새 컴포넌트를 생성했지만 액세스할 수 없습니다. data 그리고 실제 DOM은 기본적으로 쓸모가 없는 것 같습니다
2.created
데이터 속성이 할당되었으며 데이터를 수정할 수 있지만 업데이트가 트리거되지 않습니다. 여기에서 초기 데이터를 얻을 수 있습니다
3. 렌더링 준비가 완료되면 함수의 가상 DOM이 생성되었습니다. 이때 데이터를 변경하면 업데이트가 실행되지 않습니다. 여기에서 초기 데이터를 얻을 수 있습니다
4. 마운트된 렌더링을 시작하고, 실제 DOM을 렌더링하고, 마운트된 항목을 실행합니다. 후크 기능과 어셈블리가 나타났습니다. 페이지에서 데이터와 이벤트는 모두 DOM에 의해 처리됩니다. 여기에서 실제 DOM 작업을 수행하도록 변경할 수 있습니다.
5. 인스턴스 데이터가 업데이트되기 전에 실행되는 함수인 beforeUpdate
는 가상 DOM을 마지막 가상 DOM과 비교한 후 다시 렌더링합니다. . 데이터를 수정하지 않으면 무한 루프가 발생합니다
6.update
업데이트 후에 실행되는 함수입니다. 데이터를 수정하지 않으면 무한 루프가 발생합니다
7. 인스턴스가 파괴되고, 여파 작업을 수행하고, 타이머가 삭제되고, 명령이 아닌 바운드 이벤트가 지워지는 등의 작업을 수행합니다.
8. 파괴됨
인스턴스가 파괴된 후 실행될 함수도 여파 작업을 수행할 수 있습니다.

<template>
  <div class="hello">
   Hello World!
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  beforeCreate: function() {
    console.log("data属性光声明没有赋值的时候");
  },
  created: function() {
    console.log("data属性完成了赋值");
  },
  beforeMount: function() {
    console.log("页面上的{{name}}还没有被渲染成真正的数据");
  },
  mounted: function() {
    console.log("页面上的{{name}}被渲染成真正的数据");
  },
  beforeUpdate: function() {
    console.log(" 数据（data属性）更新之前会执行的函数");
  },
  updated: function() {
    console.log("数据（data属性）更新完会执行的函数");
  },
  beforeDestroy: function() {
    console.log("实例被销毁之前会执行的函数");
  },
  destroyed: function() {
    console.log("实例被销毁后会执行的函数");
  }
};
</script>
<style scoped>
</style>

콘솔에는 다음과 같은 출력 순서가 있습니다.

아마도 이것은 vue처럼 개발하기 위해 각도를 사용했다는 사실을 포함하여 라이프 사이클 후크 기능이 실행되는 순서일 것입니다. .

간단히 말하면, 라이프사이클은 컴포넌트의 생성부터 초기화, 소멸까지의 과정을 의미합니다. 이 과정에서 이러한 라이프사이클 후크 기능을 이용하면 컴포넌트 전체를 보다 편리하게 운영할 수 있습니다.

위 내용은 Vue 라이프사이클 후크 기능에 대한 간략한 소개(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!