一、ref
ref是Vue.js 3.x版本中引入的一个API，它可以将基本类型数据包装成响应式对象。使用ref进行数据绑定时需要注意以下几点：
-
可以将任何基本类型数据包装为响应式对象。
-
修改值时需要使用.value属性。
-
ref不支持嵌套数据的监听。
下面是一个使用ref实现响应式数据绑定的例子：
import { ref } from 'vue'
const message = ref('Hello Vue.js!')
console.log(message.value)
message.value = 'Hello World!'
console.log(message.value)
在上述代码中，我们使用ref将一个字符串包装为响应式对象，并定义了它的value属性。接着，我们通过修改value属性的值来触发数据变化，并打印出相应的信息。
二、reactive
reactive是Vue.js 3.x版本中引入的一个API，它可以将一个普通对象转换为响应式对象，并支持嵌套数据的监听。使用reactive进行数据绑定时需要注意以下几点：
-
可以监听整个对象和嵌套对象的属性。
-
对象的新增或删除属性可以被监听。
-
修改值时不需要使用额外的属性。
下面是一个使用reactive实现嵌套数据绑定的例子：
import { reactive } from 'vue'
const state = reactive({
message: {
text: 'Hello Vue.js!',
count: 0
}
})
console.log(state.message.text, state.message.count)
state.message.text = 'Hello World!'
state.message.count++
console.log(state.message.text, state.message.count)
在上述代码中，我们使用reactive将一个嵌套对象转换为响应式对象，并定义了它的message属性。接着，我们修改message属性中text和count属性的值来触发数据变化，并打印出相应的信息。
三、computed
computed是Vue.js 3.x版本中引入的一个API，它可以用于计算属性的定义。使用computed进行计算属性绑定时需要注意以下几点：
-
可以定义具有缓存特性的计算属性。
-
计算属性可以依赖多个响应式数据。
-
计算属性只有在其依赖项发生变化时才会重新计算。
下面是一个使用computed实现计算属性的例子：
import { ref, computed } from 'vue'
const width = ref(100)
const height = ref(200)
const area = computed(() => {
console.log('calculate area')
return width.value * height.value
})
console.log(area.value)
width.value = 150
console.log(area.value)
在上述代码中，我们使用ref将宽度和高度包装为响应式对象，并通过computed定义了一个计算属性area。接着，我们修改width的值来触发计算属性的重新计算，并打印出相应的信息。
四、总结
Vue.js 3引入了一些新的响应式API，与Vue.js 2相比，在监听范围、性能和使用方式等方面都有一定差异。通常来说，如果需要将基本类型数据进行绑定，可以使用ref；而如果需要监听整个对象及其嵌套数据的变化，则需要使用reactive。如果需要定义具有缓存特性的计算属性，则可以使用computed。
