>  기사  >  웹 프론트엔드  >  vue 추상 구문 트리와 가상 DOM의 차이점은 무엇입니까

vue 추상 구문 트리와 가상 DOM의 차이점은 무엇입니까

WBOY
WBOY원래의
2022-06-23 17:10:402736검색

vue 추상 구문 트리와 가상 dom의 차이점: 1. 추상 구문 트리는 소스 코드 구문 구조의 추상 표현을 참조하는 반면, 가상 dom은 본질적으로 뷰의 인터페이스 구조를 설명하는 데 사용되는 일반 JS 객체입니다. 가상 DOM은 실제 DOM을 객체 형태로 추상적으로 표현한 반면, 추상 구문 트리는 구문 구조를 추상적으로 표현한 것입니다.

vue 추상 구문 트리와 가상 DOM의 차이점은 무엇입니까

이 튜토리얼의 운영 환경: Windows 10 시스템, Vue3 버전, Dell G3 컴퓨터.

vue 추상 구문 트리와 가상 돔의 차이점은 무엇인가요?

가상 돔

가상 돔이란 무엇인가요?

Virtual dom은 본질적으로 뷰의 인터페이스 구조를 설명하는 데 사용되는 일반 JS 객체입니다.

vue에서 각 구성 요소에는 렌더링 함수가 있으며 각 렌더링 함수는 가상 dom 트리를 반환합니다. 이는 각 구성 요소가 해당 가상 DOM 트리에

가상 DOM이 필요한 이유는 무엇인가요?

Vue에서 뷰를 렌더링하면 render 함수가 호출됩니다. 이 렌더링은 구성 요소가 생성될 때뿐만 아니라 뷰가 의존하는 데이터가 업데이트될 때도 발생합니다. 렌더링 시 실제 DOM을 직접 사용하는 경우 실제 DOM의 생성, 업데이트, 삽입 및 기타 작업으로 인해 많은 성능 손실이 발생하여 렌더링 효율성이 크게 저하됩니다.

따라서 Vue는 주로 렌더링 효율성 문제를 해결하기 위해 렌더링 시 실제 DOM을 대체하기 위해 가상 DOM을 사용합니다.

추상 구문 트리

컴퓨터 과학에서 AST(추상 구문 트리) 또는 줄여서 구문 트리는 소스 코드 구문 구조 추상 표현의 한 유형입니다. 프로그래밍 언어의 문법 구조를 트리 형태로 표현합니다. 트리의 각 노드는 소스 코드의 구조를 나타냅니다. 가상 dom과 ast의 차이점:

Virtual dom과 ast는 모두 추상 구문 트리입니다. 페이지 렌더링을 처음 배울 때는 이 둘을 혼동하는 경우가 많았습니다. 사실 둘은 완전히 다른 개념입니다. 둘 다 추상적 표현을 위해 객체를 사용하지만 가상 돔은 객체 형태의 실제 돔을 추상적으로 표현하는 반면 ast는 문법 구조를 추상적으로 표현합니다.

추상 구문 트리의 끝점은 렌더링 함수(h 함수)입니다.

vue 추상 구문 트리와 가상 DOM의 차이점은 무엇입니까AST의 산물이자 vnode(가상 노드)의 유래인 렌더링 함수(h 함수). h 함수에는 명령이 없습니다.

추상 구문 트리는 diff 알고리즘을 수행하지 않으며 추상 구문 트리는 가상 노드를 직접 생성하지 않습니다. 추상 구문 트리는 궁극적으로 렌더링 기능을 생성합니다

[관련 권장 사항: "

vue.js tutorial

"]

위 내용은 vue 추상 구문 트리와 가상 DOM의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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