Vue 3需要避免的错误

下面是关于“Vue 3需要避免的错误”的攻略：

1. 删除节点

在Vue 3中，删除节点需要使用remove()，而不是之前版本中常用的$destroy()。

<template>
  <div v-if="show">
    Some content to be removed
  </div>
  <button @click="removeContent">Remove content</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const show = ref(true)

    const removeContent = () => {
      show.value = false
      // 错误的做法：$destroy()已经被删除
      // this.$destroy()
    }

    return {
      show,
      removeContent
    }
  }
}
</script>

2. Reactive Properties

在Vue 3中新增了ref和reactive用来响应式地管理数据。使用ref管理的数据需要使用.value来访问和修改，而使用reactive管理的对象则可以直接访问属性。

<template>
  <h1>{{ title }}</h1>
  <input v-model="form.input" />
  <button @click="updateTitle">Update title</button>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  setup() {
    // 使用ref管理数据
    const title = ref('Hello, Vue 3!')
    // 使用reactive管理对象
    const form = reactive({
      input: ''
    })

    const updateTitle = () => {
      // 错误的做法：直接修改title会导致UI不更新
      // title = form.input
      // 正确的做法：使用.value获取title的值
      title.value = form.input
    }

    return {
      title,
      form,
      updateTitle
    }
  }
}
</script>

以上两个示例为Vue 3常见的两个错误，需要特别注意。提供了删除节点的示例和响应式管理数据的示例。