>  기사  >  웹 프론트엔드  >  생성된 메소드 사용 사례에 대한 자세한 설명

생성된 메소드 사용 사례에 대한 자세한 설명

php中世界最好的语言
php中世界最好的语言원래의
2018-05-02 16:49:302344검색

이번에는 생성된 메소드의 사용 사례에 대해 자세히 설명하겠습니다. 생성된 메소드를 사용할 때 주의 사항은 무엇입니까?

InstanceLife Cycle

각 Vue 인스턴스는 생성되기 전에 일련의 초기화 프로세스를 거칩니다. 예를 들어, 인스턴스는 데이터 관찰자를 구성하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트한 다음, 데이터가 변경되면 DOM을 업데이트해야 합니다. 이 프로세스 중에 인스턴스는 사용자 지정 논리를 실행할 수 있는 기회를 제공하는 일부 수명 주기 후크도 호출합니다. 예를 들어, 생성된 후크는 인스턴스가 생성된 후에 호출됩니다.

var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// -> "a is: 1"

마운트, 업데이트, 삭제 등 인스턴스 수명 주기의 여러 단계에서 호출되는 다른 후크도 있습니다. 후크의 this는 이를 호출한 Vue 인스턴스를 가리킵니다. 일부 사용자는 Vue.js에 "컨트롤러"라는 개념이 있는지 묻습니다. 대답은 '아니요'입니다. 구성 요소의 사용자 정의 논리는 이러한 후크에 배포될 수 있습니다.

라이프 사이클 다이어그램

다음 그림은 인스턴스의 라이프 사이클을 보여줍니다. 모든 것을 즉시 이해할 필요는 없지만 나중에 도움이 될 것입니다.

Added:

Vue라이프사이클에서 마운트된 것과 생성된 것의 차이점

1. 라이프사이클이란 무엇입니까?

일반적인 언어에서는 Vue의 인스턴스 또는 구성 요소가 생성에서 소멸까지 거치는 일련의 프로세스입니다. 엄격하지는 않지만 기본적으로 이해할 수 있습니다.

일련의 실습을 통해 이제 발생한 모든 문제를 정리했으며 오늘은 생성된 것과 마운트된 것의 차이점을 기록하겠습니다.

2 생성된 것과 마운트된 것의 차이점은 무엇입니까?

공식 다이어그램은 다음과 같습니다.

다이어그램에서 두 개의 노드를 살펴봅니다.

created: 템플릿이 html로 렌더링되기 전에 호출됩니다. 즉, 특정 속성 값은 일반적으로 초기화됩니다. 그런 다음 뷰로 렌더링됩니다.

mounted: 템플릿이 HTML로 렌더링된 후, 일반적으로 초기화 페이지가 완료된 후 호출되며 HTML의 dom 노드에서 일부 필수 작업을 수행합니다.

실제로 Created는 일반적으로 더 자주 사용되는 반면 Mounted는 일반적으로 일부 플러그인을 사용하거나 컴포넌트를 사용하여 작동합니다. .js: ; 일반적으로 이 단계가 있으며, 이를 컴포넌트에 작성하면 생성된 차트에서 일부 초기 구성을 수행할 수 없다는 것을 알게 됩니다. 그런 다음 계속 진행하기 전에 기다려야 합니다. 최선의 선택. (컴포넌트 사용) 예제를 살펴보겠습니다. var ctx = document.getElementById(ID)

3. 예시

<span style="font-size: 14px;">Vue.component("demo1",{ 
  data:function(){ 
   return { 
    name:"", 
    age:"", 
    city:"" 
   } 
  }, 
  template:"<ul><li id=&#39;name&#39;>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>", 
  created:function(){ 
   this.name="唐浩益" 
   this.age = "12" 
   this.city ="杭州" 
   var x = document.getElementById("name")//第一个命令台错误 
   console.log(x.innerHTML); 
  }, 
  mounted:function(){ 
   var x = document.getElementById("name")/</span>/第二个命令台输出的结果<span style="font-size: 14px;"> 
   console.log(x.innerHTML); 
  } 
 }); 
 var vm = new Vue({ 
  el:"#example1" 
 })</span>
다음과 같이 출력되는 것을 볼 수 있습니다.

생성된 항목에 초기 값이 할당되면 모두 성공적으로 렌더링되는 것을 볼 수 있습니다.

그러나 동시에 콘솔을 보면 다음과 같습니다.

첫번째 오류가 보고된 것을 볼 수 있습니다. 실제로는 id를 찾을 수 없고, getElementById(ID)도 찾지 못했기 때문입니다. 그 이유는 다음과 같습니다.

만들었을 때 뷰의 html이 렌더링되지 않았기 때문에 이때 html의 dom 노드를 직접 조작하면 해당 요소를 절대 찾을 수 없습니다

그리고 마운트하면 이때 html이 렌더링되었으므로 dom 노드를 직접 조작할 수 있으므로 "Tang Haoyi"라는 결과가 출력됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

키 값 문자열을 json 문자열로 변환하는 방법(코드 포함)

angular4 여러 구성 요소가 서로 통신합니다

위 내용은 생성된 메소드 사용 사례에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.