vue2 ref 使用方法

Vue2中的`ref`是响应式数据绑定的重要组件，它允许你在模板中声明一个可变的属性并跟踪其值的变化。以下是`ref`的基本使用方法：

1. **创建ref**:

   const countRef = ref(0); // 创建一个初始值为0的引用

2. **在模板中使用**:

   <div>{{ countRef.value }}</div> // 直接显示ref的当前值
   <button @click="increaseCount">增加</button>

在JavaScript中，你可以通过`.value`访问`ref`的实际值，并通过`.$set()`或`[]`操作符来更新值。

3. **动态更新值**:

   methods: {
     increaseCount() {
       countRef.value++; // 或者 countRef.value = countRef.value + 1;
     }
   }

4. **计算属性**:
可以将`ref`与其他响应式数据结合，形成计算属性：

   const messageLength = computed(() => countRef.value.toString().length);

5. **访问原始值**:
如果需要在非响应式环境下访问原始值（通常不推荐），可以使用`raw`属性：

   console.log(countRef.raw); // 获取原始数据，不会触发响应式变更