学习vue3 ref 与 reactive

作者：System 时间：2024年08月13日分类：所有,typescript 字数：606

在Vue 3中，ref和reactive是用来定义响应式数据的两种机制。

ref用于定义基本类型数据的响应式引用，它通常用于响应式地“包装”一个值。




import { ref } from 'vue';
 
const count = ref(0);
 
// 读取响应式引用的值
console.log(count.value);  // 输出：0
 
// 修改响应式引用的值
count.value++;

reactive用于定义对象类型数据的响应式对象，它可以跟踪任意深度的数据变化。




import { reactive } from 'vue';
 
const state = reactive({
  count: 0,
  message: 'Hello Vue 3'
});
 
// 读取响应式对象的属性
console.log(state.count);  // 输出：0
 
// 修改响应式对象的属性
state.count++;

ref适用于基本类型数据，而reactive适用于对象类型数据。当使用ref定义对象类型数据时，需要使用.value来访问或修改其内部属性。而reactive可以直接跟踪对象内部属性的变化。

学习vue3 ref 与 reactive

评论已关闭

推荐阅读