Virtual DOM and diffing mental model in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a virtual DOM node using Vue's h function.

Vue

import { h } from 'vue';
const vnode = h('div', { class: '[1]' }, 'Hello World');

Drag options to blanks, or click blank then click option'

Acontainer

Bwrapper

Cbox

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of an object for the second argument.

Leaving the class name empty or misspelled.

The h function creates a virtual DOM node. The second argument is an object for attributes like class. Here, 'content' is the class name.

2fill in blank

medium

Complete the code to patch the old virtual DOM with the new one using Vue's patch function.

Vue

import { createApp, h } from 'vue';
const oldVnode = h('p', 'Old text');
const newVnode = h('p', 'New text');
const container = document.getElementById('app');
const app = createApp({});
app.mount(container);
app._container.__vue_app__.config.globalProperties.$patch(oldVnode, [1]);

Drag options to blanks, or click blank then click option'

AnewVnode

Bapp

Ccontainer

DoldVnode

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the old virtual DOM node again instead of the new one.

Passing the container or app instance instead of a vnode.

The patch function updates the old virtual DOM node to match the new one. So, you pass newVnode as the second argument.

3fill in blank

hard

Fix the error in the diffing function that compares two virtual DOM nodes by completing the blank.

Vue

function isSameVNode(oldVNode, newVNode) {
  return oldVNode.type === newVNode.[1];
}

Drag options to blanks, or click blank then click option'

Atype

Btag

Cname

DnodeType

Attempts:

3 left

💡 Hint

Common Mistakes

Using tag which is not a Vue vnode property.

Using name or nodeType which are incorrect here.

In Vue's virtual DOM, the type property holds the element type (like 'div' or 'span'). Comparing type checks if nodes are the same kind.

4fill in blank

hard

Fill both blanks to create a new vnode with a key and children array.

Vue

const vnode = h('ul', { key: [1] }, [h('li', 'Item 1'), [2] ]);

Drag options to blanks, or click blank then click option'

A'list-1'

Bh('li', 'Item 2')

Ch('li', 'Item 3')

D'item-1'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number instead of a string for the key.

Putting a string instead of a vnode in the children array.

The key helps Vue track nodes. The children array holds h calls for list items. Here, 'list-1' is the key and h('li', 'Item 2') is the second child.

5fill in blank

hard

Fill all three blanks to create a reactive state, update it, and reflect the change in the template.

Vue

<template>
  <p>{{ [1] }}</p>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
function increment() {
  [2] = [3] + 1;
}
</script>

Drag options to blanks, or click blank then click option'

Acount

Bcount.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using count.value in the template interpolation.

Assigning to count directly in script instead of count.value.

In Vue, reactive refs are accessed in templates by their name (count). In script, update the value with count.value. So, increment sets count.value = count.value + 1.