vue.js 라이프사이클 함수의 역할은 무엇인가요?

vue.js 라이프 사이클 함수의 역할: 1. [beforeCreated()]는 인스턴스가 완전히 초기화되기 전에 함수가 호출된다는 의미입니다. 2. [beforeMount()] 이때 템플릿이 컴파일되었습니다. 그러나 아직 페이지에 렌더링되지 않았습니다. ;3. [updated()] 페이지가 데이터 업데이트를 완료합니다.

【추천 관련 글: vue.js】

vue.js 라이프사이클 기능의 역할:

Foreword

A Vue 인스턴스는 완전한 라이프사이클을 가지고 있습니다. 말하자면 처음부터 생성, 데이터 초기화, 템플릿 컴파일, DOM에 매달기, 렌더링-업데이트-렌더링, 제거 등의 일련의 프로세스가 Vue 인스턴스의 수명주기가 되는 것입니다. 특정 단계에서 특정 처리를 수행할 수 있는 기회를 제공합니다.

각 함수의 역할

beforeCreated():beforeCreated():

• 表示在实例被完全初始化之前调用该函数；

created():

• 此时Vue的数据和方法（data，methods）都已经初始化好了；

• 如果要操作data和methods，最早需要在这个函数中操作；

• created完成后就开始编译html模板，把模板字符串渲染为dom，最终在内存中生成一个已经编译完成的最终模板；

• 最终模板仅仅存在于内存中，并没有被渲染到页面中；

beforeMount():

• 此时模板已经编译完成，但也还未渲染到页面；

mounted():

• 此时页面已经渲染完成，文档中已存在dom节点；

• 若要操作dom节点，最早需要在这个函数中进行；

• 执行完mounted后，表示实例已经创建完毕，若无其他操作，内存不会再有活动；

beforeUpdate():

• 此时页面已经完全挂载，此函数表示在页面数据发生改变时执行；

• 数据改变时，页面的数据并没有更新，但data中的数据已经更新完毕；

updated():

• 页面完成数据更新；

beforeDestory():

• 当执行此函数时，Vue实例进入销毁的阶段；

• 此时的filter、data、methods还能够继续使用；

destoryed():

• 은 인스턴스가 완전히 초기화되기 전에 이 함수를 호출하는 것을 의미합니다.

created(): code ><p><strong></strong></p>이제 Vue의 데이터 및 메소드(데이터, 메소드)가 초기화되었습니다. <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/100/119/777/1605064460278263.png?x-oss-process=image/resize,p_40" class="lazy" title="1605064460278263.png" alt="vue.js 라이프사이클 함수의 역할은 무엇인가요?"></p> <p>데이터 및 메소드를 작동하려면 가장 빨리 이 함수에서 작동해야 합니다. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/890/421/938/1605064468276386.png?x-oss-process=image/resize,p_40" class="lazy" title="1605064468276386.png" alt="vue.js 라이프사이클 함수의 역할은 무엇인가요?">생성이 완료된 후 HTML 템플릿 컴파일을 시작하고 템플릿 문자열을 DOM으로 렌더링한 다음 마지막으로 메모리에 컴파일된 최종 템플릿을 생성합니다. </p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/197/485/644/1605064480579841.png?x-oss-process=image/resize,p_40" class="lazy" title="1605064480579841.png" alt="vue.js 라이프사이클 함수의 역할은 무엇인가요?"></p>최종 템플릿은 메모리에만 존재하며 페이지로 렌더링되지 않습니다. <blockquote><p><strong></strong> <code>beforeMount():이때 템플릿이 컴파일되었지만 아직 페이지에 렌더링되지 않았습니다.

mounted() :🎜🎜🎜🎜this 페이지가 렌더링되면 dom 노드가 이미 문서에 존재합니다. 🎜🎜🎜🎜 dom 노드를 작동하려면 최대한 빨리 이 함수에서 수행해야 합니다. ; 🎜🎜🎜🎜마운트를 실행한 후에는 인스턴스가 생성되었음을 의미하며, 다른 작업이 없으면 메모리에 더 이상 활동이 없습니다. 🎜🎜🎜🎜이 시점에서 페이지가 완전히 마운트되었습니다. 이 기능은 페이지 데이터가 변경되면 실행된다는 의미입니다. 🎜🎜🎜🎜 데이터가 변경되면 페이지의 데이터는 업데이트되지 않습니다. 데이터가 업데이트되었습니다. 🎜🎜🎜🎜updated():🎜🎜🎜🎜페이지에서 데이터 업데이트가 완료되었습니다. 🎜🎜🎜🎜beforeDestory():🎜🎜🎜 🎜이 함수가 실행되면 Vue 인스턴스는 소멸 단계에 들어갑니다. 🎜🎜🎜🎜이 시점의 필터, 데이터 및 메서드는 계속 사용할 수 있습니다. 🎜🎜🎜🎜 destroy(): 🎜🎜🎜🎜구성 요소가 완전히 파괴되어 모든 데이터와 방법을 사용할 수 없습니다.🎜🎜🎜🎜🎜자세한 흐름도🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜관련 무료 학습 추천: 🎜🎜🎜자바스크립트🎜 🎜🎜(동영상)🎜🎜🎜

위 내용은 vue.js 라이프사이클 함수의 역할은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!