ref和reactive

ref和reactive是Vue.js中用于实现响应式数据的两个重要方法。

ref方法用于定义基本类型数据的响应式。通过ref方法定义的数据会被包装成一个带有value属性的响应式对象，并可以通过访问value属性来获取和修改数据。例如，使用ref方法定义一个number类型的数据如下：

import { ref } from 'vue'
const a = ref(1)

在上述代码中，变量a就成为了一个ref对象，可以通过`a.value`来获取和修改数据。

reactive方法用于定义对象类型数据的响应式。通过reactive方法定义的数据会被转换成一个响应式代理对象，可以直接访问和修改对象的属性。例如，使用reactive方法定义一个对象类型的数据如下：

import { reactive } from 'vue'
const a = reactive({ name: 'Alice', age: 20 })

在上述代码中，变量a就成为了一个响应式对象，可以直接通过`a.name`和`a.age`来访问和修改对象的属性。

相关问题

ref和reactive原理

"ref" 和 "reactive" 是 Vue.js 中的两个核心特性，分别对应于响应式系统和自定义属性。

1. **ref**: `ref` 是 Vue 提供的一个指令，用于创建一个引用到 DOM 元素或计算值的变量。当你给某个元素加上 `ref` 指令，Vue 会将该元素的实际 DOM 节点赋值给对应的变量，允许你在组件内部直接操作DOM。例如：

<div ref="myDiv">Hello</div>
<script>
export default {
  setup() {
    const myDiv = ref(null);
    onMounted(() => {
      console.log(myDiv.value); // 当渲染完成时，输出 div 的实际节点
    });
  }
}

ref和reactive区别

ref 和 reactive 都是 Vue3 中的响应式 API，但是它们的使用场景不同。ref 主要用于对基本数据类型进行响应式处理，例如数字、字符串等等，而 reactive 主要用于对复杂对象进行响应式处理，例如对象、数组等等。ref 返回的是一个包装过的值，而 reactive 返回的是一个响应式代理对象。另外，ref 可以被用作模板中的数据绑定，而 reactive 则需要使用解构来取出对象的属性然后绑定到模板中。