vue2.6.12版本如何使用ref,reactive和onMounted呢

你好！感谢您的提问。关于 vue2.6.12 版本的使用问题，下面是详细的回答：

1. 使用 ref

在 Vue2 中，通过 ref() 函数可以获取 DOM 元素或组件实例的引用。具体使用方法如下：

<template>
  <div ref="myDiv">这是一个 div 元素</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myDiv); // 输出获取到的 DOM 元素
  }
}
</script>

上述代码中，我们在模板中使用 ref 将一个 div 元素的引用命名为“myDiv”，然后在 mounted 生命周期钩子中通过 this.$refs.myDiv 获取到该元素的引用。

2. 使用 reactive

在 Vue2 中，通过 reactive() 函数可以将一个普通对象转换为响应式对象，并进行数据劫持。具体使用方法如下：

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    function increment() {
      state.count++;
    }

    return {
      state,
      increment
    };
  }
}
</script>

上述代码中，我们在 setup 函数中使用 reactive 将一个普通对象转换为响应式对象，并返回了两个属性：state 和 increment。在组件中可以通过 state.count 访问 count 属性，通过 increment 函数进行修改。

3. 使用 onMounted

在 Vue2 中，通过 onMounted() 生命周期函数可以在组件挂载后执行一些操作。具体使用方法如下：

<script>
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件挂载完成！');
    });

    return {};
  }
}
</script>

上述代码中，我们在 setup 函数中使用 onMounted 函数定义一个组件挂载后要执行的操作——输出一句话“组件挂载完成！”。这样就可以在组件挂载后自动执行这段代码了。

希望以上回答对您有帮助！如果您还有其他问题，可以继续提出。