vue3 ref 和 reactive 常见陷阱，让初学者避坑

在入门阶段，我们需要掌握的是「是什么」、「怎么用」、「有什么注意」，基本就差不多了。今天就带大家初探 Vue3 ref 和 reactive 的世界，让你避免那些常见的坑。

一、ref是什么

ref 是 Vue3 中的一个特性，它允许我们访问组件实例的 DOM 元素或子组件实例。ref 的本质是一个 JavaScript 的变量，指向组件的 DOM 元素或子组件实例。

二、ref怎么用

使用 ref 非常简单，只需要在 HTML 元素上添加一个 ref 属性，并为其指定一个变量名即可。例如：

<template>
  <div ref="myDiv">Hello World!</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myDiv) // 输出 <div ref="myDiv">Hello World!</div>
  }
}
</script>

在上面的例子中，我们在 div 元素上添加了一个 ref 属性，并将其指定为 myDiv。在组件的 mounted() 生命周期钩子中，我们可以通过 this.$refs.myDiv 来访问 div 元素。

三、ref要注意什么

在使用 ref 时，需要注意以下几点：

• ref 只能在组件的模板中使用，不能在组件的 JavaScript 代码中使用。
• ref 的值是一个 JavaScript 变量，指向组件的 DOM 元素或子组件实例。
• ref 的值是只读的，不能被修改。
• ref 的值在组件的整个生命周期中都是不变的。

四、reactive是什么

reactive 是 Vue3 中的一个特性，它允许我们创建响应式的 JavaScript 对象。响应式对象是指当其属性值发生改变时，视图会自动更新的对象。

五、reactive怎么用

使用 reactive 非常简单，只需要使用 Vue3 的 reactive() 方法即可。例如：

const state = reactive({
  count: 0
})

state.count++ // 视图会自动更新

在上面的例子中，我们使用 Vue3 的 reactive() 方法创建了一个响应式对象 state。然后，我们在 state 对象上添加了一个 count 属性，并将其值设置为 0。当我们使用 state.count++ 来增加 count 的值时，视图会自动更新。

六、reactive要注意什么

在使用 reactive 时，需要注意以下几点：

• reactive() 方法只能在组件的 JavaScript 代码中使用，不能在组件的模板中使用。
• reactive() 方法返回一个响应式对象，该对象不能被修改。
• 响应式对象只能通过 Vue3 的响应式 API（例如：Vue.set()、Vue.delete()）来修改。
• 响应式对象在组件的整个生命周期中都是响应式的。

以上就是 Vue3 中 ref 和 reactive 的常见陷阱，希望对初学者有所帮助。