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

차이점: 1. Created는 템플릿이 HTML로 렌더링되기 전에 호출됩니다. 즉, 특정 속성 값은 일반적으로 초기화된 다음 뷰로 렌더링됩니다. Mounted는 템플릿이 HTML로 렌더링된 후, 일반적으로 초기화 페이지 후에 호출됩니다. 완료되면 HTML의 DOM이 노드에서 몇 가지 필수 작업을 수행합니다. 2. 차트의 일부 초기 구성은 생성 시 수행할 수 없습니다. 그러나 계속 진행하기 전에 HTML이 렌더링될 때까지 기다려야 합니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

1. 라이프사이클이란?

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

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

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

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

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

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

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

사실 두 가지가 더 이해하기 쉽습니다. Created는 일반적으로 더 자주 사용되는 반면 Mounted는 일반적으로 플러그인 Chart.js 사용과 같은 일부 플러그인이나 구성 요소를 사용하여 작동합니다. var ctx = document.getElementById (ID) 보통 이런 단계가 있는데, 컴포넌트에 작성해 보면 생성된 차트에서 일부 초기 구성을 수행할 수 없다는 것을 알 수 있습니다. 그런 다음 마운트하는 것이 유일한 선택입니다. (컴포넌트 사용) 예제를 살펴보겠습니다.

3. 예시

Vue.component("demo1",{
        data:function(){
            return {
                name:"",
                age:"",
                city:""
            }
        },
        template:"

• {{name}}
• {{age}}
• {{city}}

",         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")//第二个命令台输出的结果             console.log(x.innerHTML);         }     });     var vm = new Vue({         el:"#example1"     }) 다음과 같이 출력되는 것을 볼 수 있습니다.

Created에 초기값이 할당되면 모두 성공적으로 렌더링된 것을 확인할 수 있습니다.

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

첫 번째 오류가 보고된 것을 볼 수 있습니다. 실제 이유는 ID를 찾을 수 없다는 것입니다. getElementById(ID)가 요소를 찾지 못했습니다. 이유는 다음과 같습니다.

생성시 뷰의 html이 렌더링되지 않으므로 이때 html의 dom 노드를 직접 조작하면 반드시 해당 요소를 찾을 수 없습니다

그리고 마운트에서는 이로 인해 html이 렌더링되었으므로 dom 노드를 직접 실행할 수 있으므로 "Tang Haoyi"라는 결과가 출력됩니다.

위는 마운트와 마운트의 차이점을 제가 직접 요약한 것입니다. 글은 상대적으로 간단하게 적어서 감상을 깊게하겠습니다.

【관련 추천: vuejs 동영상 튜토리얼, 웹 프론트엔드 개발】

위 내용은 vue에서 마운트된 것과 생성된 것의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!