响应式

• 当数据发生变化时，依赖该数据的视图会自动更新，无需手动操作 DOM, 这就是响应式。

ref

• vue 常用 定义响应式数据的方法。

import { ref } from 'vue';

// 定义响应式数据 money
let money = ref(1000);

// 访问响应式数据 money 的值
console.log(money.value);

reactive

• vue 常用 定义响应式数据的方法。

import { reactive } from 'vue';

// 定义响应式数据 user
let user = reactive({
	name: '张三',
	age: 18,
});

// 访问响应式数据 user 的值
console.log(user.name);

ref 与 reactive 的区别

访问区别

• ref 定义的响应式数据，访问时需要添加 .value 前缀。
• reactive 定义的响应式数据，访问时不需要添加 .value 前缀。

数据类型区别

• ref 几乎可以定义任意类型数据
• reactive 定义的响应式数据，只能定义对象类型数据。

总结

• 尽量使用ref定义响应式数据。