Vue3 Setup Render

Posted on  by admin

Lifecycle hooks in both Vue 2 and Vue 3 work very similarly – we still have access to the same hooks and we still want to use them for the same use cases.

npm i vue3-tree-vue

Mounting Hooks – Accessing the DOM

An In-Depth Look at Each Lifecycle Hook

If our project uses the Options API, we don’t have to change any of the code for our Vue lifecycle hooks. This is because Vue 3 is designed to be compatible with prior releases of Vue.

Using our Vue Lifecycle Hooks in the Options API

PropertyDefaultDescription
itemsEmpty arrayAn array of TreeViewItem.
hideGuideLinesfalseDetermines the visibility of the guidelines
selectedItemundefinedDefines the item that is selected on the tree
checkedItemsAn empty arrayDefines the items that are checked on the tree
isCheckablefalseDefines if items can be selected (one at a time) or selected (using a checkbox)

Activation Hooks – Managing Keep-Alive Components

ClassDescription
selected-tree-itemDefines the style for the selectedItem

Destruction Hooks – Cleaning Things Up