ref在vue2与vue3的区别

在 Vue 2 和 Vue 3 中，ref 的使用方式有一些区别。

在 Vue 2 中，ref 是一个辅助函数，用于在组件中创建一个响应式的数据引用。它的使用方式是通过调用 ref 函数并传入初始值来创建一个 ref 对象。例如：

import Vue from 'vue';

export default {
  data() {
    return {
      count: Vue.ref(0)
    };
  }
}

在上面的例子中，我们使用 Vue.ref 函数来创建一个名为 count 的 ref 对象，并将其初始化为 0。样，在组件中就可以通过 `this.count.value` 来访问和修改这个响应式的数据引用。

而在 Vue 3 中，ref 是一个从 `@vue/reactivity` 包中导出的函数，用于创建一个响应式的数据引用。它的使用方式是通过调用 ref 函数并传入初始值来创建一个 ref 对象。例如：

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    return {
      count
    };
  }
}

在上面的例子中，我们使用 ref 函数来创建一个名为 count 的 ref 对象，并将其初始化为 0。在组件的 setup 函数中，我们将 count 返回给模板，这样就可以在模板中访问和修改这个响应式的数据引用了。

需要注意的是，Vue 3 中的 ref 对象不再需要通过 `.value` 来访问和修改值，而是可以直接使用。例如，在模板中可以使用 `{{ count }}` 来显示 count 的值，在代码中可以使用 `count = 1` 来修改 count 的值。

总结一下，Vue 2 和 Vue 3 中的 ref 都用于创建响应式的数据引用，但在使用方式上有一些区别。在 Vue 3 中，ref 函数从 `@vue/reactivity` 包中导入，并且可以直接访问和修改 ref 对象的值，而不需要通过 `.value`。