Vue作為一款流行的前端框架，提供了很多方便實用的功能。其中，自定義樹形動態增刪功能可以為我們的項目帶來很大的便利。

在開始自定義樹形動態增刪功能之前，我們需要先明確一下需求。我們希望能夠像操作普通的列表一樣，通過點擊按鈕或者輸入框來動態添加或刪除樹形結構中的節點。同時，我們還需要考慮到這些操作的性能和穩定性。

/**
 * 創建樹形節點類
 */
class TreeNode {
constructor(data) {
this.data = data
this.children = []
}
// 添加子節點
appendChild(node) {
this.children.push(node)
}
// 刪除子節點
removeChild(node) {
const index = this.children.indexOf(node)
if (index !== -1) {
this.children.splice(index, 1)
}
}
}
export default {
name: 'tree',
props: {
data: {
type: Array,
default: () => []
}
},
data() {
return {
// 存儲樹形結構
treeData: []
}
},
created() {
// 將傳入的props數據轉換為樹形結構
this.treeData = this.generateTree(this.data)
},
methods: {
/**
* 根據傳入的數據生成樹形結構
*/
generateTree(data) {
const nodes = data.map(item => new TreeNode(item))
const map = {}
nodes.forEach(node => map[node.data.id] = node)
const rootNodes = []
nodes.forEach(node => {
if (node.data.parentId) {
map[node.data.parentId].appendChild(node)
} else {
rootNodes.push(node)
}
})
return rootNodes
},
/**
* 添加子節點
*/
addChild(parentNode, childData) {
const childNode = new TreeNode(childData)
parentNode.appendChild(childNode)
},
/**
* 刪除節點
*/
removeNode(node) {
const parent = node.parent
if (parent) {
parent.removeChild(node)
} else {
this.treeData.splice(this.treeData.indexOf(node), 1)
}
}
}
}

以上是一個簡單的vue自定義樹形動態增刪功能的實現代碼。通過定義一個TreeNode類，我們可以方便地創建樹形結構并進行增刪操作。同時，我們還需要注意每次節點操作后及時更新視圖，以保證界面的正確性。