vue2 3 ref

Vue.js 中的 `ref` 是 Vue 2.x 和 Vue 3.x 版本都支持的一个核心特性，它是一个响应式的数据容器，类似于 React 的 `useState` 或 `useRef`。`ref` 主要用于存储组件的实例属性或者是 DOM 元素，并提供了一种便捷的方式来获取、设置以及观察这些值的变化。

在 Vue 2 中，你可以像这样创建和使用 `ref`：

export default {
  data() {
    return {
      inputText: '',
    };
  },
  mounted() {
    this.$refs.myInput.focus(); // 获取到元素并操作
  },
  methods: {
    handleChange(event) {
      this.inputText = event.target.value; // 响应式更新数据
    },
  },
};

在 Vue 3 中，`ref` 更加强大，它是由 `reactive()` API 创建的响应式对象的一部分，例如：

import { ref } from 'vue';

export default {
  setup() {
    const inputText = ref('');
    function handleFocus() {
      inputText.value = 'Focused!';
    }
    return { inputText, handleFocus };
  },
};

这里，`inputText` 可以直接通过 `.value` 访问，并且当它的值改变时，整个组件会自动重新渲染。