vue 라이프사이클 후크 후크 기능 소개(예제 포함)

이 글은 vue 라이프 사이클의 후크 기능을 소개합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Vue 인스턴스의 수명 주기 후크 기능(8)

1, beforeCreate

방금 새 구성 요소를 생성했는데 액세스할 수 없습니다. 데이터와 실제 DOM에 관해서는 기본적으로 아무것도 할 수 없는 것 같습니다

2,created

데이터 속성에 값이 할당되었으며 데이터는 수정되지만 업데이트되지는 않습니다. 여기에서 초기 데이터를 얻을 수 있습니다

3, beforeMount

렌더링 준비가 완료되었습니다. 이때 데이터를 변경하면 업데이트가 실행되지 않습니다. 여기서 초기 데이터를 얻을 수 있습니다

4, Mounted

렌더링을 시작하고 실제 DOM을 실행합니다. 마운트된 후크 기능, 구성요소가 페이지에 나타남, 데이터, 이벤트는 모두 DOM에 의해 처리됩니다. 여기에서 실제 DOM 작업을 수행하도록 변경할 수 있습니다.

5, beforeUpdate

구성 요소, 인스턴스 데이터가 업데이트되기 전에 실행될 함수, virtual DOM은 virtual DOM을 다시 빌드하고, 위의 가상 DOM 비교 후 다시 렌더링합니다. 데이터를 수정하지 마십시오. 그렇지 않으면 무한 루프가 발생합니다

6, 업데이트됨

업데이트 후 실행될 함수, 데이터를 수정하지 마십시오. 그렇지 않으면 무한 루프가 발생합니다

7, beforeDestroy

인스턴스가 파괴되기 전에 실행될 함수, 여파 작업 수행, 타이머 지우기, 명령어가 아닌 바운드 이벤트 지우기,

8. destroy

　 인스턴스가 소멸된 후 실행될 함수는 사후 작업도 수행할 수 있습니다.

<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>
console这样一个输出顺序：

이것은 내가 Vue처럼 개발하기 위해 Angle을 사용했다는 사실을 포함하여 라이프 사이클 후크 기능이 실행되는 대략적인 순서입니다. 그는 또한 자신의 라이프 사이클 후크 기능을 가지고 있습니다.

Life Cycle은 단순히 컴포넌트의 생성부터 초기화, 소멸까지의 과정을 의미하며, 이러한 Life Cycle Hook 기능을 이용하면 전체 컴포넌트를 더욱 편리하게 운영할 수 있습니다.

위 내용은 vue 라이프사이클 후크 후크 기능 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!