Vue3中reactive函数toRef函数ref函数简介

下面是“Vue3中reactive函数toRef函数ref函数简介”的完整攻略：

1. reactive函数

reactive 是 Vue.js 组件开发中一个常用的函数，它可以将一个普通的 JavaScript 对象转换成一个响应式的数据对象，在对象发生变化时，会自动更新对应的视图。

举个例子，假设有一个计数器，初始值为0，我们可以这样用 reactive 函数将其转换为响应式对象：

import { reactive } from 'vue'

const counter = reactive({ value: 0 })

console.log(counter.value) // 0

上述代码中，reactive 函数接受一个 JavaScript 对象作为参数，并返回一个响应式对象。我们可以通过 counter.value 获取到对象中的属性值。

此外，reactive 函数还有一个特点，它可以将嵌套的属性也转换成响应式对象。例如，我们可以将上面的例子改写成：

import { reactive } from 'vue'

const app = reactive({
  counter: { value: 0 }
})

console.log(app.counter.value) // 0

2. ref函数

ref 函数也是 Vue.js 3 中一个常用的函数，它可以将一个普通的 JavaScript 数据转换成一个响应式的数据对象。

与 reactive 函数不同的是，ref 函数只能用于简单的数据类型，如数字、字符串等，而不能用于对象或数组等复杂的数据类型。

举个例子，我们可以用 ref 函数将一个数字转换成响应式对象：

import { ref } from 'vue'

const count = ref(0)

console.log(count.value) // 0

上述代码中，ref 函数接受一个数字作为参数，并返回一个响应式对象。我们可以通过 count.value 获取到对象中的属性值。

注意，如果想将一个对象或数组转换成响应式数据对象，可以使用 reactive 函数，而不是 ref 函数。

3. toRef函数

toRef 函数是 Vue.js 3 中新增的一个函数，它可以将一个响应式对象的属性转换成一个单独的响应式对象，以便于在组件之间共享数据。

举个例子，假设有两个组件 A 和 B，它们都需要使用一个名为 count 的计数器，我们可以将计数器定义为一个响应式对象，然后使用 toRef 函数将其转换成两个组件分别使用的响应式对象。

import { reactive, toRef } from 'vue'

const state = reactive({
  count: 0
})

const A = {
  setup() {
    const count = toRef(state, 'count')

    return {
      count
    }
  }
}

const B = {
  setup() {
    const count = toRef(state, 'count')

    return {
      count
    }
  }
}

上述代码中，我们首先定义了一个名为 state 的响应式对象，其中包含一个名为 count 的属性。然后使用 toRef 函数将 count 属性分别转换成组件 A 和组件 B 使用的响应式对象。

需要注意的是，toRef 函数返回的是一个引用对象而非值，因此在使用时要配合 .value 属性来获取属性值。

console.log(A.count.value) // 0
console.log(B.count.value) // 0

示例说明

示例一

假设有一个任务列表，需要在多个组件中共享和修改。我们可以用 reactive 函数将任务列表转换成一个响应式对象，然后使用 toRef 函数将其中的属性转换成共享的响应式对象。

import { reactive, toRef } from 'vue'

const tasks = reactive({
  list: [],
  add(task) {
    this.list.push(task)
  },
  remove(index) {
    this.list.splice(index, 1)
  }
})

const TaskList = {
  setup() {
    const list = toRef(tasks, 'list')

    return {
      list
    }
  }
}

const NewTask = {
  setup() {
    const task = ref('')

    function handleSubmit() {
      tasks.add(task.value)
    }

    return {
      task,
      handleSubmit
    }
  }
}

上述代码中，我们首先定义了一个名为 tasks 的响应式对象，其中包含一个名为 list 的属性（任务列表），以及 add 和 remove 方法（添加和删除任务）。然后使用 toRef 函数将 list 属性转换成共享的响应式对象。

组件 TaskList 中使用共享的响应式对象 list，组件 NewTask 则使用了 ref 函数将一个简单的字符串转换成响应式对象。

示例二

假设有两个可独立滚动的表格组件，可以使用滚动条分别滚动。我们可以用 reactive 和 ref 函数分别定义两个可滚动表格组件的状态。

import { reactive, ref } from 'vue'

const table1 = reactive({
  scrollTop: 0
})

const table2 = reactive({
  scrollTop: 0
})

const Table1 = {
  setup() {
    const scrollTop = toRef(table1, 'scrollTop')

    function handleScroll(event) {
      table1.scrollTop = event.target.scrollTop
    }

    return {
      scrollTop,
      handleScroll
    }
  }
}

const Table2 = {
  setup() {
    const scrollTop = toRef(table2, 'scrollTop')

    function handleScroll(event) {
      table2.scrollTop = event.target.scrollTop
    }

    return {
      scrollTop,
      handleScroll
    }
  }
}

上述代码中，我们首先使用 reactive 函数分别定义了两个响应式对象 table1 和 table2，其中包含一个名为 scrollTop 的属性。

然后在组件 Table1 和 Table2 中分别使用 toRef 函数将 scrollTop 属性转换成响应式对象，以便于在组件中使用。在 handleScroll 方法中更新对应的 scrollTop 属性。

最后在模板中分别使用 scrollTop 和 handleScroll 属性，以实现表格组件的滚动功能。