vue 프레임 워크 학습 (3)-라이프 사이클

1. MVVM이란

있다 (사진은 인터넷에서 찾을 수 있습니다) : MVVM은 다음과 같이 프레임 워크에 반영되어 모델 - 뷰 - 뷰 모델의 약자입니다

다음과 같이 코드를 작성하는 위치에 반영 :

MVVM은 그들 중 하나입니다 View 的状态和行为抽象化우리가하자 视图 UI 和业务逻辑구분합니다. 물론 ViewModel은 이미 우리를 위해 이러한 작업을 수행 取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑했지만 할 수 있지만 MVVM主要目的是分离视图（View）和模型（Model），然后减低耦合，提高可重用性개발이 비즈니스 처리에 집중하도록 놔두면 인터페이스의 표시는 작업의 작은 부분에 불과합니다.

둘째, Vue 인스턴스 생성

객체 지향 프로그래밍을 공부했다면 객체를 생성하는이 예제에 매우 익숙 할 것입니다. 새 키워드를 사용하는 Vue도 마찬가지입니다. 모든 Vue 애플리케이션은 Vue 함수를 사용하여 새 Vue 인스턴스를 만드는 것으로 시작합니다.

var vm = new Vue({
  // 选项
})

셋, Vue의 옵션

3.1 옵션이란?

Vue 인스턴스를 작성할 때 객체 또는 매개 변수를 인스턴스에 전달할 수 있지만
이 매개 변수의 객체 는 공식 웹 사이트에 작성됩니다.이 객체를 ({object value : option})에 넣습니다.

	const app = new Vue({
			el: "#app1",
			data: {
				message: "hello vue"
			}
		})

좀 더 명확하게 보이도록이 객체를 내놓았습니다. 사실 매개 변수를 전달하는 obj것이지만 매개 변수 전달 객체에는 스스로 선택할 수있는 값이 많습니다.对象里的值就是Vue的选项

var obj = {
			el: "#app1",
			data: {
				message: "hello vue"
				}
			}
const app = new Vue(obj)

3.2 옵션 값은 무엇입니까

공식 웹 사이트에서 옵션 API 를 볼 수 있습니다 . 옵션 값이 너무 많아서 기억할 필요도없고 기억할 수도 없습니다. 일반적으로 사용되는 몇 가지 값만 기억하면됩니다. …

#el
유형 : 문자열 요소
제한 :只在用 new 创建实例时生效 .

#data
유형 : 개체 기능
제한 : 구성 요소의 정의 只接受 function.

#methods
유형 : {[key : string] : Function}
세부 정보 : 메서드가 Vue 인스턴스에 혼합됩니다. VM 实例이러한 메서드에 직접 액세스하거나 thisVue 인스턴스 에 자동으로 바인딩 하는 식 메서드에 사용되는 명령어에 액세스 할 수 있습니다 .

#生命周期钩子
函数 名称 : beforeCreate 、 created 、 beforeMount 、 mounted 、 beforeUpdate 、 updated 、 activated 、 deactivated 、 beforeDestroy 、 destroyed 、 errorCaptured

네, Vue 수명주기

4.1 라이프 사이클 다이어그램

Vue의 라이프 사이클은 처음부터 시작됩니다. 创建, 初始化데이터, 编译템플릿, 挂载Dom 渲染→ 更新→ 渲染→ 销毁(인터넷에서 찾은 사진)

4.2 라이프 사이클 후크 기능

훅	기술
beforeCreate	인스턴스가 초기화 된 후 데이터 관찰 및 이벤트 / 감시자 시간 설정 전에 호출됩니다. 이때이 변수는 사용할 수 없으며 데이터 아래의 데이터, 메서드의 메서드, 감시자의 이벤트를 가져올 수 없습니다.console.log(this.page); // undefined
만들어진	인스턴스가 생성 된 후 호출됩니다. 이 단계에서 인스턴스는 데이터 관찰, 속성 및 메서드 계산 감시 / 이벤트 이벤트 콜백 구성을 완료했습니다. 그러나 마운트 단계가 아직 시작되지 않았으며 $ el 속성이 현재 표시되지 않습니다. 이때 vue 인스턴스의 데이터와 다양한 메소드를 조작 할 수 있지만 "dom"노드는 아직 조작 할 수 없습니다. let btn = document.querySelector('button')console.log(btn.innerText) //此时找不到button节点，打印不出来button的值
beforeMount
장착	이때 마운팅이 완료되고 이때 dom 노드가 문서로 렌더링되며 dom을 필요로하는 일부 작업은이 시점에서 정상적으로 수행 할 수 있습니다. 참고 : mount는 전체 인스턴스의 수명주기에서 한 번만 실행됩니다. let btn = document.querySelector('button')console.log(btn.innerText) //此时找不到button节点，打印不出来button的值
beforeUpdate	데이터 업데이트 전 작업
업데이트 됨	가상 DOM은 데이터 변경으로 인해 다시 렌더링되고 패치 된 후 후크가 호출됩니다. 이 후크가 호출되면 구성 요소 DOM이 업데이트되었으므로 이제 DOM에 종속 된 작업을 수행 할 수 있습니다. 그러나 대부분의 경우이 기간 동안 상태 변경을 피해야합니다. 이로 인해 끝없는 업데이트 루프가 발생할 수 있습니다.
활성화	연결 유지 구성 요소가 활성화되면 호출됩니다. 이 후크는 서버 측 렌더링 중에 호출되지 않습니다.
비활성화 됨	연결 유지 구성 요소가 비활성화되면 호출됩니다. 이 후크는 서버 측 렌더링 중에 호출되지 않습니다.
beforeDestroy	자주 볼 수 있듯이 Vue 인스턴스가 파괴되기 전입니다. "이 인터페이스를 종료 하시겠습니까?"
파괴됨	Vue 인스턴스가 파괴 된 후 호출됩니다. 호출 후 Vue 인스턴스가 나타내는 모든 것이 바인딩 해제되고 모든 이벤트 리스너가 제거되며 모든 하위 인스턴스가 삭제됩니다.

Keep-alive : Keep-alive
개념
    은 Vue의 기본 제공 구성 요소입니다. 동적 구성 요소를 래핑 할 때 비활성 구성 요소 인스턴스를 파괴하는 대신 캐시합니다. 전환과 유사하게 연결 유지는 추상 구성 요소입니다. 자체적으로 DOM 요소로 렌더링되지 않으며 부모 구성 요소 체인에 표시되지 않습니다.
된다
    로딩 시간과 성능 소비를 감소시키고 사용자 경험을 개선은 DOM 렌더링이 반복 성분 전환시 메모리 상태를 유지하기 위해 사용 방지

기사 노트는 https://blog.csdn.net/qq_30442207/article/details/108266756을 참조하십시오.