실제 DOM을 직접 운영하면 효율성에 영향을 미치기 때문입니다. 따라서 vue는 가상 DOM (VNode)을 사용하여 렌더링할 콘텐츠를 설명합니다.
가상 DOM
다음과 같은 js 객체입니다.
const vnode = {
tag: "h1",
children: [
{
tag: undefined, text: "Hello World"}
]
}
render또한, vue의 템플릿은 실제 DOM이 아니며 렌더링 함수 , 즉 가상 DOM 트리를 반환하는 데 사용되는 함수 로 컴파일됩니다 .
<div id="app">
<h1>第一个vue应用：{
{title}}</h1>
<p>描述：{
{author}}</p>
</div>
render함수 실행은 다음과 유사한 구조(가상 DOM 트리)를 반환하고 이를 기반으로 실제 DOM 노드를 생성합니다.
{
tag: "div",
children: [
{
tag: "h1", children: [ {
text: "第一个vue应用：Hello World" } ] },
{
tag: "p", children: [ {
text: "描述：desc" } ] }
]
}
종속 데이터가 변경되면 다시 렌더링이 트리거됩니다. vue는 이전 VNode 트리와 새 VNode 트리를 비교하고 차이점을 찾은 다음 차이점(필요한 업데이트)만 실제 DOM 트리에 적용합니다.
따라서 vue에서 최종 페이지를 얻으려면 먼저 가상 DOM 트리를 생성해야 합니다 . 논리는 다음과 같습니다.
가상 DOM 트리 생성 프로세스
render1. 함수가 있으면 실행해 보세요.
template2. 그렇지 않으면 속성이 있는지 확인하고 , 속성이 있으면 구성을 템플릿으로 사용하여 함수 template로 컴파일하여 실행합니다.render
3. 그렇지 않으면 el바인딩된 DOM 요소를 템플릿으로 사용하고 render실행할 함수로 컴파일합니다.
다음 3개의 예는 동일한 렌더링 결과를 갖습니다.
예 1, 함수만 render사용
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
title: "你好 vue",
desc: "第一个 vue 应用",
},
render(h) {
return h("div", [
h("h1", this.title),
h("p", `描述：${
this.desc}`),
]);
},
});
</script>
</body>
예 2, template속성 만
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
title: "你好 vue",
desc: "第一个 vue 应用",
},
template: `<div>
<h1>{
{title}}</h1>
<p>描述：{
{desc}}</p>
</div>`,
});
</script>
</body>
예시 3, el해당 항목을 outerHTML템플릿으로 사용
<body>
<div id="app">
<div>
<h1>{
{title}}</h1>
<p>描述：{
{desc}}</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
title: "你好 vue",
desc: "第一个 vue 应用",
},
});
</script>
</body>
이상.