vue created 갈고리 함수 와 mounted 갈고리 함수 의 용법 차이

3084 단어 vuecreatedmounted
1:vue 프레임 워 크 를 사용 하 는 과정 에서 우 리 는 항상 데이터 에 초기 화 처 리 를 해 야 합 니 다.이때 우리 가 자주 사용 하 는 것 은 created 와 mounted 옵션 에서 처리 하 는 것 입 니 다.
우선 공식 설명 을 살 펴 보 자.공식 설명 에 따 르 면 created 는 인 스 턴 스 생 성 이 완료 되면 바로 호출 된다 고 한다.
이 단계 에서 인 스 턴 스 는 다음 과 같은 설정 을 완 료 했 습 니 다.데이터 관측(data observer),속성 과 방법의 연산,watch/event 이벤트 반전.그러나 마 운 트 단계 가 시작 되 지 않 았 습 니 다.$el 속성 은 현재 보이 지 않 습 니 다.
이 말 은 마 운 트 단계 가 아직 시작 되 지 않 았 는데 마 운 트 를 시작 하지 않 았 다 는 것 이 중요 하 다 고 생각 합 니 다.즉,템 플 릿 이 html 로 과장 되 지 않 았 습 니 다.즉,이때 id 같은 것 을 통 해 페이지 요 소 를 찾 을 수 없습니다.
다음은 실례 를 보고 증명 하 겠 습 니 다.

이 예 를 들 어 결 과 를 캡 처 하면 다음 과 같 습 니 다.이 오 류 는 id 가 name 인 Dom 요 소 를 찾 을 수 없다 는 것 을 증명 합 니 다.템 플 릿 이 html 로 렌 더 링 되 지 않 았 음

따라서 일반 creadted 갈고리 함 수 는 주로 데 이 터 를 초기 화 하 는 데 사 용 됩 니 다.
2:mounted 갈고리 함 수 는 일반적으로 백 엔 드 에 데 이 터 를 받 은 후에 업무 처 리 를 요청 하 는 데 사 용 됩 니 다.공식 설명 은 다음 과 같다.
엘 은 새로 만 든 vm.$el 로 바 뀌 었 고 인 스 턴 스 에 마 운 트 한 후 이 갈 고 리 를 호출 합 니 다.루트 인 스 턴 스 가 문서 에 있 는 요 소 를 마 운 트 하면 mounted 가 호출 될 때 vm.$el 도 문서 에 있 습 니 다.
이 갈고리 함 수 는 완 성 된 후에 템 플 릿 렌 더 링 이 완 료 된 후에 야 호출 된다 는 뜻 이다.
다음은 실례 를 보 겠 습 니 다.

다음은 결과.

값 을 가 져 왔 습 니 다.이 때 vue 템 플 릿 이 렌 더 링 되 었 음 을 설명 합 니 다.따라서 Dom 작업 은 일반적으로 mounted 갈고리 함수 에서 진행 된다.
컴퓨터 d:{}계산 속성,계산 속성 이 무엇 입 니까?저 는 개인 적 으로 데이터 에 대해 일정한 조작 을 하 는 것 을 이해 합 니 다.논리 적 처리 조작 을 포함 하여 계산 속성 중의 데 이 터 를 모니터링 할 수 있 습 니 다.계산 속성 은 이 를 바탕 으로 업 데 이 트 된 것 으로 관련 의존 이 바 뀌 었 을 때 만 변 화 를 업데이트 하고 함수 로 결 과 를 되 돌려 줍 니 다.
그리고 일반 속성 을 바 인 딩 하 는 것 처럼 템 플 릿 에 속성 을 바 인 딩 할 수 있 습 니 다.

<body>
 <div id="box" :class="{a:true,b:true}">
  <div></div>
  {{msg}}
  <div>
     {{msg}}      ：{{msg2}}
  </div>
 </div>
  <script type="text/javascript">
  window.οnlοad=function(){
  new Vue({
   el:"#box",
   data:{
   msg:"https://www.baidu.com"
   },
   computed:{
   msg2:function(){
    var s=this.msg.split(":")[0];
    return s;
   }
   }
  })
  }
 </script>
 </body>
vue 요청 데 이 터 를 created 에 넣 는 것 이 좋 습 니까?mounted 에 넣 는 것 이 좋 습 니까?
created 에 넣 는 것 을 권장 합 니 다.
created:템 플 릿 이 html 로 렌 더 링 되 기 전에 호출 합 니 다.즉,보통 일부 속성 값 을 초기 화한 다음 에 보기 로 렌 더 링 합 니 다.
mounted:템 플 릿 이 html 로 렌 더 링 된 후에 호출 합 니 다.보통 페이지 를 초기 화 한 후에 html 의 dom 노드 에 필요 한 작업 을 합 니 다.
mounted 갈고리 함수 에서 데 이 터 를 요청 하면 페이지 플래시 문제 가 발생 할 수 있 습 니 다.
사실은 로 딩 타 이 밍 문제 입 니 다.created 에 넣 으 면 mounted 보다 조금 일찍 트리거 됩 니 다.페이지 마 운 트 가 끝나 기 전에 요청 이 완료 되면 플래시 화면 을 보지 못 합 니 다.
이상 의 vue created 갈고리 함수 와 mounted 갈고리 함수 의 용법 차 이 는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
Nuxt.js 정적 자원 과 패키지 작업
어떻게 HTML 을 이용 하여 하 드 디스크 를 포맷 합 니까?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage